U.S. Web Design Standards

Role: Lead UX designer
Team: Maya Benari, Carolyn Dew, Julia Elman, Kate Garklavs, Yoz Graham, Roger Ruiz, Marco Segreto, John Yuda

The Web Design Standards is a library of design guidelines and code to help government developers and designers quickly create trustworthy, accessible, and consistent digital government services.
 
Why a pattern library for government?

  • Most existing resources aren’t explicit about accessibility. 
  • There are lots of product teams working across government on similar problems, without ways to share knowledge.
  • As the Standards gain adoption, they will help improve consistency across government services.

 
Understanding user needs

When I joined the project, the team had just launched an MVP. It was the first year, so weren’t getting much data yet on how people were using the Standards. We wanted to establish a benchmark for adoption and see if we could get lots of teams to try it out.

We started with a research sprint, interviewing early adopters and synthesizing what we heard.

Synthesizing user research

Synthesizing user research

Archetypes capturing common user roles and behaviors

Archetypes capturing common user roles and behaviors

Addressing usability issues

We knew we needed to kickstart growth, so we started by addressing usability issues we identified in our research.

We improved design resources by consolidating files and adding responsive grid templates, Sketch symbols, and character styles to help designers get set up quickly.

 
Components Sketch file

Components Sketch file

 

We also improved the usability of the Standards website by expanding the information architecture, putting the components front and center, improving navigation, and refining the visual design.

 
Mobile wireframes

Mobile wireframes

standards.usa.gov

standards.usa.gov

 

Providing guidance

Then we started working on providing better information about how to use the Standards. 

We created detailed guides for designers and developers to get set up, added more information on how components should be used, and began creating page templates.

Accessibility and usability considerations for form controls

Accessibility and usability considerations for form controls

Landing page template

Landing page template

Developing new components

After launching our usability and education improvements, we started building lots of new components.

Headers were one of the most requested components that were missing from the MVP. We needed the header designs to be flexible and customizable enough to accommodate many different types of websites.

We also wanted to address a frequent problem: users don’t know when they’re looking at a real government site. So in our headers, we embedded an official government site banner that tells people what to look for to know a site is legitimate.

 
Extended header component

Extended header component

 

Dealing with iteration

Since we had active users but were in the process of adding and changing things, we made our roadmap public and developed a component maturity scale across the site, indicating the stability of each component.

 
Up-to-date public roadmap

Up-to-date public roadmap

 

Building trust

Finally, we knew we needed to do more to build the trust of stakeholders and teams. One of the ways we addressed that was by designing and building real sites using the Standards.

18f.gsa.gov

18f.gsa.gov

labs.usa.gov

labs.usa.gov

vote.gov

vote.gov

Signs of success

A year after the MVP, we had a running tally of 107 self-reported teams using the Standards, with around 62 million people in the last quarter who were exposed to those sites. We also had over 70 code contributors and 500 commenters on our Github repo. And while at first most teams used the Standards for simple informational sites, we started to see more agencies begin relying on the Standards when building their forms and accounts.