Design System · 2024
UnifyUX
Enterprise design system across three life-sciences products
TL;DR
I led Revvity's first unified design system — design iteration time cut 25%, handoff errors down 30%, across 3 enterprise products in life sciences.
25%
Faster Design
Iteration time
30%
Fewer Errors
Dev handoff
3
Products
Unified
WCAG AA
Accessibility
Compliant
1My Role & Context
My Responsibilities
Design system architecture, component design, docs, stakeholder alignment, and adoption strategy
Scope
3 Enterprise Products: Signals BioDesign, Signals Notebook, Signals Inventa
Company
Revvity (formerly PerkinElmer)
Live System
2The Challenge
Building a design system is easy. Getting people to actually use it is the hard part.
A design system for enterprise software isn't really about components — it's about changing how teams work. Four fights in particular:
- Stage 1: Pitching it — Convincing leadership to fund a design system before the value is proven. "Why spend on this instead of shipping features?"
- Stage 2: Building components — Abstract, reusable components that survive across products with different codebases and frameworks.
- Stage 3: Getting teams to use it — Making design teams with established workflows adopt processes they didn't ask for.
- Stage 4: Keeping it alive — Stopping teams from forking one-off solutions instead of contributing back.
3UX Design Principles
Four principles I established for designing software in the life sciences industry:
Customers First
We build products that create value for our customers. We partner with them to understand and solve their challenges — not blindly follow the solutions they hand us.
Facts Over Opinions
We defer to facts, not opinions. Evidence and research drive the design. This lets us question everything and favor what's true now over what we assumed before. Unsure? Ask.
Always a Work in Progress
We focus on learning, iteration, and continuous improvement. Agile, always learning, open to change. There's always an easier, simpler, more intuitive way to solve the problem.
Usable by Everyone
UX connects humans to products through empathy and understanding. We're inclusive by default — building solutions for everyone, always pushing for WCAG AA accessibility.
4Design System Architecture
I structured the system on foundations that scale with growth:
1
Style Guide
2
Components
3
Component States
4
UX Foundations
5
UI Foundations
6
Bench Workflows
7
Desktop Platform
Style Guide & Tokens: Colors, copywriting, iconography, spacing, and typography ship as ready-to-use foundations; Dark Mode is in progress. Components covers 33 production-ready UI primitives, each with Introduction, Usage, Variants, and UnifyUI specs. UX & UI Foundations codify cross-product patterns — auth flows, forms, autosave, error handling, localization, AI chat, system feedback. Bench Workflows capture life-sciences-specific flows (data analysis, protocols, running samples) that no off-the-shelf system covers. Every page carries a ✅ Ready / 🟡 In Progress badge, so consumers know what's safe to build on today.
Design Decision
Evolve existing patterns, don't rebuild from scratch
Three products had diverged into incompatible design languages over years. A full redesign would break user muscle memory and burn dev effort. I chose incremental unification: shared tokens and primitives first, then gradually converge components — cutting iteration time by 25% while keeping continuity for existing users.
5Design System Showcase
The full design system docs — from UX principles to component library:
Software hub — the UnifyUX design system covering Style Guide, Components, Component States, UX & UI Foundations, Bench Workflows, and Desktop Platform
Color Palette — 13 named brand colors (RevvityBlack, RevvityYellow, Flame, Orange, Forest, Green, Orchid, Purple…) with AA-compliant pairings
Typography — Hanken Grotesk Display Large 64 / Medium 56 / Small 48 px for brand; native system stacks for functional UI text
Iconography — a Material Symbols-based common icon set with labeled-icon usage rules grounded in ISO 11581-10
Spacing tokens — 11 named variables on a 4 px base (spacing-4xs 2 → spacing-4xl 80) shared between Figma and code
Components — 33 production-ready UI primitives such as the Data Table prebuilt set, each with Introduction, Usage, Variants, and UnifyUI specs
6Key Deliverables
Color System
13 named brand colors anchored on RevvityBlack and RevvityYellow, layered with functional groups for Text, Component States, Application States, Background, Border, Icon, Range, and Specialty. WCAG AA contrast and ISO 9241-125 compliance baked into every pairing.
Typography
Hanken Grotesk for brand display (Large 64 / Medium 56 / Small 48 px), paired with native system stacks — San Francisco, Segoe UI, Roboto, Ubuntu — for functional UI text. Progressive enhancement keeps performance fast and the OS-native feel intact.
33 Production Components
Button, Data Table, Date Picker, Dialog, Dropdown, Navigation, Stepper, Toast, Tooltip, and 24 more — each with Introduction, Usage, Variants, and UnifyUI tabs. Every page is tagged ✅ Ready or 🟡 In Progress, so teams know what's safe to build on.
Spacing & Radius Tokens
11 spacing variables (spacing-4xs 2 px → spacing-4xl 80 px, all on a 4 px base) and 8 corner-radius variables (radius-2xs 2 → radius-2xl 24, plus radius-round). Same token names ship in Figma and code — killing the "what px is this gap" pings during handoff.
Navigation & Iconography
Research-backed navigation patterns and a labeled-icon system. User testing showed labeled icons beat icon-only on both response time and satisfaction — so every icon ships with a label rule grounded in ISO 11581-10 and Jakob's Law.
💭 What I Learned
A design system isn't really about components — it's about changing how the org works. The hard part was never building the system; it was building trust. Adoption happens when you solve a real pain point, not when you ship the prettiest docs. The teams that adopted UnifyUX fastest were the ones I paired with early — understanding their concrete problems and designing the fix with them. A design system is a product, and its users are your fellow designers and developers.