Evolving a design system
With 24 million active users and more than 14,000 pages of content and tools, consumerfinance.gov is a large and mission-critical platform for American consumers and the financial industry.
To keep the site usable, accessible, and trustworthy, a robust design system is indispensable. As a lead designer for the CFPB’s design system, I collaborate with a cross-functional team to maintain and evolve the system and its supporting resources.
About
Team
Roles assigned to design system work fluctuate but often include the following:
UX/UI designer (me)
User researcher (sometimes me)
Product manager
Front end developer
My responsibilities
Component design
User research
Content strategy + writing
Product strategy
Workshop facilitation
And more—I flex as needed!
Tool & template creation
Documentation site
I helped build the CFPB’s design system documentation site, which includes component, pattern, and style guidance with corresponding code snippets. Previously, design and code documentation lived in separate locations, leading to gaps in understanding and collaboration between designers and developers. Consolidating everything into a unified documentation site has strengthened collaboration and improved component accuracy.
CFPB design system documentation site I helped create and maintain
78
pages of components, patterns, and other guidance on in our design system documentation site
I designed the documentation site’s page layout and content structure to enable different roles to skim and easily find information relevant to them. This page template is used across the site, ensuring consistency and clarity from page to page. And to make the site easy to update, we hooked it up to a CMS (Decap).
Page structure I sketched
Final page structure I designed
In addition to helping build the site, I regularly audit, write, and edit its content. I also conceptualize and create new documentation, such as our Photography and Print styles guidelines.
Photography guidelines page I conceptualized and wrote
CMS modules
The design system powers the CFPB’s website, consumerfinance.gov, a robust site with more than 14,000 pages of financial guidance, regulations, and interactive tools. To make pages easy to create and maintain, we build our design system’s components, patterns, and styles into the site’s CMS (Wagtail).
As a recent example: I designed an interactive data visualization module in our CMS so that page creators can easily design on-brand, accessible data visualizations.
More than
14,000
web pages rely on the CFPB design system
Data visualization module I designed in the CFPB’s site CMS
Component testing & iteration
To ensure design system components and patterns are usable and accessible, we conducted ongoing usability testing. Recently, I led the redesign and usability testing of a key navigation pattern, achieving 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.
User research & governance
I help ensure the design system meets the needs of those who use it by gathering feedback to surface pain points, identify opportunities, and inform the design system roadmap.
Findings from interviews I conducted with design system users
I also help ensure the design system has a seamless contribution process. Partnering with my team’s product manager, I developed a design system governance policy. After conducting a competitive analysis of design system contribution models and interviewing teams at other federal agencies, we drafted and socialized our own model.
Contribution model I created in partnership with the product manager
Product strategy
Creating a vision
To ensure the design system delivers value, I guided the team through a visioning exercise. We answered key questions to arrive at a 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.
Visioning team activity I led to create a design system vision statement
Prioritizing work
To determine what work the team should take on and when, I partner with the product manger to groom the design system backlog and lead prioritization activities for certain design system initiatives. For a recent design system typeface project, I created a backlog of refinements and facilitated an “impact vs. effort” team activity.
Impact vs. effort team activity I led to prioritize work during a design system typography project
Measuring success
To ensure the design system’s success, I developed a metrics monitoring plan. I facilitated a team activity to define the system’s goals, envision what success might look like, and identify meaningful ways to measure it. Using the insights from that activity, I created a plan that outlines our key focus areas—adoption, quality, contribution, experience, and maturity—and the metrics we’ll use to track our impact in each.
Metrics team activity I led to create a design system monitoring plan
