Consumer Studio Design System

The Problem

Consumer Studio had no single source of truth. Design files were scattered across multiple designers' computers in Adobe XD, with no consistency in how components were built or documented.
‍
Some elements were standardized. Most were not. Every designer had their own version of "the button" or "the input field," and developers were left interpreting which version was correct.

The Stakes:

Design-to-dev handoffs were taking hours of back-and forth communication.
Sprint meetings were consumed by debates about inconsistent specs.
Teams were wasting time searching for files instead of building features
Visual inconsistencies were creating defects in production.
Consumer Studio needed to scale across multiple large financial institutions, but the lack of a unified system made customization nearly impossible and inconsistent.

The Challenge

This wasn't just "build some components in Figma." We had to solve several problems simultaneously.

Constraints:

Multi-brand support - Consumer Studio served multiple large financial institutions, each requiring custom branding while maintaining functional consistency.
Migration from Adobe XD - Teams had already invested time in XD files and resisted recreating work in Figma.
Reverse engineering existing components - Had to audit and rebuild components that were already in production without breaking existing features.
Building while shipping - Couldn't pause feature development to build the system, so we had to do both in parallel.
Adoption resistance - Teams saw this as "more work" upfront, even though it would save time long-term.

The Approach

I approached this in three phases:

Phase 1: Audit & Foundation‍

Audited all existing Adobe XD files to identify which components were most-used and where inconsistencies existed
Established atomic design principles (atoms → molecules → organisms) as the organizing philosophy
Built foundational design tokens (colors, typography, spacing) that could be customized per financial institution

Phase 2: Build & Document

Built basic components first (buttons, inputs, icons) so they could be reused to build more complex components
Created roughly 2,300 components covering all Consumer Studio patterns
Documented each component with usage guidelines, specs, and accessibility requirements
Used Figma variables to enable rebrandability across multiple banking clients

Phase 3: Rollout & Adoption

Rolled out the system to all teams at once (mandated adoption)
Ran training sessions on atomic design philosophy and how to use the library
Started building new features with the design system immediately
Reverse-engineered existing features to use new components, ensuring consistency across the product

The Solution:

I designed a comprehensive design system with three core layers:

1. Component Library (2,300+ Components)

Built a library covering every Consumer Studio pattern - from basic atoms (buttons, inputs) to complex organisms (data tables, dashboards, workflows).

Each component was documented with all interaction states, usage guidelines,and developer specs.

Key Decision: Started with foundational components (buttons, inputs, typography) before building complex patterns. This allowed us to compose larger components from proven building blocks, ensuring consistency across the entire system.

2. Design Tokens & Rebrandability

Established a token system for colors, typography, and spacing that could be customized per banking client. This allowed Consumer Studio to serve multiple large financial institutions with different brand requirements without rebuilding components.

‍Key Decision: Used Figma variables to make the system rebrandable at scale. Banking clients could swap color palettes and typography while maintaining functional consistency across all components.

3. Documentation & Guidelines

Documented every component with usage guidelines, interaction states, accessibility requirements, and developer handoff specs. This eliminated the hours of back-and-forth communication that previously plagued design-to-dev handoffs.

‍Key Decision: Documented components for both designers AND developers. Each component included Figma specs (spacing, typography, colors) plus implementation notes (HTML structure, CSS classes, accessibility attributes) to ensure accurate translation from design to code.

The Outcome

What Shipped:

2,300+ component design system
Full Figma library with atomic design structure
Design token system for multi-brand support
Comprehensive documentation for design and dev teams
100% team adoption across all Consumer Studio product teams

Impact:

27% reduction in design defects - Consistent components eliminated visual bugs caused by inconsistent implementations
$200k annual savings - Reduced rework, faster handoffs, and fewer production defects
30% faster design-to-dev handoff - Documentation eliminated back-and-forth questions
100% component adoption - All new features now use design system components
Scaled to multiple financial institutions - System supports custom branding for each banking client without rebuilding components

View the complete design system in Figma

Reflection

The biggest challenge wasn't building the components - it was getting teams to adopt them. Moving from Adobe XD to Figma felt like "extra work" upfront, even though it would save time long-term. I learned that mandating adoption without explaining the "why" creates resistance.

If I could do it again, I'd involve developers earlier in the component build process. We built the Figma library first, then handed specs to dev, which created some misalignment on technical feasibility (especially around complex data table states). Co-designing with dev from day one would have caught these issues before they became rework.

The system's success ultimately came down to documentation. Teams didn't adopt the system because it was beautiful - they adopted it because it made their jobs easier. Clear usage guidelines and detailed specs turned the design system from "nice to have" into "can't work without it."