← Back to work

Enterprise Design System

Building a Scalable Design System for Digital Banking

Established Dollar Bank's first enterprise-grade design system — Journal — defining token foundations, component architecture, and governance practices that unified design and engineering across the organization.

ClientDollar Bank
Role / ServicesDesign system lead, component architecture, governance
Category & YearDesign systems, banking platform UX / 2024 – ongoing
ToolsFigma, Figma API, Storybook, Blazor, Claude.ai
Building a Scalable Design System for Digital Banking cover screenshot

Problem Statement

The challenge

Dollar Bank's digital products were built by multiple teams using inconsistent UI patterns, duplicated components, and informal handoff processes. Every sprint produced slightly different buttons, forms, and layouts — slowing delivery and eroding trust in the product's consistency.

Methodology

How the work moved

01

Audited existing UI across online banking, mobile, and internal tools to identify redundancy and misalignment between design files and production code.

02

Built a token-first foundation covering color, spacing, typography, elevation, and motion — mapped directly to Blazor and Fluent UI engineering constraints so components could be implemented without reinterpretation.

03

Authored governance documentation, component contribution guides, and naming conventions — then ran cross-team workshops to drive adoption across product, design, and engineering.

Results and Impact

What changed

Reduced design redundancy by 30% within the first two quarters of adoption.

Cut development handoff time by 25% through shared token language and documented component behavior.

Scaled the system to cover account summary, loan servicing, account opening, and HELOC experiences — with ongoing expansion.

Next Case Study

Redesigning the Account Summary Experience for Digital Banking