Design System Case Study

Building a Scalable Design System from Scratch for a US based 150‑Person Financial SaaS Company

1. Project Overview

Company size: ~150 employees | Design team: 5 UX Designers + 1 UX Copywriter + me (design system designer Lead)
Duration: 8 months (end‑to‑end)
Primary tool: Figma Enterprise (Org plan)
Goal: Establish a robust, token‑based design system to drive consistency, speed, and quality across all product teams.

2. Core Problem

  • No existing design system - designers frequently copied UI from old files.
  • there was just a basic few elements with outdated UI style
  • Inconsistent typography, color, and spacing across features.
  • High rework cost: every visual change required manual updates in dozens of frames.
  • Engineering received multiple, slightly different specs → UI drift in production.

Previous UI style

Previous UI kit without Figma components
Previous UI screenshot

3. My Role & Responsibilities

  • Product Owner of the Design System - owned vision, roadmap, and stakeholder alignment.
  • Defined visual language, variables initially - later token structure, and governance process.
  • Led weekly design‑system stand‑ups, coached five designers, and partnered with front‑end engineers for implementation parity.
  • Authored initial internal documentation, do/don’t guidelines, and onboarding material.

4. Approach & Methodology

  1. Audit & Gap Analysis – Reviewed 120+ screens to catalogue visual debt.
  2. Define Style Foundations – Established a core palette, new primary color (blue), typography scale, elevation rules.
  3. Variables Architecture – Created color, spacing, radius, tokens in Figma Variables.
  4. Component Library – Built  atomic components in loose format
  5. Documentation & Adoption – Internal documentation, in 2025 started implementing specialized app Supernova
  6. Feedback & Iteration – Monthly audits, Slack channel for Q&A.

5. Style Foundations

‍

Palette

‍

‍

6. Key Components (30 Highlights)

Components

‍

Buttons
Cards
List
Empty State
Header
Secondary Menu
Modal
Stepper
Tabs
Snackbar
Alert
Breadcrumbs
Toggle
Table 1
Table 2

‍

‍Pages Examples

Dashboard

‍

Events
Events
Events
Add Supporter

8. Interaction Patterns

  • Form validation (inline + toast)
  • Progressive disclosure (steppers, accordions)
  • Table interactions (filters, columns)
  • Responsive guidelines for breakpoints 480 px, 768 px, 1200 px.

9. Documentation & Governance

  • Internal documentation hub with do/don’t examples and code snippets.
  • Initially I created all the basic around 40 components
  • Later contribution model: designers submit PR via Slack or design the intitial component version, reviewed weekly.
  • Slack  channel for support & Q&A.
  • Quarterly audits = prune, refactor, deprecate outdated patterns.
Do Guideline
Don't Guideline

10. Results & Impact

  • Consistency: around 90 % reduction in UI discrepancies across 3 products.
  • Efficiency: New feature mock‑up time cut by around 40 %.
  • Developer Happiness: Figma‑to‑code parity by around 30 %, fewer rework tickets and less QA work.
  • Team Alignment: 5 UX UI designers now share a single source‑of‑truth.

11. Reflections & Learnings

  • Early token architecture prevents later visual debt.
  • Documentation upkeep is as important as component creation.
  • Regular feedback loops keep adoption high and system relevant.
  • Multidisciplinary buy‑in (PM + Eng) is key for lasting success.

‍