Evolving a design system

The Consumer Financial Protection Bureau (CFPB) has been a leader in government design systems for more than a decade. My team shepherds and evolves the CFPB Design System (CFPB DS) by iterating components, improving the contribution process, baking the system into custom tools and templates, and roadmapping the system’s future.

My contributions

UI/UX design

Design custom tools and components—always ensuring WCAG compliance and working closely with developers to translate designs into code.

User research

Facilitate discovery activities, moderate interviews, synthesize research, create research artifacts such as personas, perform competitive analyses, and more.

Writing

Helped determine the CFPB DS’s templated content structure. Write component documentation, design guidelines, and process documents.

Connect with people who reference and contribute

Although the CFPB DS had existed for years, we lacked insight into how people were using it. I conducted user interviews that revealed several pain points and also that the system had more distinct user types than we had realized. To surface needs and clarify CFPB DS use cases, I created personas.

Research also clarified that the system lacked a vision. Articulating what the system is and what it is not has helped us decide how to maintain and evolve it.

I conducted and synthesized research to understand user needs.

I led the team in activities to capture a CFPB DS vision.

I created personas of user types to surface needs.

Create a contribution process

The CFPB DS lacked a clear contribution process. My team’s product owner and I conducted a competitive analysis, interviewed other federal government agencies, and created a governance policy, which has increased awareness across CFPB DS contributors.

Collaborating with my team’s product owner, I wrote and socialized a governance policy.

Build tools to increase efficiency

The CFPB DS expands beyond its documentation site into the spaces where people do their work. My team spots workflow inefficiencies and creates resources and tools to help teams.

1.

Custom search tool

We built a tool that generates a snapshot of CFPB’s site and enables search of elements such as CFPB DS components. The tool has drastically increased team efficiency, eliminating the need for tasks such as manual audits.

Sample use case: Let’s say research reveals that our button component has usability issues. A designer could use the tool to search for the button component and find pages it appears on across the CFPB’s site. This would help the designer better understand the button’s use cases before iterating its design.

I designed a custom search tool—creating an interactive prototype in Figma, moderating usability testing, and pairing with a dev to translate the design into code.

2.

Figma library

To enable rapid prototyping and testing, we built the CFPB DS into Figma. You can use it now, too! 😀 CFPB Figma community file

I contributed auto layout patterns to our Figma library.

3.

Interactive data visualizations

Previously, data visualizations at the CFPB could only be created in a program like Excel and exported as a flat image to be placed in a web page. We deployed a chart feature in our site’s content management system (CMS). We customized it, adding CFPB-specific text fields and integrating accessible, on-brand colors and patterns.

I oversaw the design of our data visualization feature in our CMS. On the front end, I designed the chart layout and determined color and pattern palettes. On the back end, I ensured a usable CMS experience for chart creators.

Monitor and improve components

To ensure the usability of the CFPB DS components, we maintain a “patterns matrix” to track known issues, research findings, and more. The patterns matrix helps inform which components we prioritize for iteration and testing.

See my Improving mobile navigation case study as an example of a component improvement.

I collaborate with my team to maintain a patterns matrix to track component use and known issues. We reference the patterns matrix to determine components to iterate and usability test.

Evolve design guidance

Creating consistent designs extends beyond reusable components and into strategy. I’ve contributed to several guidelines in the CFPB DS, such as Photography, Print styles, and Data visualization.

I researched, wrote, and published our photography guidelines, articulating aspects such as tone and accessibility considerations.

Move toward the USWDS

The CFPB DS pre-dates the U.S. Web Design System (USWDS). In fact, the CFPB DS helped inform the creation of the USWDS. Now, we are continually strategizing ways to better align with the USWDS.

  • We assessed CFPB’s visual brand to determine which aspects should remain versus which could benefit from USWDS adoption. Since the assessment, we’ve switched from a costly proprietary typeface to Source Sans 3, an open-source typeface included in the USWDS.

  • We audited CFPB DS and USWDS components and interaction patterns to identify overlaps and gaps.

  • We consulted the USWDS team to align future plans, deciding to build CFPB DS web components to mirror the USWDS development roadmap.

  • We researched and presented to our leadership the strengths and trade-offs of switching to the USWDS and what resourcing would be needed to make the switch.

View more work