Icon Design System
Project Summary
Led the design and implementation of Sleep Number’s iconography design system.
Role
Lead UX Designer | Sleep Number
Led the design and implementation of Sleep Number’s iconography design system.
Role
Lead UX Designer | Sleep Number
Problem
In the previous design system, there was a collection of various 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 icons that are easily identifiable to users.
As part of a design system update, I was assigned the task of creating a unified and visually cohesive set of icons that are easily identifiable to users.
Research
I explored iconography fundamentals and guidelines to develop a collection that best met the brand, accessibility guidelines, and UI trends.
Brand Exploration
Studied various brand iconography systems to compare foundations, grid layouts, 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 user needs.
Systems Structure
Researched minimal and complex systems to define current and future needs, including cross-platform adaptations and animations.
Studied various brand iconography systems to compare foundations, grid layouts, 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 user needs.
Systems Structure
Researched minimal and complex systems to define current and future needs, including cross-platform adaptations and animations.
Design
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.
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 consistent icon creation and increased design efficiency.
Actions - Updating icons to communicate actions, such as phone and location icons, resulted in 35% increase in click rates.
Accessibility - Increased accessibility and user recognition through industry trends and cohesivity.
Accessibility - Increased accessibility and user recognition through industry trends and cohesivity.