Building a Scalable Design System for Enterprise SaaS

Role: Lead UX/UI Designer

Timeframe: 12+ months

Collaborators: Frontend Developers, QA, Product Manager, Dev Lead, VP of Tech, VP of Product

Focus: Visual consistency, scalability, accessibility, dev collaboration

Tools: Figma, Miro, GitHub

Summary

I designed and implemented Capsifi's first scalable, token-based design system from the ground up. My goal was to improve UI consistency, accelerate development, and support long-term product scalability. The system was fully integrated into Figma and aligned with engineering workflows to deliver high-quality, accessible components for enterprise users.

The Problem

• No existing design system or shared design language

• Inconsistent component styling across 200+ screens

• High design and development rework

• Lack of accessibility compliance (WCAG violations)

• Inefficiencies in developer handoff and QA testing

Before

After

My Role

As the sole UX/UI designer, I:

• Conducted a full UI audit

• Defined token structure and naming conventions

• Built a foundational design system in Figma

• Partnered with developers for token implementation

• Documented usage rules and interaction states

• Ensured WCAG 2.1 AA accessibility compliance

The Process

1. Audit & Insights

• Reviewed 200+ product screens

• Identified inconsistent UI patterns and visual debt

• Documented missing states, spacing, and contrast issues

2. Foundations Setup

• Created design tokens for colour, spacing, and  typography

• Defined semantic colour roles (e.g., Primary, Error, Info)

• Established spacing scale and grid system

3. Component Library

• Designed scalable components: buttons, tables, overlays, inputs, tags

• Documented all states (default, hover, active, disabled, error)

• Developed a flexible overlay system for flyouts and editing interactions

4. Accessibility Integration

• Applied WCAG AA colour contrast rules

• Designed clear focus states for keyboard navigation

• Worked with the dev team to align on ARIA roles and keyboard behaviour

5. Dev Collaboration

• Aligned Figma tokens with SCSS implementation

• Partnered on component dev cycle (design > build > QA)

• Created a status matrix (e.g., In Design, In Dev, Live)

Business Impact

Additional impact:

• Reduction in UI-related bugs by 40%

• A decrease in development time for new features by 80%

• Improvement in user satisfaction scores by 95%

What I Learned

• How to drive the adoption of a design system from scratch

• The importance of aligning with frontend naming and constraints

• Balancing long-term vision with short-term developer feasibility

• Creating patterns that scale across complex enterprise workflows

Examples

Next Project