As part of USDS at the White House, I worked as the Lead Visual Designer with a team of designers, UX researchers, developers, agencies, and advisors to create the alpha version of the U.S. Web Design Standards. The standards compose of open source, 508 compliant, and responsive UI components as well as a visual style guide for U.S. federal government websites.
visual design, branding
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.