How the U.S. Web Design System Paved the Way for Federal Modernization

In 2015, a scrappy group of folks from 18F and United States Digital Service collaborated to bring consistency and standardization to the user experience of federal websites. This team pitched an idea that eventually turned into the U.S. Web Design System, which is a series of tools, design patterns, and code snippets digital service teams can use to build digital products. Little did they know at the time, this system would pave the way for the 21st Century Integrated Digital Experience Act (IDEA) three years later.

As the team set out on their mission to modernize federal websites, they drew on experiences from other agencies who had already built design systems of their own. They then inventoried and analyzed all the different design patterns and visual styles currently in use. 

Fast forward to today, the U.S. Web Design System is an established toolset funded and supported product by General Service Administration’s Technology Transformation Service. Dozens of federal agencies have adopted the toolset as they work towards modernizing their digital products. If that wasn’t enough, the 21stCentury IDEA Act itself referenced the U.S. Web Design System as a design system federal agencies should consider.

The U.S. Web Design System start page on the Digital.gov website

A piece of legislation that aims to encourage the modernization of federal website and digital services, the 21stCentury IDEA Act has several moving pieces. Many of its calls to action run parallel with the core principals of the U.S. Web Design System (referred to as United States Website Standards in the legislation), which is one of the reasons it is the go-to model for complying with the Act’s mandates. The Act’s call for all federal websites and digital products to become 508 compliant, mobile friendly, and consist with other federal digital services via a design system meshes well with the way U.S. Web Design System has been approaching modernization all along. This is why we at U.Group believe federal agencies should seriously consider it to aid in their efforts to comply with the new policy. 

Accessible by design

When 18F and United States Digital Service were first creating the U.S. Web Design System, they floated the idea to base the design system on one of the systems already in frequent use. Ultimately, they decided to build theirs from the ground up so they could ensure everything was accessible by design, from the big design elements down to the smallest snippet of code. Adopting the U.S. Web Design System ensures that any site that makes the switch meets at least baseline 508 Accessibility Guidelines. Teams that require extension and customization of the U.S. Web Design System, can access detailed guidelines to help the development team adapt the design system to meet their needs.  

Government website accessibility example

Mobile first—right out of the box

Another feature of the U.S. Web Design System built in from the very start was support for all the common device screen sizes that are part of our now very mobile world. By crafting a new design or converting an existing design off the baseline grid used in the U.S. Web Design System, any team can ensure that the digital service they release will be viewable and accessible from common mobile devices. 

Consistency to simplify visual language and complexity

When the U.S. Web Design System team conducted their inventory of design assets as mentioned above, they found dozens upon dozens of button styles in use across all the federal digital services inventoried. Does the federal government really need dozens of button styles? The answer is no—no one needs dozens of button styles. 

This finding drove the team to create a design pattern library that would help provide a consistent look and feel across any digital service using the design system. There’s still plenty of room for teams to add their own branding flair to buttons, but the goal for consistency is to ensure there are varying degrees of rounded corners or text styling.

Toolkit for designs and developers

Good design is the outcome of the hard work of both designers and the developers that help bring all those pixels to life. Teams adopting the U.S. Web Design System are poised to take advantage of everyone’s skillset, as it allows designers and developers to collaborate more efficiently. The union of skillsets helps to ensure that teams follow a healthy user-centric approach when designing and developing a digital service. 

government website modernization U.S. web standards before and after

How we can help?

The U.Group team are experts at customizing and extending the U.S. Web Design System to fit any requirement our federal customer might need. We have teams that are using the U.S. Web Design Standards to usher in a new area of modernization for the federal digital service space by quickly building out mobile-friendly and accessible products. Adopting the U.S. Web Design System is a great strategy to consider when working towards the requirements laid out in the 21stCentury IDEA Act, and we are here to help you on your path to compliance. 

Get alerted to new job postings, events, and insights by registering for our monthly newsletter.