Iconography Documentation

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.


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.



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.






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.



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.