arrow_back All Work

Transforming a Design System

From a Component Library into a Productivity Platform.

1.9m+
Users
107
Components
60+
Products using the system

Overview

The transition from maintaining a simple UI kit to orchestrating a robust, platform-level design system represents a fundamental shift in product strategy. It's not merely about ensuring visual consistency across buttons and inputs; it's about systematically reducing friction across the entire product development lifecycle.

This case study details the systemic overhaul of our internal design infrastructure. We evolved beyond a static repository of components into a dynamic, opinionated platform that actively guides designers toward optimal solutions, reducing cognitive load and dramatically accelerating time-to-market for complex enterprise features.

My Role

I led the strategic vision and execution for the design system evolution. I conducted comprehensive internal audits, facilitated cross-functional alignment workshops with engineering leadership, and personally architected the core complex component patterns (specifically data tables and advanced navigation structures).

My mandate was to move the system from "descriptive" to "prescriptive," establishing strong defaults that freed the design team to focus on complex user flows rather than pixel-pushing micro-interactions.

The Problem: Operational Inefficiency

Despite having a "complete" Figma library, product velocity was stagnating. Designers were spending an inordinate amount of time assembling basic page structures. A deeper analysis revealed that while we had all the necessary atomic elements (buttons, inputs, dropdowns), we lacked "molecules" and "organisms" that represented actual user intent.

The cost of flexibility had become too high. Because our components could be configured in dozens of ways, designers were forced to make micro-decisions constantly. "Should this modal have a grey background or white?" "Which padding token do I use for this specific card layout?" This lack of prescriptive guidance led to subtle inconsistencies across the product suite and created significant friction during design-to-engineering handoff.

Research & Discovery

To quantify the inefficiency, I initiated a series of observational studies with the core product design team.

Activities Conducted

  • Contextual inquiry sessions with 8 senior product designers.
  • Component detachment analysis via Figma API scripts.
  • Engineering handoff friction audits (reviewing Jira ticket ping-pong).

The "Sample Task" Test

I asked three designers to build a standard, 5-column data table with sorting, filtering, and bulk actions using the existing component library. The average time to completion was a staggering 45 minutes, with significant variance in the final layout spacing and interaction patterns.

Key Insights

01

Decision Fatigue

Overly flexible components forced designers to make styling decisions that should have been handled by the system defaults.

02

The "Missing Middle"

We had great atoms and solid templates, but lacked composite components (like complex forms or standard headers) that accelerated workflow.

03

Handoff Degradation

When designers detached components to achieve specific layouts, the engineering parity was lost, leading to custom CSS implementation.

04

Documentation Deficit

Guidelines existed, but they lived outside the design context (in Confluence), meaning they were rarely referenced during the actual design process.

Prioritization Framework

To tackle the systemic issues without halting product momentum, I developed a simple framework to prioritize which patterns to overhaul first.

Opportunity User Impact Frequency Effort Priority
Data Tables (Composite) High Daily High P0
Progress Steppers Medium Weekly Low P1
Modal Dialogues High Daily Medium P1
Empty States Low Monthly Low P3

Solution Strategy

1. Reduce Decisions

We restricted the API surface of components. Instead of 14 button variants, we offered 3 (Primary, Secondary, Tertiary) with built-in logic that prevented incorrect usage contexts.

2. Increase Predictability

We established rigorous spatial relationships. A "Section Header" composite component automatically handled the margin-bottom, ensuring the gap to the content was mathematically consistent across the entire platform.

3. Design for Scale

We shifted focus to layout templates. By providing robust, pre-configured page shells, designers started 60% of the way finished, focusing their energy on the unique user problem within the canvas.

Deep Dive 01

Reimagining Data Tables

The Challenge: Data tables were the most commonly used pattern in our enterprise tool, yet building them was highly manual. Designers had to assemble rows, cells, and headers individually, leading to alignment errors and detached instances.

The Approach: I architected a massive, fully-responsive Figma component leveraging the newest auto-layout features and component properties. It included built-in toggles for pagination, bulk actions, and density views. It was complex to build, but incredibly simple to consume.

Evolution of an Enterprise Data Table Component

Impact: The "Sample Task" (building a standard table) dropped from 45 minutes to under 5 minutes. More importantly, engineering handoff became seamless because the Figma structure perfectly mirrored the React prop structure.

Deep Dive 02

Simplifying Progress Steppers

The Challenge: Multi-step workflows were frequently designed with bespoke stepper components, leading to confusing navigation for users and redundant code for developers.

The Approach: I consolidated 4 different stepper patterns into a single, robust component capable of handling linear and non-linear flows, error states, and responsive collapsing. I embedded the logic for state transitions directly into the variant properties.

Simplified Stepper Component Consolidation

Impact: Standardized the onboarding and checkout flows across three disparate product lines, resulting in a measurable drop in user drop-off during complex configuration tasks.

Driving Adoption

A system is only valuable if it's used. The technical execution of the components was only half the battle; shifting the perception of the design team was the other.

I partnered closely with engineering to ensure our React library matched the Figma library 1:1. When designers realized that using the system components meant their work would be built exactly as they designed it—without the usual QA back-and-forth—adoption skyrocketed. The system moved from feeling like a "constraint" to feeling like a "superpower."

Outcomes & What I Learned

The transformation of our design system yielded immediate operational benefits. Time-to-prototype decreased significantly, and the visual consistency of our shipped product improved dramatically. But the most profound impact was cultural.

By removing the friction of basic UI construction, the design team was elevated. Conversations shifted from "what hex code is this border?" to "does this user flow actually solve the core problem?"

Designers are users too.

Treating internal tooling with the same rigorous UX process applied to external products is essential. Empathy for the designer's workflow is the foundation of a successful design system.

Next Case Study
Horizon Bank Developer Central
Enterprise UX Developer Tools Information Architecture

Designing Horizon Bank Developer Central

Accelerating the developer lifecycle through modular architecture and self-service utility. From 14-touchpoint onboarding to a unified self-serve experience.

Senior Product Designer · 4 Months
arrow_forward