Illumina design system

A unified system that improved efficiency, consistency, and launch quality across digital teams.

Project overview

Role

Product Designer, Operations, Developer, Delivery

Skillset

Design Systems, Product Strategy, Workshop Facilitation

Tools

Figma, Storybook, Jira, Confluence, GitHub

Team

Designers, Engineers, Content, QA

Product DesignOperations

Unifying work across teams

Illumina’s digital experiences were built in silos, with each team solving problems in its own way. Without shared standards, design and development duplicated work, slowed releases, and introduced defects late in the process. To improve speed and quality, Illumina needed a system to unify teams around a single source of truth—a scalable foundation that strengthened collaboration, reduced rework, and supported future growth.

My contribution

I led phase one of the Illumina Design System, overseeing design and operations from concept through launch. I later supported phase two as the system scaled across the organization. My work included defining tokens, building reusable components, and establishing governance and workflows to ensure the system became a trusted foundation for design, development, content, and QA.

The challenge

Fragmented tools and processes slowed delivery and reduced quality.

Inconsistent practices across teams

Without a shared framework, teams worked independently, creating redundant work and introducing risk. Projects often repeated the same problems, with inconsistencies surfacing late and extra effort required to fix them. These recurring issues created four main challenges that needed to be addressed.

  • 01

    Duplicate patterns

    Each team built its own UI elements, leading to inconsistency and wasted effort.

  • 02

    No source of truth

    Design and development worked from different references, causing misalignment.

  • 03

    Delayed launches

    Rework and conflicting approaches slowed time-to-market.

  • 04

    Quality issues

    Inconsistencies created defects that surfaced late, increasing cost and risk.

The approach

Combining design and operations to ensure adoption across teams and workflows.

From audit to adoption

We treated the design system as both a design and operational product. It needed strong foundations, but also workflows and governance to make sure teams actually used it. To achieve this, we approached the project by focusing on:

  • Audit

    Cataloged existing UI and content patterns to identify redundancies.

  • Foundation

    Defined tokens for color, elevation, motion, opacity, radius, spacing, and typography.

  • Components

    Built reusable libraries in Figma and code, cutting repetitive work.

  • Operations & Governance

    Partnered with dev, content, and QA to design workflows, create documentation, and drive adoption.

The solution

A living library that became the single source of truth for design and development.

From fragmentation to unity

The Illumina Design System launched as a centralized, documented, and governed library of tokens and components. Instead of reinventing patterns, teams could design and build from the same foundation, supported by resources that ensured consistency and adoption. The system delivered:

  • Components

    Centralized Figma and coded component libraries.

  • Tokens

    Token-driven foundations for consistency and flexibility.

  • Documentation

    Documentation and governance for onboarding and adoption.

The results

Faster launches, fewer defects, and stronger alignment across teams.

Results achieved

The design system created measurable improvements in how digital work was delivered. By reducing rework, improving collaboration, and providing a shared foundation, it drove meaningful results across teams.

  • 30-40% fewer repetitive tasks We reduced repetitive design and development tasks by reusing standardized components, freeing teams to focus on higher-value work.
  • Shorter launch cycles We achieved shorter launch cycles by streamlining handoffs between design and development, helping teams deliver features faster and more predictably.
  • Fewer post-launch defects We reduced post-launch defects by reusing validated components across products, leading to more stable releases and reduced support effort.
  • Smoother collaboration We enabled smoother collaboration by aligning design, development, content, and QA on shared workflows, strengthening cross-functional alignment.
  • Scalable foundation We established a scalable foundation as the baseline for future Illumina products and campaigns, ensuring consistency and long-term growth.

Reflection

More than a system, it was a cultural shift in how digital work got done.

A system and a way of working

The Illumina Design System wasn’t just a library of components. It represented a shift in how digital work was planned, built, and delivered. By redefining how teams collaborated, it set a higher bar for consistency, speed, and quality across every experience.

Curious where to go from here?

These are short-form case studies designed for quick reading. I’d be happy to walk through this project in more detail over a quick chat.

Let's connect