Case Study: Unified Multi-Brand Design System for Enterprise Products

Overview

As the company expanded its suite of AI and enterprise tools, each product maintained its own separate design system, resulting in duplicated components, inconsistent styles, and recurring errors. Designers were spending too much time hunting, updating, and reconciling UI elements instead of designing.

I led the creation of a single, unified design system, one library, one set of tokens, one set of components that consolidated multiple product brands into a single togglable system using Figma variables and variable modes.

This effort dramatically reduced design overhead, eliminated cross-product inconsistencies, and set the foundation for scalable, multi-brand product growth.

Role

Design Manager & Project Lead (Strategy, Direction, Vision + Hands-On Contribution)

Timeline

4 months (intermittent, completed during downtime between product initiatives)

Product Type

Unified Design System / Figma Library (Multi-brand, variables-driven, single-source-of-truth)

Team

Myself (Manager/Lead), 3 Designers

Problem & Context

The Challenge

Each product had:

  • Its own separate design file

  • Its own icons, components, and patterns

  • Its own color and typography configurations

The impact was significant:

  • Duplicated effort maintaining components across multiple systems

  • Errors where designers unintentionally used elements from the wrong library

  • Inconsistency in UI patterns that made their way into production

  • Overhead from updating the same components in 3–4 places

The design team needed one library capable of powering all products, flexible enough for multi-brand use, but structured enough to enforce consistency.

Primary Users

  • Internal designers

  • Myself (daily user)

Constraints

  • The entire project was secondary to other product work

  • Progress could only be made during downtime

  • We needed to avoid disrupting ongoing design projects

  • Must integrate with existing partial design systems already in-flight

Research & Insights

Methods

  • 12 stakeholder interviews

  • Shadowing data science workflows

  • Audit of existing pipeline-building tools

Key Insights from Stakeholder Interviews

  1. Users didn’t understand pipeline errors, no clear visualization or debugging tools.

  2. Most pipelines followed similar patterns, meaning reusable templates would save time.

  3. Technical users wanted depth, while non-technical users needed guardrails.

  4. People didn’t want a toy UI, they wanted genuine power in a visual format.

  5. Parameters were the highest friction area, due to inconsistent naming and validation.

These insights shaped two core principles:

  • Make the system visual first

  • Make complex configuration feel simple

Defining the Experience

I shaped the project around one guiding principle:

“One system. Multiple brands. Zero friction.”

My Leadership & Responsibilities

  • Defined the vision for a unified system

  • Established requirements & roadmap

  • Selected color systems, typographic rules, spacing grids

  • Defined the 3-tier token structure

  • Directed creative and technical work across 3 designers

  • Ensured consistency, scalability, and maintainability

  • Documented the approach and ensured adoption

Key Experience Pillars

  1. Centralization: one place to manage all components

  2. Flexibility: instantly switch brands with variable modes

  3. Scalability: a token system that supports future products

  4. Error reduction: fewer inconsistencies reaching engineering

  5. Speed: faster, cleaner design workflows

Research & Design Activities

Foundational Research

I analyzed best practices across:

  • Figma’s Variables + Modes

  • Major design systems (Material, Fluent, Carbon etc.)

  • Token strategies

This led to the adoption of a 3-tier token structure:

  1. Primitives: base color values, spacing, typography

  2. Aliases: semantic names

  3. Component tokens: applied at the component level

Design & Direction

  • Established the visual language across brands

  • Architected all tokens and variable modes

  • Directed designers in building flexible, unified components

  • Ensured the system reflected brand DNA while remaining cohesive

The Big Idea

Use tokens, variables, and modes to allow instant brand switching: no duplicated components, no redundant libraries.

Example

We maintained two distinct design systems: one for the customer-facing application and one for the internal engineering tools that configured it. With the new unified design system, designers could switch between libraries in the same file, allowing us to model how an engineer’s configuration directly shaped the end-user experience.

Final Design

A. One Library, Three Brands

All brands packaged into a single Figma library, each with:

  • Its own brand styling

  • Any brand-specific assets (logos, components, etc.)

B. Token-Driven UI

  • Colors, spacing, typography, radii, elevations -all tokenized

  • Changes cascade through every component

  • No designer ever edits raw values again

C. Component Uniformity

  • Buttons, inputs, nav, cards, modals, data visualizations

  • One component set, multiple visual expressions

  • Shared logic, consistent behavior

D. Instant Brand Switching

Using Figma modes:

  • A single toggle applies the entire design language

  • Zero duplication

  • Zero rework

  • Zero chance of mixing the wrong components

E. Scalability for Future Products

Adding a 4th or 5th brand becomes simply:

  • Adding a new mode

  • Assigning new token values

  • Zero refactoring

Impact

Quantitative Impact

  • Significantly faster design cycles

  • Fewer errors where incorrect components or libraries were used

  • Reduced maintenance overhead: one update applies across all brands

Qualitative Impact

Designers described the new system as:

  • “Night and day compared to before”

  • “So much easier, everything is just there”

  • “A huge mental load off”

Strategic Value

This unified system enabled:

  • Faster multi-product development

  • Better cross-team alignment

  • Cleaner UX across the entire product ecosystem

  • A foundation for scaling new product lines

  • Less time spent maintaining, more time designing

Lessons & Future Improvements

If We Had More Time

  • Use Figma’s description field for all components

  • Add developer-facing documentation in Confluence

  • Create example pages/templates for common product screens

  • Add accessibility variants to component tokens

What This Project Demonstrates About Me

  • I create systems that scale across multiple products and brands.

  • I lead designers through complex, multi-month initiatives from concept to completion.

  • I translate vision into clear requirements and execute through others.

  • I adopt and implement advanced practices (tokens, variables, variable modes).

  • I improve team velocity by removing workflow friction and reducing errors.

  • I think in frameworks -not isolated screens- ensuring long-term flexibility and maintainability.

  • I bring discipline, clarity, and structure to a design organization.