U.S. Web Design System

A design system for the federal government with the goal of making it easier to build accessible and mobile-friendly government websites.

U.S. Web Design System (USWDS)
- UX Designer
- Q3 2023
- U.S. House of Representatives (House Digital Service)
‍
How we worked
‍Our development team relied on designers to supply custom-made components and assets for the tools our team built. Each project's design file often consisted of disconnected components. Even assets used across multiple projects were found to be inconsistent.
About
During my time as a UX Designer at House Digital Service, I was asked to come up with ways to improve our workflow and efficiency. I proposed creating a standardized design system and asset library to help us create a more cohesive visual identity across all of the tools and services we provide.

Duration
6-week sprint (from design start to implementation)


Adopting tokens
While researching existing solutions, I found design systems used by large enterprises often utilized the idea of tokens to provide semantic meaning for specific value sets. Specifically, Google's material design system and Apple's design system are both vast in their content while still contributing to an iconic and recognizable visual identity across their products.
‍
Coincidentally, Figma had just announced their a new feature called Variables! This enabled the use of tokens across design files. Eager to try it out, I quickly experimented with this feature and found it to be a good way to achieve what we were looking for.
Configuring the USWDS‍
The team at U.S. Digital Service had an existing design system that they pushed for use on the executive branch. The design system was code-based, and as far as design tools, only supported Adobe XD and Sketch. I worked to bring the design system to Figma, and configured variables to match the token specifications outlined here. Naming conventions and color codes were kept the same to allow for extensibility and maintaining accessibility compliance. Tokenization helped establish consistency across design files and projects when it came to colors, sizing, typography, and more.
Appending our resources
‍‍With the original goal to consolidate and standardize the assets we used across our projects for the U.S. House, at this point we had a solid framework to build upon with the USWDS and worked on creating and appending those resources.

How it's used
‍During the transition period of our team's 6-week sprint cycles, it's common for us to take a look at project ideas on an intake form and discuss whether an idea is worth undertaking. The design system allowed us to rapidly prototype and design more efficiently so that we could present prototypes quicker while ensuring that the visual identify of the tools we built remained intact.

While I can't share direct links to my team's working design system file, shoot me an email and I'd be happy to hop on a call and share my screen to talk about it more!

‍
Takeaways
‍‍‍- Design system work is sick
- Importance of updating workflow to match industry standards
- Value of creating a thorough design system
‍
Reflections
Being the project I spent the most time on the most during my time at House Digital Service, I found working on the design system to be really fun. Working on this project allowed me to further develop my design skills along with giving me a understanding of how design systems work in a large enterprise.
‍
While government work is typically regarded as being slow, I was really happy to have the opportunity to evaluate our teams workflow and come up with ways to improve our efficiency and production through a project like this.