Unicorn Design System

When I joined WP Engine as one of three product designers, our design system was holding us back. As the team grew rapidly, the cracks became impossible to ignore: designers detached components because states were missing, engineers built without a shared library, and new hires struggled without documentation.

I led the effort to rebuild our design system from the ground up—not just creating better components, but fundamentally changing how we scaled design across the organization. The result: a comprehensive, accessible design system with embedded documentation that became the foundation for all WP Engine product experiences.

A detailed chart explaining different types of buttons and links, including primary, secondary, tertiary, and destructive options, with visual examples of each style, hover states, focus states, and hierarchy indicators, all color-coded in purple and red.

My Role & Approach

I led the end-to-end design system consolidation effort while managing a team of two contributing designers, which included:

  • Team leadership: Managing two designers, reviewing their contributions, and providing design feedback

  • Strategic planning: Auditing existing components and establishing governance models

  • Design leadership: Creating atomic components using Figma's auto layout and variants

  • Accessibility champion: Implementing WCAG 2.1 AA compliance standards

  • Documentation: Writing usage guidelines embedded directly in the design library

  • Cross-functional collaboration: Partnering with engineering and product on implementation

  • Quality assurance: Conducting final design QA before production deployment

Understanding the Problem

Visual Audit & Research

Before designing solutions, I partnered with another designer to conduct a comprehensive audit of the existing User Portal, documenting every button, header, color, and interaction pattern to identify inconsistencies.

We then collaborated with our UX research team to gather qualitative insights:

  • Surveyed designers and developers about their use of the existing system (Unicorn Design System)

  • Conducted moderated interviews to understand pain points and knowledge gaps

  • Identified priority areas for improvement based on frequency of use and impact

Key Findings:

  • Designers regularly detached components from the library due to missing states

  • No single source of truth for design patterns or usage guidelines

  • Documentation existed but was buried in Confluence and rarely consulted

  • Engineering lacked a unified component library, creating drift between design and implementation

Atomic Design at Scale

Foundation First

Inspired by Brad Frost's Atomic Design methodology, I established a scalable architecture starting with design foundations:

  • Typography system with clear hierarchy and accessibility considerations

  • Color palette with WCAG AA compliant contrast ratios

  • Spacing scale using consistent 8px grid system

  • Accessibility guidelines embedded throughout

Component Development

Inspired by Brad Frost's Atomic Design methodology, I established a scalable architecture starting with design foundations:

  • Typography system with clear hierarchy and accessibility considerations

  • Color palette with WCAG AA compliant contrast ratios

  • Spacing scale using consistent 8px grid system

  • Accessibility guidelines embedded throughout

Documentation Where Designers Actually Work

A critical insight from our research: designers weren't reading documentation in Confluence because it meant context-switching away from their primary tool.

Solution: I embedded usage guidelines directly within the Figma library file.

Benefits of this approach:

  1. Always accessible: Designers keep the library file open as they work

  2. Stays current: Updates happen in one place as components evolve

  3. Developer visibility: Using Figma's Storybook integration, we "iframed" guidelines alongside React components, giving engineers the same context

Each component included:

  • Usage guidance and best practices

  • Anatomy breakdowns with labeled parts

  • Do's and don'ts with visual examples

  • Accessibility requirements

  • Links to corresponding Storybook implementation

Accessibility by Design

Rather than retrofitting accessibility, I made WCAG 2.1 AA compliance a core requirement:

  • All color combinations tested for contrast ratios

  • Focus states clearly visible for keyboard navigation

  • Proper semantic structure in component naming

  • Screen reader considerations documented

  • Collaborated with engineering to ensure implementation matched accessibility intent

Managing the Transition

The Deprecation Challenge

Migrating from old components to new variants presented a unique challenge in Figma: deleting components defaults them to the last version rather than removing them, creating an invisible inconsistency.

My solution: A clear deprecation strategy

  • Added visual indicators (translucent striped pattern in "Notes" pink) to deprecated components

  • Updated layer naming with [DEPRECATED] labels

  • Only marked components deprecated after new versions shipped to Storybook

  • Created migration guides for designers working in legacy areas of the Portal

This approach maintained backward compatibility while clearly signaling the path forward.

Scaling Through Contribution

While I led the system with two other core contributors, I recognized that long-term success required enabling the entire design team to contribute while maintaining quality and coherence.

I developed:

  • Contribution guidelines outlining when to contribute vs. when to use existing patterns

  • Proposal template for suggesting new components or modifications

  • Walkthrough guide documenting the end-to-end process from design to Storybook

  • Governance model with clear approval workflows and design QA checkpoints

This empowered designers to solve problems with system-thinking while preventing fragmentation.

Impact & Outcomes

Results

  • Reduced design inconsistency across the User Portal through standardized components

  • Accelerated development velocity by providing engineers with a unified React component library

  • Improved accessibility by embedding WCAG 2.1 AA standards into every component

  • Scaled design team effectively through comprehensive documentation and contribution models

  • Eliminated tribal knowledge dependency by making guidelines accessible in designers' primary workflow

Team Benefits

  • Designers onboarded faster with clear documentation and examples

  • Engineers implemented designs with greater accuracy and consistency

  • Product managers gained confidence in design scalability

  • QA cycles shortened due to standardized component behavior