What is the United States Web Design System (USWDS)?

The United States Web Design System was created by a collaborative team at 18F and the U.S. Digital Service in 2015, and is currently maintained by the US General Services Administration's (GSA) Technology Transformation Services (TTS).

It consists of three main components:

design principles
user experience guidance in the form of Adobe XD and Sketch Libraries
a code base we can use in our projects

To effectively use this design system, you’ll need your project’s designers and developers to all be on board. At Truss, we work on several government contracts, and this is the design system we use for them.

The benefits of design systems

The USWDS makes it possible for consultancies like Truss and for digital services across various government agencies to create cohesive web experiences, even if their projects don’t overlap or have any explicit cross-communication.

As a UX designer, working with a design system makes my job a lot easier.

If you’ve never used a design system before, it’s a shared library of reusable components and guidelines that helps you keep all your work consistent and easier to implement.

A design system can help you work more efficiently, because it keeps a record of all the design decisions you’ve already made. This is especially helpful if you work on a team of designers — I’m a part of a team of seven designers on my project!

Approaches to using a design system

There are a couple of approaches to creating a design system. They can be really easy or really hard depending how mature your project is.

If you are starting fresh, you can build a design system from scratch, which can take a while, or use an existing design system and modify it. I’ve always preferred to use an existing system, because why reinvent the wheel? If there’s an existing design system to use as a starting point, you can modify it to match the look and feel of your project.

At Truss, especially with our government projects, we like to use the USWDS as our starting point. We have a couple of projects we are working on for different agencies within the government. They each have their own design systems, but the USWDS is at the core of all of them.

Benefits of using the USWDS

One benefit of this is that my team can get advice and help from the folks working on a different project at Truss, because even though we are solving different problems, our tool sets are similar.

Another benefit of working with the USWDS is that it was designed with Section 508 compliance in mind. Section 508 requires federal agencies to make their technology, online training and websites accessible for everyone.

Using a design system with accessibility and inclusive design built in will save you a lot of trouble and confusion. You’ll still need to test with users and validate your work, but it’s a lot easier to comply with these standards when your toolset is equipping you with what you need to succeed.

Personally, I feel that whether or not you are selling software for government use, you should be meeting and exceeding these accessibility standards. It’s our responsibility as people who make things to ensure that what we make does not perpetuate exclusionary practices or policies.

We want everyone to be able to access the services and information our projects provide. Standards like Section 508 (and the WCAG 2.0 guidelines it instructs you to follow) exist to make the web a more welcoming and inclusive place, and we should want to adhere to them regardless of the law.

So even if your project is for a private industry client, the USWDS might be a great option to start from. It’s one of the most strongly vetted design systems out there when it comes to accessibility, both in the thought process behind the design of the components and their suggested implementations.