Evolving a design system
The Consumer Financial Protection Bureau (CFPB) is a leader in government design systems.
I am part of a team that shepherds and evolves the Design System (DS) by continually improving the contribution process, gathering research insights to improve DS components, and baking the DS into templates and custom tools.
My role
My work on the DS is ongoing, and I flex into several roles.
Research: I’ve facilitated discovery activities, moderated interviews, synthesized research, created research artifacts such as personas, performed competitor analyses, and more.
Design: I’ve designed custom tools and iterated DS components—always ensuring WCAG compliance and working closely with a developer to translate designs into code.
Content strategy: I’ve written component documentation, design guidelines, and DS process documents.
Connect with people who reference and contribute
Although the DS had existed for years, the CFPB lacked insight into how people were using it.
I conducted user interviews that revealed several pain points—from confusion caused by inconsistencies in the documentation to an unclear contribution model. The interviews also revealed that the DS had more distinct user types than we had realized. To surface needs and clarify DS use cases, I created personas for the team to use during backlog grooming and prioritization.
Research also clarified that the DS lacked a vision. Articulating what the DS 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 DS vision.
I created personas of DS user types to surface needs.
Create a contribution process
The DS lacked a clear contribution process, with people not knowing what they could contribute or what review was needed.
Our team’s product owner and I conducted a competitor analysis and interviewed other federal government agencies to learn how they handle governance. This research helped us draft and socialize our own governance policy, which has increased awareness across DS contributors.
Collaborating with our team’s product owner, I wrote and socialized a DS governance policy.
Build tools to increase efficiency
The DS expands beyond its documentation site into the spaces where people do their work. Our team spots workflow inefficiencies and creates resources and tools to help teams.
Custom search tool
We built a tool that generates a snapshot of CFPB’s site and enables searching for elements such as DS components. The tool has drastically increased team efficiency, eliminating the need for tasks such as manual audits.
Example use case
Let’s say research reveals that our DS button component has usability issues. A designer could use the tool to search for the button and find what pages it appears on across the CFPB’s site. This would help the designer understand the button’s use cases before iterating its design.
I designed our custom search tool and assisted with usability testing.
Figma library
To enable rapid prototyping and testing, we built the DS into Figma. You can use it now, too! 😀 CFPB Figma community file
I contribute to our Figma library.
Interactive data visualizations
The CFPB makes a lot of data visualizations. Previously, these could only be created in a program like Excel and exported as a flat image to be placed in a web page.
To improve accessibility, we deployed a charting 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 CMS data visualization feature, ensuring accessible visualization outputs on the front end and a usable CMS experience on the back end.
Monitor and improve components
To ensure the usability of our 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.
Evolve design guidance
Creating consistent designs extends beyond reusable components and into a design strategy.
I’ve crafted several design guidelines, such as Photography and Print CSS. And I’ve edited several others, such as Data visualization and Community-centered design practices.
I researched, wrote, and published our photography guidelines, articulating aspects such as tone and accessibility considerations.
