Overview

Millions of people interact with government websites and digital services each year. Digital teams across the federal space are committed to delivering the best experience possible for their large, diverse audiences. Still, many teams can lack easy access to practical resources that support this goal. To help address this need, the U.S. Web Design System (USWDS) is excited to provide a new library of guidance and examples focused on key digital interactions — what we call design patterns — that foster effective, inclusive, and equitable digital experiences.

The Federal Government must deliver a simple, seamless, and secure customer experience, on par with or more effective than leading consumer experiences. Irrespective of people’s age, location, digital savvy, disability, education, or English proficiency, the American people deserve a Government that understands who they are, what they need, and how best to deliver for them. Every interaction between the Government and the public is an opportunity to deliver the services people expect and deserve. — President’s Management Agenda Priority 2 Executive Order

USWDS's Inclusive Design Patterns project was created in support of the Biden-Harris Administration’s President’s Management Agenda Priority 2 Executive Order (Delivering Excellent, Equitable, and Secure Federal Services), Executive Order 13166 (Improving Access to Services for Persons with Limited English Proficiency), Executive Order 14058 (Transforming Federal Customer Experience and Service Delivery to Rebuild Trust in Government), and Executive Order 13985 (Advancing Racial Equity and Underserved Communities through the Federal Government) as well as Section 508 and the 21st Century Integrated Digital Experience Act.

The pattern guidance we're publishing is designed to help remove barriers to online transactions and interactions, helping the public access government services and programs. As we spoke with digital teams across the federal space we learned that regardless of program or mission, teams are actively wrestling with these issues: how to create effective, inclusive, and equitable digital experiences. Some teams were further along. We were fortunate to learn from these colleagues and to have their perspectives inform our work. Other teams were in the early stages and were looking for additional guidance from a resource like USWDS.

As digital teams actively seek to understand and address usability, accessibility, and inclusion in their digital services, they shouldn't have to go it alone. As an important shared resource used widely across federal government websites, USWDS is in a unique position to scale these types of solutions. The design system team is working to amplify and extend the excellent work already happening, identify gaps in our collective knowledge, and address these opportunities for improvement with new USWDS guidance, code, and design patterns. During this project we were also able to include users of assistive technology in our quality assurance testing process to identify and resolve potential barriers.

We are grateful to the people who generously shared both their professional expertise and their lived experience. Their perspectives deeply informed our work, and their efforts in this space are a positive step toward building diverse and inclusive delivery teams — and equitable and inclusive digital products.

What are patterns, anyway?

Patterns are guidance and best practices to design effective user experiences. If components are the ingredients with which you create experiences, patterns are the recipes. The recipe suggests how best to combine the ingredients to create the optimal experience for everyone, while leaving room for flexibility and customization to specific audience needs.

With help from digital leaders across the federal space, we’ve developed patterns that provide guidance to create effective and inclusive experiences. We have considered each interaction from the perspective of Diversity, Equity, Inclusion, and Accessibility — or DEIA. A caveat, though: The DEIA space is evolving very quickly. Language and norms are changing rapidly, and we expect that the patterns we develop today will continue to evolve to reflect the best practices in equitable, inclusive experiences1.

The word "pattern"

The word Pattern — in this usage — was coined by the architect Christopher Alexander in the 1970s to describe patterns of behavior and approach: "a problem which occurs over and over again in our environment, and then [...] the core of the solution to that problem [described] in such a way that you can use this solution a million times over, without ever doing it the same way twice." For instance, what are the kinds of things that people do again and again in their homes (or expect again and again from their homes) and how might homes be built to support these needs? For Alexander, these needs go beyond the prosaic needs of shelter and sanitation to include psychological, physiological, and emotional needs. What can a home do to make you feel at home?

In an important way, Alexander reintroduced human-centered design into the design practice of architecture, and the concepts he and his peers developed are just as relevant and practical to any designed experience.2

Digital interactions through the lens of DEIA

Designers all over the world are applying inclusive design principles to their work, creating more equitable experiences that work for everyone. Every day, practitioners are learning more about how inclusivity and equity need to be reflected in their work. Our team worked hard to put diversity, equity, and inclusivity at the center of what we did every day. One of our interviewees said it well:

quote Consider the story that hasn’t been told.
— DEIA and design expert

The North Star

The goal in applying DEIA principles and practices to interaction design is to ensure digital experiences that meet people where they are, providing welcoming, usable, culturally responsive, and thoughtfully crafted experiences that acknowledge the full range of human differences. This is as much a process as a practice, as the goal will likely always be a little out of reach. However, it is important that we always keep our North Star in view:

Diversity

Diversity in design is about making sure a broad variety of viewpoints, needs, and perspectives are represented.

Equity

Equity in design addresses the unique barriers people face, creating fairer outcomes.

Inclusivity

Inclusivity in design cultivates a sense of belonging and reduces experience disparities.

Accessibility

Accessibility in design ensures that all people can equally access, use, and understand digital experiences.

A commitment to the practice of inclusivity

While we may never reach the aspirational goal of a totally inclusive experience, the process of attempting to fulfill the aspiration leads to better experiences overall. Developing patterns through the lens of inclusivity requires us to interrogate ourselves and our work at each step of the design process.

Part of that process includes thinking through practical applications of what it means to apply DEIA principles, including:

Diversity

Ensuring a wide array of people, perspectives, and needs are represented

Consider

  • Have we considered all possible audiences?
  • Who does it leave out?
  • Is success defined for a broad range of users?
  • Are users, especially those historically excluded, effectively represented?

Example
Images and copy show a full diversity of identity in American society, such as ages, ethnicities, genders, socio-economic groups, and more.

Equity

Addressing the unique barriers people face, creating fairer outcomes

Consider

  • Who may bear disproportionate opportunity costs or burdens?
  • Who may exert disproportionately more effort or resources to participate?
  • Who benefits most? Who is most vulnerable to harm?

Example
Digital experiences support the unhoused, including the permanently unhoused, and those temporarily displaced due to disasters.

Inclusivity

Cultivating a sense of belonging and ensuring an equal experience

Consider

  • Can a person see themselves in the design?
  • Are we creating a sense of belonging?
  • Are diverse voices included in the feedback?
  • Are the experiences of people most impacted meaningfully reflected?
  • Who is being excluded or disempowered?

Example
Historically marginalized groups are included on design teams and people from these groups provide feedback throughout the design cycle.

Accessibility

Supporting the ability of all people to equally access, understand and effectively engage in digital experiences

Consider

  • Can all users, including those using assistive technologies, effectively complete the interactions?
  • Is the digital experience not only conformant to requirements, but equally usable?
  • Are we excluding anyone based on the technology they use?

Example
Whether a user is accessing services using a sip-and-puff or a screen reader, or on a pre-paid mobile phone, the user can successfully complete the necessary tasks with equal effort.

Developing patterns through the lens of inclusivity also means that we need the humility to acknowledge that we don’t know everything today. As we grow and learn the patterns will need to change. Today’s solution is not tomorrow’s.

Research

In March 2022, the USWDS team brought together researchers, designers, and engineers to conduct research into inclusive design patterns.

Our primary focus was to learn:

How teams are applying the lens of DEIA to their design work, and which patterns they’ve revised to be more equitable and inclusive.

What challenges agencies are facing with trying to adopt more inclusive design patterns.

Which specific interactions are most challenging and could use attention from USWDS.

Where we can begin our work from existing design patterns.

More than 30 individuals across 20 teams shared their experiences, work, and perspectives to inform the design3. We interviewed individuals in a variety of roles and across many different agencies, focusing on High Impact Service Providers (HISPs). We also conducted research outside of government, particularly in the healthcare, technology, and higher education spaces to understand best practices (and notable failures) in order to incorporate these learnings into our patterns.

The research resulted in the release of 3 pattern families consisting of 17 individual patterns, along with new and updated components and page templates.

Our objective was to:

Benchmark patterns by identifying which organizations had patterns and how they approached them.

Analyze thought leadership around patterns, their place in the design system, and the content that supports each pattern.

Take a deep dive into the topics of inclusivity and equity, especially as these topics relate to digital experiences.

Understand the best practices specific to each pattern, along with any federal requirements that need to guide each recommendation.

Along the way we solicited feedback from a wide range of experts in the federal space, including digital teams, policymakers, and subject matter experts. Their input was integral to our work.

Citations

  1. Embedding equity in civic design to transform customer experience. (July 13, 2022) Retrieved on August 19, 2022, from https://digital.gov/resources/embedding-equity-in-civic-design-to-transform-customer-experience/ 

  2. A pattern language: Towns, buildings, construction. (1977) Retrieved on August 25, 2022, from https://www.amazon.com/Pattern-Language-Buildings-Construction-Environmental/dp/0195019199 

  3. VA.gov design system patterns. (May 26, 2022) Retrieved on August 19, 2022, from https://design.va.gov/patterns/ 

Disclaimer: Links to nongovernment sources are made for educational or source citation purposes only, and do not represent an endorsement of the organizations by the General Services Administration. The General Services Administration does not assume any responsibility for the content, operation, or policies of other entities’ websites.