Evolving a design system
With more than 24 million active users and 14,000+ pages of content and tools, consumerfinance.gov is an important platform for American consumers and the financial industry.
Maintaining a consistent and accessible experience at this scale depends on a mature design system. As a lead designer on the CFPB's design system team, I strengthen and evolve the design system through component design, documentation, governance, research, product strategy, and more. I partner closely with developers and product managers to improve the system itself as well as the experience of the teams who use it.
About the work
Challenge
Shepherd a design system that teams actively use, trust, and contribute to. Build a living, evolving system through strong governance, research-validated components, and better design tools.
Team
Roles assigned to design system work fluctuate but often include the following:
UX/UI designer (me)
User researcher (sometimes me)
Product manager
Developers
My responsibilities
Component design
User research
Content strategy + writing
Product strategy
Workshop facilitation
Building tools and resources
Design system documentation
I led the design of the CFPB's design system documentation site, bringing design guidance, implementation details, and code examples together in one place. Previously, design and development documentation lived in separate places, which created gaps in cross-functional understanding and collaboration. Consolidating them into a single source of truth improved collaboration and increased the accuracy and consistency of our components.
CFPB design system documentation site I designed and help maintain
78
pages of components, patterns, and other guidance in the CFPB design system documentation site
I designed the site's page structure so that roles such as designers and developers could quickly find the guidance they need. The reusable page template now provides a consistent experience across the documentation site, and its integration with the site’s CMS makes ongoing maintenance straightforward.
Page structure I sketched
Final page structure I designed
Beyond building the site, I regularly audit and edit documentation and have created new guidance including our Photography and Print styles guidelines.
Photography guidelines page I conceptualized and wrote
Figma library
I help maintain the design system's Figma library, which provides reusable components, styles, and variables that product teams use to rapidly prototype and design consistent, accessible experiences.
Auto layout pattern I created in the design system Figma library
33,712
component insertions from the design system Figma library into product Figma files in 2025
CMS modules
The design system is integrated into the CFPB site’s CMS, allowing teams to build pages using standardized, components instead of recreating UI from scratch.
For example, I designed an interactive data visualization module that enables page editors to create on-brand, accessible charts without requiring custom design or development work.
More than
14,000
web pages rely on the CFPB design system
Data visualization module I designed in the CFPB’s site CMS
Improving components through research
I contribute to ongoing usability testing to ensure our components and patterns are intuitive and accessible. Most recently, I led the redesign and usability testing of a critical mobile navigation pattern, resulting in a 70% improvement in usability. See my Improving mobile navigation case study.
Improving mobile navigation case study
14
design system components and patterns were tested and received a 95% or higher task success rate in our most-recent usability test.
Research, governance, and adoption
A successful design system depends as much on its users as its components. I regularly gather feedback from product teams to uncover pain points, identify opportunities, and shape the design system roadmap.
Findings from interviews I conducted with design system users
I also co-developed a design system governance model. Partnering with our product manager, I researched contribution models across federal agencies and wrote a governance process that makes contributing to the design system clear.
Governance model I co-developed
Product strategy
Defining a vision
To articulate the design system’s purpose, I facilitated a visioning workshop that resulted in a shared vision statement:
The design system enables the CFPB to deliver trustworthy, accessible, performant, and visually consistent products to the American people. Built into CFPB's templates and platforms, the design system makes it possible to deliver quality products with efficiency. It has a clear review and maintenance process, and contributors are able to add to it with ease. The design system is a living product that receives strategic care and evolves over time.
Activity I led to define a design system vision statement
Prioritizing work
I partner with our product manager to maintain the design system backlog and prioritize work. For a recent typography project, I created a backlog of improvements and led an impact-versus-effort workshop to help the team focus on the highest-value work.
Activity I led to prioritize work during a design system typography project
Measuring success
To better understand the design system's impact, I developed a monitoring plan. After facilitating a team workshop to define what success for the design system looks like, I translated insights into a monitoring plan focused on adoption, quality, contribution, user experience, and design system maturity.
Activity I led to create a design system monitoring plan
