Image of a woman writing out user goals for a user experience project.

UX/UI DESIGN

ACCESSIBILITY DESIGN

WEB

a scalable

system

building

MY ROLE

UX/UI Designer

CLIENT

Sleep Number

OVERVIEW

As Sleep Number's digital team grew, keeping designs consistent across the website became challenging. There was a need to unite the group under a system to guide its collective efforts. To meet that need, I was tasked to create the team's first design system. Having a design system ensures consistency across design and code, which efficiently speeds up project cycles.

SNDS Overview

Image of the 3 categories that compose the Sleep Number Design System; Styleguide, Documentation, and Compnent Library.

CHALLENGE

Creating, implementing, and maintaining a design system is no small task. It requires continuous effort from various teams. This meant we had to align all cross-functional teams with collectively collaborating in the system's creation and implementation. To ensure that we all aligned and that our efforts would create a successful system, the team and I defined the following project goals -

Define all reusable components and patterns

Provide comprehensive

design documentation

Ensure all components

are WCAG compliant

Ensure system is scalable to evolve with site needs

SNDS Challenge

Image of a woman and man that represent the designer and developer user groups.

MEET THE CORE USER GROUPS

designers & developers

CORE NEEDS

They need to easily understand current design elements, functionality, and guidelines in order to efficiently create or enhance site features.

PAIN POINTS

There isn't a shared central source of truth that conveys all existing guidelines. This causes inconsistencies amongst projects, which ultimately have to be addressed.

APPROACH

To understand how a design system could work for the team, I assessed existing workflows. I found various redundancies in processes caused by the lack of a shared system. This discovery identified that the system must be accessible through an online database. The online database would allow all team members access to and shared ownership of the system.

RESEARCH METHODS

Competitor

Analysis

UX Best

Practices

Site-wide Content Audit

User

Surveys

Information

Architecture

User

Journey

SNDS Approach

Image of Brad Frost's Atomic Design website.

FOUNDATIONAL RESEARCH

I researched Atomic Design, a leading design system methodology. I used its principles as the foundation for Sleep Number's design system. Atomic Design's fundamental idea is to create small, independent parts that can combine into larger structures.

ATOMIC DESIGN STRUCTURE

ATOMS

MOLECULES

ORGANISMS

TEMPLATE

PAGE

Image of 3 website screenshots for established design systems by Google, Shopify, and IBM.

COMPETITOR ANALYSIS

To understand how other brands were using their design systems, I researched Google's Material Design, IBM's Carbon Design, and Shopify's Polaris. This research provided me insights into design system best practices.

Image of the typography portion of the content audit for the design system.

SITE-WIDE CONTENT AUDIT

I audited the site and assessed all existing colors, type styles, icons, components, design patterns, and functionality. The audit highlighted several non-scalable elements and helped determine which parts to keep in the system and which to remove.

THE BUILDING PROCESS

I researched different software options to build the system and presented the options to the team. From the options, we chose to use both Sketch and InVision's Design System Manager.

SKETCH

Using Sketch, I built the system's foundation by cataloging and accessibility testing all of the system's different design elements.

DSM PLUGIN

Once the foundational elements were finalized in Sketch, I used InVision's DSM to convert the Sketch file into a DSM-managed library. The library then could be shared with other designers.

GIF of a mobile webpage being quickly built using the design system Sketch library.

SHARED LIBRARY

Once the system's DSM shared library was available, designers could easily access the library in Sketch. The library enables designers to quickly create designs using the system's components. This allows for various design options to be explored while ensuring that they align with the system's guidelines.

Image of the web based design system within a laptop mockup.

DSM ONLINE

Using DSM, I created an online version of the system. This version serves as a centralized database that gives teams transparency into the system. It's a key feature that keeps all the teams in sync.

RESULTS

When we were ready to debut, I onboarded team members to the new design system. Once the team was fully onboarded, they began using the system as a source of truth for design and functionality guidelines. With the system implemented, the team started to benefit from the following results -

Streamlined workflows

Increase in brand credibility

Unified design consistency

Increase in team velocity

SNDS Results

Image of some the categories found within the design system.

SYSTEM OVERVIEW

The complete Sleep Number design system is not available for the public to view, but here's a sneak peek into some of the system.

ATOMS

Atoms are the system's basic building blocks. They can be combined with other system elements but can't be broken down any further.

Image of example of design system molecule.

MOLECULES

Molecules are simple groups of atoms, functioning together as a unit that have unique properties.

ORGANISMS

Organisms are combinations of molecules that work together as a unit to form distinct sections of an interface.

Image of example of the design system organism.

Image of example of the design system template.

TEMPLATES

Templates are complex groups of organisms that create page-level layouts. They convey the page's underlying structure.

PAGES

Pages are combinations of templates that convey a final layout. For this example, we have used atoms, molecules, organisms, and templates to create a marketing page.