Expanding USWDS to meet user needs in the pandemic

September 2020 - January 2021

Overview

In response to the events of 2020, the General Services Administration received funding to expand the U.S. Web Design System (USWDS) to enable government websites to better respond to crises.
Our team interviewed first responders from agencies like FEMA and CDC and design system experts like Nathan Curtis to develop new components for USWDS. We also produced a report recommending a roadmap for the U.S. Web Design System.

Team Role:

IC product designer, lead/support for team members from my company

Highlights

Summary Box Component

Modal Component

Custom Emergency Response Icons

Until 2020, USWDS used Font Awesome’s free icon set. We learned from research that USWDS needed new icons related to weather events and disaster relief.

I conducted an analysis of open-source icon sets to identify the best fit. The team and client selected a “short list” of 100 icons to include in the SVG sprite for the design system. A designer and I also designed 12 custom icons related to emergency response.

Outcomes

USWDS moved to Material icons. We developed an icon sprite that was released with the design system updates. Additionally, we designed several custom icons to support specific emergency scenarios we heard about in our research. These new, custom icons follow Material guidelines and were added to USWDS’ design system and sprite.

Activities

• 1:1 user interviews

• Co-synthesis in Mural

• Feature ideation and prioritization

• Design directions exploration and usability testing

• Analysis and recommendation for icon system

• Final design delivery including public-facing documentation on use cases and accessibility considerations for component

Links

• USWDS Announcement [Blog / Video]

• USWDS Release 2.1 [Github]

• Transforming the American digital experience What’s next for the U.S. Web Design System [Final Report]