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.
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.
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.
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.
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.
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.
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.
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.