Design System Overhaul

Warby Parker

Design system overhaul

Warby Parker’s new design system unifies and uplifts visual and functional experiences across the entire digital ecosystem.

Brief

1/3

Unify the system and streamline process at scale

When I joined, 3 disparate, platform-specific design systems existed causing design inconsistencies. I took action to build 1 system for all platforms to streamline process, promote consistent experiences and empower designers to innovate the system with speed.

Role

Lead System Designer

What I did

System design

UI/UX

Motion

Platforms

Web

iOS

Android

Business systems

The system at scale

A system built to support all platforms. Changes made to higher level libraries cascade through libraries below it. This enables consistency, adaptability and speed.

Solution

2/3

00 Global styles

At the highest level, all platforms (Web, iOS, Android and business systems) share styles that include colors, icons, motion and more for consistency and speed at which a style is updated cross-platform.

Colors and accessibility

Refined colors used for text to meet contrast guidelines. Then, regrouped visually and functionally for ease of use across designers, engineers and platforms.

Harmonize the icon system

Before, 3 separate icon sets visually diverged. Now, they are unified into 1 system with consistent visual weight, style and improved readability.

Tokenize space & motion

Tokenized a 4pt space system and systemized motion into 2 easing values with set durations and usage guides to create a consistent, predictable, and smooth experience.

Colors and accessibility

Refined colors used for text to meet contrast guidelines. Then, regrouped visually and functionally for ease of use across designers, engineers and platforms.

Harmonize the icon system

Before, 3 separate icon sets visually diverged. Now, they are unified into 1 system with consistent visual weight, style and improved readability.

Tokenize space & motion

Tokenized a 4pt space system and systemized motion into 2 easing values with set durations and usage guides to create a consistent, predictable, and smooth experience.

01 Platform-Specific Styles

While inheriting global styles, these libraries (Web Styles, iOS Styles, etc) diverge into platform-specific paths that hone in on shared typeface, grid, shadows and more.

02 Platform-Specific UI Kit

While inheriting global and platform-specific styles, the UI kit is the most utilized file containing components used to help build experiences.

Refresh component UI with attention to detail

Shifted from an outdated look with cluttered files to a more modern UI with detailed documentation.

Refresh component UI with attention to detail

Shifted from an outdated look with cluttered files to a more modern UI with detailed documentation.

03 Web CMS UI Kit

Fed by the web UI kit and styles libraries, the CMS empowers the brand team to launch recurring promotional landing pages of seasonal collections and collaborations without any time/effort taken from devs.

03 Web CMS UI Kit

Widgets built for efficiency

With a library of widget components and variances, it gives the team power to draft pages quickly and freely.

Widgets built for efficiency

With a library of widget components and variances, it gives the team power to draft pages quickly and freely.

Results

3/3

Unified

experiences with shared elements cross-platform

Flexible

component library for easy adaptability

Speed

to design and launch experiences cross-platform

Premium

visual and functional components that welcomes new ideation

Speed

efficient to design and launch experiences cross-platform

to design and launch experiences cross-platform

Quick call-out — The objective wasn’t to build the best and final Warby Parker design system. I acknowledged the ongoing future evolution of our products and the need for the design system to be more flexible rather than to restrict the engineering process or new creative ideas.

Warby Parker