Case Study

Building a Scalable Design System for a Growing Product Organization

I helped build and scale multiple design systems—leading some from inception and contributing to others—while working closely with design and engineering to establish shared patterns. We set up solid foundations, built reusable components, and wrote clear documentation. This helped us reduce UI inconsistencies, work faster, and establish a common product language as the company grew.

I improved the design system by creating reusable templates from core components. This sped up the design process and helped keep the UI more consistent and high-quality.

Role & Context

Role: Sn. Product Designer
Audited existing UI and components

Defined design principles and system foundations
Designed and documented reusable components
Partnered closely with engineers on implementation
Evangelized adoption across teams

Problem

Here’s what things looked like before we had the design system:

❌ UI patterns were inconsistent across different features and platforms

❌ Designers had to rebuild components from scratch each time

❌ Engineers built similar components in different ways

❌ New designers and developers took longer to get started

❌ Teams kept debating the same design decisions instead of reusing solutions

As highlighted by Mind the Product, lack of a design system doesn’t just affect aesthetics—it directly impacts product quality, speed, and trust.

Goals

Establish a single source of truth for UI components and patterns.
Enhance the efficiency of the design-to-development handoff.
Support scalable product development across multiple teams.
Foster a shared language among design, product, and engineering teams.

Process

UI & Workflow Audit

I completed a cross-product audit to identify the following issues:

Duplicate components that showed visual or behavioral inconsistencies
Inconsistent use of spacing, typography, and color
Common design patterns are implemented inconsistently across the team.

Insight:

The primary challenge was not creativity, but a lack of alignment.

Insight:

The primary challenge was not creativity, but a lack of alignment.

Insight:

The primary challenge was not creativity, but a lack of alignment.

Before → After

Foundations First

Color system with semantic naming

Typography scale tied to use cases
Spacing and layout rules
Accessibility standards baked in

These decisions reduced subjective debates and anchored future components.

3. Component System

I designed a flexible, token-based component library:

Buttons, inputs, modals, navigation
Variants and states are clearly defined
Responsive and accessible by default

Each component was:

Documented with usage guidelines
Linked to live code equivalents
Designed to scale, not just ship

Collaboration with Engineering

Rather than following a traditional design handoff, we worked alongside engineering simultaneously.

We used the same naming conventions in both Figma and our code.
We built each component once and reused it throughout the project.
We set up regular feedback loops between design and implementation.

A design system should be seen as a tool for collaboration, not just a design artifact.

Documentation & Adoption

To help the team get started with the system, I took these steps:

I created clear guidelines and added examples showing what to do and what to avoid.
I explained why key decisions were made.
I ran onboarding sessions for designers and engineers.

A design system works only when people trust it.

Trade-offs & Constraints

Some legacy components had to stay in place for now.

Teams needed flexibility, since too many rules would slow down innovation.
Adoption of the new system requires changes to existing workflows, rather than simply providing new files.

The system was intentionally designed to be both opinionated and extensible.

From Components to Templates

To make things easier and more consistent, I turned core components into reusable layout templates for common workflows. These templates gave a clear structure but stayed flexible for different products. By handling repeated layout choices up front, designers could spend more time on user needs and interaction quality instead of rebuilding UI patterns.

As a result, design iterations were faster, user experiences became more consistent, and accessibility improved by default.

Recognition & Scale Impact at Eptura

While working on Eptura’s design team, I helped build and improve a shared design system. This system made user experiences more consistent across our many products. It also made teamwork easier and helped us support over 16.3 million users by reducing confusion and improving collaboration.

Our work was recognized outside the company when we were nominated for the Zeroheight Design System Award (Best Governance). This nomination showed the strength of our team’s approach, which balanced consistency and flexibility, clarified ownership, and helped teams around the world use the system over time.

This recognition showed that design systems are more than just a collection of parts. They serve as a shared foundation for teams to make decisions and grow together.

Read more about the EVO Design System ↗

Process

Testimonials