The situation
A global FinTech SaaS product had grown to 300+ screens built by multiple teams over multiple years. The result was an interface with no shared design language — components built independently, patterns duplicated with slight variations, and an engineering team spending more than half its time reconciling inconsistencies rather than building features.
UI inconsistency debt is invisible until it's expensive. When every new feature requires a designer to choose between five slightly different button styles, and every component needs bespoke CSS, velocity drops to a fraction of what it should be.
The problem
- 300+ screens built across teams with no shared design system — zero consistency in components, spacing, typography, or interaction patterns
- Engineering spending 50%+ of time on UI rework and inconsistency reconciliation rather than product development
- No single source of truth for design decisions — multiple versions of the same component living in different parts of the codebase
- User experience fragmented — different parts of the product felt like different products
- Design-to-development handoff broken — no shared vocabulary between designers and engineers
What we built
A complete design system from scratch, then a systematic rebuild of all 300+ screens against it. Not a reskin — a structural redesign starting from tokens and working up to page-level patterns.
- Design token foundation — colour, typography, spacing, and elevation as a single source of truth
- Component library — every interactive element built once, documented, and applied consistently
- Pattern library — page-level layouts, data tables, forms, navigation, and dashboard structures
- 300+ screen redesign — every surface rebuilt against the new system
- Engineering handoff documentation — component specs and usage guidelines eliminating ambiguity
- Dark mode and accessibility compliance built into the token layer
The outcome
50%+ of engineering time recaptured — no longer spent on UI inconsistency reconciliation. All 300+ screens now consistent. New features can be built from existing components without bespoke CSS.
| Area | Before | After |
|---|---|---|
| Screens | 300+ inconsistent | 300+ systematically rebuilt |
| Design system | None | Full token-to-page system |
| Engineering time | 50%+ on UI rework | Recaptured for product work |
| Component reuse | Near zero | 100% — new features use existing components |
| Design handoff | Ambiguous | Component-spec documented |
| User experience | Fragmented | Coherent single product feel |
