Lucid Design System

I currently manage Sleep Number’s Lucid Design System. I’ve created and evolve components and patterns to meet user and team needs and collaborate with cross-functional teams oversee adoption.

Problem

In the previous design system, there were a miscellaneous components and icons that had been accumulated over the years to meet the website’s past needs.

As part of a design system update, I created a unified and cohesive visual system of reusable and scalable components.

I explored design system fundamentals and guidelines to develop guidelines that best met the brand, accessibility, and UI trends.

Systems Research


Studied various design systems to compare foundations, patterns, and styles and then customized them to meet company needs.

Design Principles

Gathered best practices for constructing icon characteristics and concepts to align with objectives.


Systems Structure

Researched minimal and complex systems to define current and future needs, including cross-platform adaptations and animations.


Accessibility and WCAG Guidelines

Documented best practices in order to develop an Accessible Design System that is both adaptable and provides an inclusive experience to users.

The design system structure followed atomic design principles to create a modular approach to building components.

Atoms

Building single components foundations such as style patterns, colors, typography, grids and spacing, and icongraphy.


Molecules

Defining collection of individual elements that together form a single component, such as buttons, inputs, and field forms.


Organisms

Designed complex resuable components such as content blocks, navigation and footer.

All icons were designed from a custom 24x24 grid. This defined consistent guidelines to create a uniform iconography design system.

Foundations

A square grid is the foundation to determine line thickness, proportion, shape, and positioning across the entire set of icons.


Anatomy

Defining styling details and characteristics such as metrics, themes, and color treatments create cohesive components.


Usage

Outlining functionality to reduce cognitive load and strategically employ icons throughout designs.

Building the components within the same system structure allowed for cohesive icon generation and increased design efficiency.

Impact

Creating visual consistency across products and channels, impacted cross-functional teams and Sleep Number customers.


Actions

Updating actionable icons such as phone and location icons, resulted in 65% increase in click rates.


Accessibility

Increased accessibility and user recognition through an inclusive and cohesive system.