I worked as the lead visual designer with a team of designers, UX researchers, developers, agencies, and advisors to create the U.S. Web Design Standards, a responsive and accessible design system for federal government websites.
visual design, ux design, branding, responsive web design
In 2015, I got the pleasure to work at the United States Digital Service (USDS) at the White House where they had won a grant to improve government websites. Government websites are confusing, frustrating, inconsistent, and outdated. How can we create a shared set of tools to provide consistent, beautiful, and easy-to-use government websites?
Since one of our design principles was reuse, we decided to start off looking at what pattern libraries/style guides were out there and what we could reuse and learn from them.
We decided that we first wanted to make things easier for designers and developers at agencies, USDS, and 18F. From here we gathered designers and developers from various government agencies into a room to do a little workshop and be involved in the process from the very beginning. We did empathy mapping and wrote down all the components that we wanted to see in this living pattern library. We put all the post-its into a spreadsheet and added any that were left off but we knew were important based on the interface inventory. We then sent out the list to designers and developers to help prioritize. We then used that data to prioritize which components we should start building.
From here the UX researchers researched, created wireframes, and did user testing.
The UX researchers then handed off wireframes to me and I would take it into Illustrator starting off in grayscale and blue links. We would then share mockups on GitHub for people to give feedback and updated the mocks accordingly. Then we would take it to code.
While the developers were building all of the components, I started to work on figuring out what our fonts and colors were going to be. We started this process off with mood boarding. We wanted to create something that looked modern, simple, approachable, trustworthy, engaging, and accessible.
I created three different mood boards. From here, we worked with a group of designers from various government agencies and held a dot voting session to go over what they liked and didn’t like about the mood boards.
In the end we liked the bold saturated colors of the Modern American, but the type of the Clean and Classic. With this knowledge in mind I went on to looking at fonts.
We wanted a free font so no one would have any trouble using the fonts. We went through Google fonts, read articles about various fonts, and tested out font pairings. When looking for fonts, we looked for large x-heights for better readability, open counters to aid in character recognition, and multiple font weights for contrast.
I showed ten different pairs of fonts and decided to not show the names of the fonts as I didn’t want people to get caught up in fonts they think they liked or disliked based on the names, but focused on how they looked and read.
Using inspect element, I showed what the font pairings would look like on existing government sites. Here’s what it would look like on the Department of Labor and IRS.
To align with our principle, design for flexibility, we decided to pick a serif font and a sans-serif font that could be used as headings or body in any combination. From there I did an example of what that set would look like with the top four fonts we liked and tried them on more government websites. In the end we chose Merriweather and Source Sans Pro.
I started off with the preferred palette from our mood boards and tried out the colors on existing government websites.
We landed on a primary palette of blue, gray, and white. We decided that we wanted red and bright blue to be used more sparingly as accent colors and moved them to the secondary palette.
Also, when thinking about the color palette we had to think about accessibility since government websites need to be 508 compliant. We had to balance what we thought looked good with what would be legible and functional for people who could not see the full spectrum of colors.
I updated the mockups to reflect color and font changes as well as any other changes that the UX researchers and the dev team had found based on the user testing and feedback from designers and developers. I then handed the updated files back over to the developers.
Once it was on our site, I sat down with one of our developers to fix any little things that we missed or may have differed from the mockups.
After a feature freeze and some bug testing we launched the alpha version on September 25, 2015. It works on desktop, mobile devices, and tablets and is being continually improved everyday by 18F. Since launch it has been used by over 100 government websites. And the Github repo has over 4,486 stars and 638 forks.