I currently manage, and evolve Sleep Number’s Lucid design system. I’ve developed components and patterns to meet user and team needs and oversee implementation.

Problem

In the previous design system, there was 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 was assigned the task of creating a unified and visually cohesive set of reusable components that met the design team and user needs.

I explored design system fundamentals and guidelines to develop a system that best met the brand, accessibility guidelines, 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 needs with team needs.

Systems Structure

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

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 components that include atoms and molecules such as content blocks, navigation and footer.

All icons were designed from a custom 24x24 grid. This defined 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 consistent icon creation and increased design efficiency.

Impact

Creating visual consistency across products, 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 industry trends and cohesivity.