DigitalGov User Experience Program: Before and After Gallery

The changes that come out of usability testing can be small or large. They might be the confirmation of a known problem, or something completely unexpected. The gallery of before and after examples you see here are meant to give you an idea of how designs become stronger and more coherent through usability testing. 

   
Screenshot of fueleconomy.gov's calculate my mpg button before and after user testing. Department of Energy
fueleconomy.gov—2/15/2013
  • Simplified technical terms
  • Improved buttons with clearer names and better positioning
  • Added a "Learn More" button at bottom of the page
   
Screenshot of the ATF.gov site after user testing.

Department of Justice
ATF.gov Test Results—12/20/2012

  • Removed search autocomplete function, which was frustrating users
  • Moved important links to higher priority position on page
  • Increased font size to 10 points for better readability
   
Screenshot of the GSA Contractor Vehicle Navigator site after user testing.

General Services Administration
Contractor Vehicle Navigator Test Results—12/7/2012

  • Replaced jargon with plain language
  • Moved "Help" section to more visible location
  • Included "trackability" functionality in online forms
   
Screenshot of the Commerce Departmental Library site after user testing.

Department of Commerce
Commerce Departmental Library Test Results—11/12/2012

  • Revised navigation labels to make them more descriptive
  • Revised and re-organized information to clean up and de-clutter pages
  • Made text fonts and styles consistent throughout site
   
Screenshot of Regulations.gov after user testing.

eRulemaking Program Management Office
Regulations.gov Test Results—10/5/2012

  • Made site search results easier to scan
  • Boosted prominence of important link for improved site navigation
  • Added more information about "Comments Received" function
   
Screenshot of the Department of Transportation's SaferBus mobile app after user testing.

Department of Transportation 
SaferBus Mobile Application Test Results—09/19/2012

  • Added tagline to explain what people can do on this app
  • Changed design to make icons more "clickable"
  • Improved navigation by creating clearer icons
   
Screenshot of the SAM.gov site after user testing.

General Services Administration
SAM.gov Test Results—9/7/2012

  • Improved label descriptions for better navigation
  • Made main options—creating an account and registering an entity—clearly distinct
  • Defined purpose and scope of search box
   
Screenshot of Business.USA.gov after user testing.

General Services Administration
Business.USA.gov Test Results—6/1/2012

  • Added tagline to explain what people can do on this website
  • Improved "clickability" of menu items
  • Made Twitter icon more prominent
   
Screenshot of Army.mil after user testing.

Department of Defense
Army.mil Test Results—5/18/2012

  • Prioritized information
  • Added "Quick Links" so users can find popular information quicker
   
Screenshot of the GSA FedRAMP site homepage.

General Services Administration 
GSA FedRAMP Test Results—4/18/2012

  • Added new tagline on homepage to explain what FedRAMP does
  • Re-designed navigation based on user needs
  • Significantly reduced text on homepage for cleaner interface
   
Screenshot of the IRS.gov site after user testing.

Internal Revenue Service
IRS.gov Test Results—1/25/2012

  • Reduced list of links and revised descriptions
  • Grouped similar pages together based on audience segments
  • Replaced confusing acronyms with plain language
   
Screenshot of the GSA Intranet site homepage.

General Services Administration
GSA Intranet Test Results—9/21/2011

  • Replaced revolving navigation bar with most important site links
  • Simplified acronyms and program names with plain language
  • Eliminated distracting animation
   
Screenshot of the Office of Natural Resources Revenue site.

Department of Interior
Office of Natural Resources Revenue Test Results—8/5/2011

  • Replaced confusing "floating" links with clear navigation and easy-to-understand directions
  • Replaced jargon in main navigation with plain language
  • Placed new information in more prominent place on homepage
   
Screenshot of the NSF.gov homepage.

National Science Foundation
NSF.gov Test Results—6/15/2011

  • Used clear labeling to indicate reports with most recent data
   
Screenshot of the Weather.gov site after user testing.

National Oceanic and Atmospheric Administration
Weather.gov Test Results—5/18/2011

  • Simplified tabs on top of map; used plain language to guide casual users
  • Added "home" button to persistent menu for better navigation; moved agency logos to reduce confusion
  • Added graphics to highlight timely, relevant information
   

 

Content Lead: Jonathan Rubin
Page Reviewed/Updated: December 5, 2013

You are now leaving the HowTo.gov website.


CancelView Link