Lucid Design System
Role: UX/UI Lead, Systems Manager, Documentation
Duration: 2023 - Current
Overview
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 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 reuable and scalable components.
As part of a design system update, I created a unified and cohesive visual system of reuable and scalable components.
Research
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.
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.
Component Library
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.
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.
Iconography Library
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.
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.
Outcomes
Building the components within the same system structure allowed for cohesive icon generation 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.
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.