Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

Editor’s Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F¹. We highly encourage more teams to share the lessons they learned when building design systems² or pattern libraries³, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article.

Today, there are nearly 30,000 U.S federal websites⁴ with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained.

As a result, the government is spending considerable resources on services that aren’t meeting the needs of their users⁵. Federal websites are the front door to government services: it’s the first thing someone encounters when interacting with the government. According to research from the Federal Front Door⁶ initiative, as government interfaces erode, so does the public’s trust in those services.

I was part of a team of designers and developers who unified a complex system with numerous rules to serve users from all corners of the country. I’ll shed some light on how we built tools to leverage industry-standard best practices and produce a design system with reusable components. You’ll also see how our system is helping agency teams in the federal government create simple, efficient, consistent experiences quickly and at reduced cost.

The Problem: Inconsistent User Experiences Across Government Websites Link

⁷

When the American people go online to access government services, they’re often met with confusing navigation systems, an array of visual brands, and inconsistent interaction patterns. Websites intended to help people access information and services, like a veteran looking for help to go back to college, are splintered off of various agencies and organizations.

For example, consider what it’s like for a young veteran looking to apply for federal student loans to help her cover the cost of attending college. Let’s call this person Joanne. Joanne had to wade through multiple agency websites to access the federal programs that could help her afford college. Joanne was confused. She was overwhelmed by how hard these tools were to use, missed opportunities she was eligible for, and felt frustrated and isolated. The system that was supposed to help her stood in her way. Creating consistency between these systems will help people (like Joanne) more effectively access the services they need and increase their trust in the government.

⁹

Why It’s Like This: Limitations To Consistent User Experiences In Government Link

Dedicated federal workers want to build helpful digital tools for everyone. They want to be able to develop quick prototypes and sites. They choose resources with minimal documentation that allow them to get up and running quickly.

Other one-off designers or front-end developers in an agency are trying to do the right thing but without a lot of time or support. They need tools to cut down on design and development time, and a way to advocate for best practices to higher ups.

Therefore, the question in front of us became:

Could we create a shared set of tools to provide consistent, effective, and easy-to-use government websites?

We think the answer is yes.

The Team Link

In the summer of 2015, a team from 18F and the U.S. Digital Services formed to work on these tools. We asked ourselves: how do we bring together thousands of public websites into a common design language?

¹²

To answer this question, twenty designers and developers working on digital services in government gathered in Washington, DC to work on this problem.

Joining us were visual designers working with the Department of Education¹⁴ and U.S. Citizens and Immigration Services¹⁵, developers from the Consumer Financial Protection Bureau¹⁶ and U.S. Department of Agriculture⁶⁴¹⁷, and a program manager from USA.gov, and several more folks beaming in remotely. Our websites couldn’t be more different. It’s not hard to wonder: what could we even have in common?

The first question we asked ourselves was: what are the components and patterns we’re looking for in a pattern library? What are the elements that could help us build a library of patterns and systems of styles? We wrote down all the parts that make up our websites and what we would want in a system. We stuck these ideas on a wall and grouped them together to find what was universal across our systems. We then looked for patterns, taking note of what were the most common. Some of the simplest things kept coming up again and again: color, typography, grids, and buttons.

¹⁸

During our meetings, the team mentioned other components. For instance, people also asked about unique components like data visualizations and calendar widgets. However, by limiting components to the basic building blocks, we could get it in the hands of designers and developers as quickly as possible and see for ourselves what was clicking and what wasn’t.

Building a library to create consistency is similar to playing with Lego bricks as opposed to say mud. When you give people a handful of mud and tell them to build a house, each house will look different: a little lopsided and squishy. When you give those same people five kinds of Lego bricks, they can create a million different houses. Each house looks consistent, not uniform.

Building The System Link

We started to explore how we could bring consistency across interactions, user experiences, and behavior across those websites. Joanne wants to understand she’s on a government site. She wants it to feel familiar and be intuitive, so she knows what to do and can accomplish her task. A consistent look and feel with common design elements will feel familiar, trustworthy, and secure — and people like Joanne will be able to navigate government websites more easily because of a common palette and design.

¹⁹

Interface inventory Link

We used analytics.usa.gov²² to look at the top visited .gov domains to surface common colors and component styles. We wondered: “Do we need 32 different shades of blue?” We were surprised by so many different button styles on government website. Do we really need 64 types of buttons? Surfacing and categorizing components across government websites allowed us to see the inconsistencies between government websites as well as what components they had in common.

²³

The interface inventory and results from our workshop were combined and prioritized with the help of government designers. Once we had our list of components to start with, our user researchers began researching, creating wireframes, and conducting user testing of the components and design system website.

²⁵

The user experience team members researched, created wireframes, and tested components like this sign-in form. Visual designers created higher fidelity designs based on the wireframes, which were later developed in code.

Mood boarding Link

Our visual designers began to explore what it would look and feel like. We knew we wanted the system to feel simple, modern, accessible, approachable, and trustworthy. They created three mood boards, which looked at various typography and color samples as well as inspirational design imagery.

The three styles we looked at were:

1. Clean and Classic
2. Inspiring and Empowering
3. Modern American

²⁷

Our team’s designers worked with visual designers across government and conducted a dot-voting exercise²⁹ surfacing what they liked about each mood board. We put these three directions up on GitHub³⁰ to solicit feedback from a range of government digital service employees, where we could fine-tune the direction. In the end, people liked the bold, saturated colors of Modern American and the typography of Clean and Classic, which incorporated a sans-serif font and a serif typeface.

Typography Link

Once the style was defined, our visual designers started to explore which typefaces to use. We needed to find a font that was legible, communicated trust and credibility, and was open source. Since paid fonts would have created additional burdens around licensing, we needed to find fonts that were free and open source to make it easy for government designers to use the font.

To promote legibility, we looked at fonts that had a large x-height, open counters, and a range of font weights. In order to provide the greatest flexibility for government designers, we wanted to find a sans-serif font for its clean, modern aesthetic that’s highly legible on interfaces and a serif font, for a traditional look that could be used for text-dense content or added contrast between headings.

Our visual designers tested typography pairings by replacing fonts on actual government websites with these choices to find the fonts that would meet these needs. By omitting the name of the typeface, designers weren’t influenced by what font it was and could focus on how it read. Then we tested these fonts with government designers to identify which font was the most legible and matched our desired aesthetic. In the end, the fonts we chose were Source Sans Pro and Merriweather.

³¹

Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly readable body text. Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity.

Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space. The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity. Merriweather communicates warmth and credibility at both large and smaller font sizes.

³³

From a technical standpoint, we needed to ensure the fonts we provide would perform quickly for users. While our visual designers wanted an array of weights, our developers reminded everyone that this would create a burden on users that have to load extra font families. To compromise, we created different font pairings: a robust option with more font weights and a trimmed down version for quicker load times. Armed with this knowledge, government designers can weigh the options themselves to find which would suit their design and performance needs.

³⁵

³⁷

³⁹

⁴¹

Colors Link

The repeated use of colors found in the interface inventory of government websites informed our color palette. A simple, minimalist palette of cool blue and gray provides a neutral backdrop for brighter shades of red and blue to contrast against. This creates a clean and engaging palette, leaving people feeling like they’re in good hands. The colors are divided by primary, secondary, background, and tertiary colors.

Primary colors are blue, gray, and white. Blue weaves through buttons, links, and headings to bring a sense of calmness, trust, and sincerity through the interface. Clean white content areas allow the typography to “pop” on the page.

⁴³

Secondary colors are the accent colors of bright blue and red are used sparingly on specialized elements to add lightness and a modern flair. They may be used to highlight important features on a page, like a call to action, or for visual design elements like illustrations.

⁴⁵

Background colors are shades of gray used for background blocks of large content areas.

⁴⁷

Tertiary colors are used for content-specific needs and are used sparingly, such as in alerts or illustrations.

⁴⁹

The range of colors in the palette can be flexibly applied to support a range of distinct visual styles. For example, by abstracting color names, such as primary and secondary, we can support agencies that need to conform the palette to their unique brand’s needs. A change once in the color value spreads throughout the system across buttons, accents, and headings.

Because government sites must be accessible to anyone with a disability, in conformance with Section 508⁵¹, the Standards ensures there is enough contrast between text and its background color. Following WCAG 2.0 guidelines⁵², the Standards provide combinations where the contrast between the text and background is greater than or equal to 4.5:1.

⁵³

By using bright saturated tints of blue and red, grounded in sophisticated deeper shades of blues and grays, we could communicate warmth and trustworthiness, support a range of distinct visual styles, and meet the highest accessibility standards and color contrast requirements.

Space Link

The last piece in the building blocks of the design system is how these elements flow in space and provides structure. We provide balanced spacing throughout the type system by placing adequate margins above and below heading elements and paragraph text. By using em’s or relative units, white space is proportionate to the font size and automatically distributes the correct ratio throughout the system. If an agency needs to change a font size, spacing will automatically adjust.

⁵⁵

To hold the structure of the content, we provide a 12-column grid system using Neat⁵⁷, a flexible and lightweight Sass grid by thoughtbot⁵⁸. We provide an easy-to-use grid system comprised of a grid container to contain the content centered in the page and sections of halves, thirds, quarters, sixths, and twelfths to lay out content. Simple classes, like usa-grid and usa-width-one-half allow developers to quickly mock up page layouts. We provide three breakpoints, which allows the grid to reflow at smaller sizes, and people may always fine tune the breakpoints to suit their content. A flexible grid system allows visitors to quickly read the page.

⁵⁹

Typography, colors, and space form the foundation of the design system, which is used to build components like buttons, forms, and navigation.

Complicated Tasks, Ambitious Goals Link

The U.S. Web Design Standards⁶¹ launched in September 2015 as a visual style guide and UI component library with the goal of bringing a common design language for government websites all under one hood. In the two years since we were tasked to unify the design and look of all U.S. government websites, over 100 government projects⁶² have adopted the standards, helping it evolve, reshape, and move forward in ways we couldn’t imagine. From the Department of Veterans’ Affairs⁶³ to the U.S. Department of Agriculture⁶⁴¹⁷, government teams are coming together to set a new bar for federal government websites. In this short time, we’ve begun seeing consistency and better user experiences across government websites. While the goal was to unify a government design language, the unique expression of it has been multifaceted and boundless. And just like building a house out of Lego blocks, expression within the meaningful constraints of a modular design system creates diverse products that are consistent, not uniform.

⁶⁵

By providing designers and developers with easy-to-use tools to deliver the highest quality government websites to the American people, the design system is helping create connections across disciplines and move government designers and developers forward — user research, human-centered design, visual design, front-end, and accessibility best practices all come together.

Lessons Learned: Drafting Your Own Standards Within Your Company Link

Whether you’re a small company or one of the largest governments in the world, you can create your own standards to solve your unique needs. Every pattern library should be different because it should serve the specific needs of the group creating them.

Talk to the people: You’ll need to find out where the problems are and whether or not these problems can be solved by design patterns. Find out if there are common needs across groups. What aspects of what you’re building are required for you to do your job?

Look for duplication of efforts: Where are you repeating yourselves? Where are you wasting time? What takes the longest or is the most challenging when building out websites? Where does friction arise?

Know your values: What your design system will end up looking like will also depend on what’s important to you. What are your values? What principles can guide how you build things?

Empower your team: You need a dedicated group charged with working on this and support from leaders to give you the air cover to do this work. It should be as important as any other project. You’ll need a multidisciplinary team with expertise from user experience research and design, visual design, and front-end development. You’ll need someone to fulfill the role of project manager and product owner to guide the project forward toward the right goals.

Start small and iterate: Figure out what your core needs are, build those out, test them, and listen to what people are asking for. That’s how you’ll find out what is missing. Starting with a limited set of components will save time and give you real answers right away when you start putting it out in the world and in people’s hands.

Don’t work in a vacuum: You’ll need to build consensus, understand what people need, and learn how they build websites, so find people that will use the system. Let that guide your decisions. While you may be more isolated getting the initial system setup, get it out there so you can begin testing and learning. As you build out products with your system and test them with real users, you’ll have the information you need to keep making improvements.

Reuse and specialize: It’s great to see how others have solved problems, and reuse when you can, but know that their solutions are solving their problems. Your problems may need a unique approach. Don’t fall into the trap of “this is what a pattern library should look like” just because someone else is doing it that way.

Promote your system: Get people excited about what you’re doing by talking about the value they’ll get for free by using it: consistent, beautiful, user friendly design with accessible interfaces that will save them time and money.

Be flexible: People don’t like things that are forced on them. Give them opportunities to learn about it and ask questions. Give them permission to make it their own.

Conclusion Link

When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team. These building blocks can be stacked in many ways to support a multitude of needs and use cases. By building flexibility into the system, users can easily adapt the patterns and designs to support the diverse scope and needs of digital services. Signaling that things can be customized invites people to participate in the system and make it their own. Only when people have a stake in the system will they feel invested to use it and contribute back, making it more robust, versatile, and able to stand the test of time.

It takes a lot of blocks and a lot of time to build these kinds of large design systems, and it’s important to keep people like Joanne in mind. The people on the other side who are scrolling through your designs, clicking your buttons, and filling out your forms so they can access the critical services they need. A solid, usable design system can make all the difference to people like Joanne.

Resources Link

• Conducting An Interface Inventory⁶⁷
• KJ Method⁶⁸ (may be used to help team members identify common patterns)
• The Language Of Modular Design⁶⁹
• From Pages to Patterns⁷⁰
• The Component Cut-Up Workshop⁷¹
• Style Guides⁷²

(vf, ah, il)

Footnotes Link

1. 1 https://18f.gsa.gov/2017/10/03/building-a-large-scale-design-system/
2. 2 https://www.smashingmagazine.com/tag/design-systems/
3. 3 https://www.smashingmagazine.com/tag/pattern-libraries/
4. 4 https://18f.gsa.gov/2017/01/04/tracking-the-us-governments-progress-on-moving-https/
5. 5 https://www.theacsi.org/news-and-resources/customer-satisfaction-reports/report-archive/acsi-federal-government-report-2014
6. 6 http://labs.usa.gov/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/09/gov-sites-preview-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/09/gov-sites-preview-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/09/joanne-navigates-website-preview-opt.png
10. 10 http://www.innovation.va.gov/hcd.asp
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/09/joanne-navigates-website-preview-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/09/team-dc-preview-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/09/team-dc-preview-opt.png
14. 14 https://www.ed.gov/
15. 15 https://www.uscis.gov/
16. 16 https://www.consumerfinance.gov/
17. 17 https://www.usda.gov/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/09/workshop-preview-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/09/joanne-preview-opt.png
20. 20 http://www.innovation.va.gov/hcd.asp
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/09/joanne-preview-opt.png
22. 22 https://analytics.usa.gov/
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/09/buttons-and-colors-preview-opt.jpg
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/09/buttons-and-colors-preview-opt.jpg
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/09/wireframes-preview-opt.jpg
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/09/wireframes-preview-opt.jpg
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/09/moodboard-preview-opt.png
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/09/moodboard-preview-opt.png
29. 29 https://methods.18f.gov/discover/feature-dot-voting/
30. 30 https://github.com/18F/web-design-standards/issues/80
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-pairings-preview-opt.jpg
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-pairings-preview-opt.jpg
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-merriweather-source-sans-preview-opt.jpg
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-merriweather-source-sans-preview-opt.jpg
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-performance-fast-preview-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-performance-fast-preview-opt.png
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/09/pairing-1-preview-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/09/pairing-1-preview-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-performance-medium-preview-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/09/font-performance-medium-preview-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/09/pairing-2-preview-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/09/pairing-2-preview-opt.png
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-primary-preview-opt.png
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-primary-preview-opt.png
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-secondary-preview-opt.png
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-secondary-preview-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-background-preview-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-background-preview-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-tertiary-preview-opt.png
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-tertiary-preview-opt.png
51. 51 https://www.section508.gov/
52. 52 https://www.w3.org/TR/WCAG20/
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-a11y-preview-opt.png
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/09/colors-a11y-preview-opt.png
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/09/typography-spacing-preview-opt.png
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/09/typography-spacing-preview-opt.png
57. 57 http://neat.bourbon.io/
58. 58 https://thoughtbot.com/
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/09/grid-preview-opt.png
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/09/grid-preview-opt.png
61. 61 https://standards.usa.gov/
62. 62 https://github.com/18F/web-design-standards/blob/develop/WHO_IS_USING_USWDS.md
63. 63 https://www.vets.gov/
64. 64 https://www.usda.gov/
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/09/uswds-websites-preview-opt.png
66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/09/uswds-websites-preview-opt.png
67. 67 http://bradfrost.com/blog/post/conducting-an-interface-inventory/
68. 68 https://methods.18f.gov/discover/kj-method/
69. 69 https://alistapart.com/article/language-of-modular-design
70. 70 https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
71. 71 https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517
72. 72 http://styleguides.io/

↑ Back to topTweet itShare on Facebook