Enable – Building a Scalable Design System & Leading Product Rebrand

What I walked into

The design team had attempted to build a component library — but it was built by a UX engineer without designer involvement. Components existed only in Storybook, not in Figma. There was no token structure, no contribution model, and no documentation designers could reference.

The broader engineering context made this harder. With 4 different front-end frameworks across the platform, any design system work had to account for how components would be implemented differently across codebases. Design decisions couldn't exist in a vacuum — they had to be grounded in what was technically buildable.

Three compounding problems

Individual contributor, de facto leader

I joined as a Senior Product Designer, but the nature of the work quickly evolved. When the federated contribution model failed, I stepped up as the sole owner of the design system backlog, building and reviewing every component. When our Design Director left in November 2025, I became the coordinator and de facto leader for a team of 5 designers for 4 months — managing design system work, rebrand coordination, and ongoing product design without a director in place.

For engineering implementation, I paired closely with Varun, our first Design System Engineer hired in August 2025 — writing component requirements, managing his Jira backlog, doing design QA on every PR, and co-authoring release notes.

V1 → V2 → V3 — three versions, one foundation

The design system didn't go from broken to perfect in one step. It evolved through three distinct versions, each triggered by a real business event — the formation of the design team, the arrival of our first DS engineer, and a company-wide rebrand.

V2

Design-led · Dec 2024 – Aug 2025 70+ components

V2: Design-first, built in Figma

When the design team formed in December 2024, we initiated a new design-led system. The goal was to modernize the UI toward SaaS-standard quality, improve accessibility, and build a comprehensive component library that designers could actually use.

• Started as a federated model — 3 designers each contributing components
• Federated model failed — I stepped up as sole DS owner and rebuilt the backlog with impact-prioritized components
• Weekly design critique cycle — walk team through, peer review, merge, publish, document in Confluence
• Design-complete but not yet implemented in the main engineering codebase

V3

Rebrand-ready · Aug 2025 – Present 50+ components · Live in Storybook

V3: Semantic tokens, rebrand-ready, code-connected

In August 2025, we hired Varun as our first Design System Engineer. I paired with him to implement V2 components in Storybook as Web Components. In parallel, the company launched a rebrand — which led me to rebuild the entire token architecture into a proper semantic structure to support systematic color changes across the platform.

• Rebuilt token structure: primitive → semantic → component layering
• Three separate collections: Enable 3.0 Color (211 tokens), Spacing (49), Typography (37)
• Added Figma Code Connect — components linked directly to Storybook implementations
• Available as both Web Components and React library

Click to expand

The system in action...

Imagine you're an IT administrator at a Managed Service Provider, responsible for delivering seamless network and security support to a busy medium-sized dental organization.

01

50+ Components, Code Connected

Component Library

A comprehensive library covering every UI pattern in the product — from simple buttons and status pills to complex data tables with sortable headers, inline cell editing, tree expansion, and bulk action toolbars. Every component is tokenized, accessibility-tested, and available in both Figma and Storybook.

Click to expand

02

Deep Component Thinking

Table Component — A Study in Depth

The table component alone contains sub-components covering every cell type variant, row states, selection states, tree/expandable rows, bulk action toolbars, inline cell editing, column resizing, and sticky headers. It's the component I'm most proud of — and the one that ships directly to engineering via Code Connect.

Click to expand

03

Before & After

Platform Transformation

The impact of the design system is most visible when you put V1 and V3 side by side. The same features — Trading Programs, Claims — rebuilt with consistent components, accessible color contrast, and a clean visual language. Customers described the new UI as clean, modern, and joyful to use.

Click to expand

04

Design to Code

Storybook Implementation

Every component exists in both Figma and Storybook — fully documented with usage guidelines, API controls, and interactive examples. The Table component alone covers 12 story variants including sortable, compact, striped, loading, disabled, sticky header, and resizable columns.

How the system actually gets built

The design system runs on two parallel workflows — one for design contribution, one for engineering implementation. These aren't separate silos; they feed each other through a clear handoff process I defined and own.

Click to expand

Every component goes through a weekly design critique, peer review by at least two designers, a Figma branch merge, library publish, and Confluence release notes — before it even reaches engineering. On the engineering side, I write every Jira ticket, prioritize Varun's sprint weekly, do design QA on every PR, and write the Teams announcement when a component ships.

The rebrand that happened twice

In October 2025, Enable launched a company-wide rebrand — new logo, new brand colors, new icon set (Heroicons → Streamline). I was responsible for translating the brand guidelines into a scalable product token architecture and coordinating the rollout across design and engineering.

Then the CMO changed. New brand guidelines arrived. The entire color system had to be remapped — again. In total, I produced four complete color mapping documents: V1→V3, V2→V3, V1→V3.1, and V2→V3.1. Each mapping covered every semantic token category — text, background, border, icon, link — with hex values, CSS variable names, and token replacement CSS.

Click to expand

The key brand shift: the legacy bright lime green (#34B233, #178816 in V1) became a deeper, more accessible teal-green (#00684a, #00834f) in V3.1. This change improved color contrast ratios across the entire product — a meaningful accessibility win alongside the visual modernization.

Click to expand

The unlock: designers shipping production-quality prototypes

The final piece — and the one I'm most excited about — is what happens when you pair a well-built design system with AI-powered tools. The collaboration between me and our design system engineer made it possible to implement Figma Code Connect and Figma MCP for our components, enabling a workflow that didn't exist before.

Designers can now use Figma Make with our EDS React library selected, or use Claude Code, to build realistic prototypes — and even merge PR branches — using real V3 components. The prototypes are no longer mockups. They're actual React code using production components.

Click to expand

From 0–14.5% adoption to a company standard

The design system went from being a nice-to-have to the default choice for new feature development. Customers noticed the difference — describing the new UI as clean, modern, and more accessible. Engineering teams reduced duplicated UI work. The rebrand, which could have taken months of manual updates, was executed systematically through the token architecture.

Building design maturity under pressure

The most meaningful outcome isn't a metric — it's what the team said. Designers told me I made their work easier and they felt secure knowing I was the one setting the quality bar on the design system. Engineering leaders were impressed by the token documentation and color mapping work, specifically noting how it was grounded in technical feasibility with clear implementation guidance.

During the 4-month leadership gap (November 2025 – March 2026), I kept the design system moving, the rebrand on track, and the team coordinated — without a director in place. The rebrand reached its target release with design QA complete and engineering rollout in its final phase.

What I learned