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

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.

 
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 - 

1

Define all reusable components and patterns 

3

Provide comprehensive

design documentation

2

Ensure all components

are WCAG compliant

4

Ensure system is scalable to evolve with site needs

 
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
Icon of a webpage with a magnifying glass ovelaying the rght corner of the webpage.

Competitor

Analysis

Icon of a webpage with a aprroval seal overlaid in the right lower corner.

UX Best

Practices

Icon of a paper and pen representing an audit.

Site-wide Content Audit

User

Surveys

Icon of structured chart where a top square is centered above a lower row of 3 horizontally aligned squares.

Information

Architecture

Icon of a curved line with circles evenly spaced out on to of the line.

User

Journey

 
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
Icon representing an atom.

ATOMS

Arrow pointing from previous step in Atomic Design to the next.
Icon representing a molecule.

MOLECULES

Arrow pointing from previous step in Atomic Design to the next.
Icon representing an organism.

ORGANISMS

Arrow pointing from previous step in Atomic Design to the next.
Icon representing a template.

TEMPLATE

Arrow pointing from previous step in Atomic Design to the next.
Icon representing a page.

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.

Image of the Sketch logo
Arrow pointing from Sketch logo to DSM logo
Arrow pointing from DSM logo to Sketch logo
Image of the InVision DSM logo
Image of the Sketch file created for the design system.
sketch_logo_horizontal.png

SKETCH

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

InVision-DSM-logo-primary-pink-light.png

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.

Image of the DSM plugin open in the design system Sketch design file.
GIF of a mobile webpage being quickly built using the design system Sketch library.
Image of InVision's DSM Library logo.

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.
Image of InVision's DSM online logo.

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 -

1

Streamlined workflows

3

Increase in brand credibility

2

Unified design consistency

4

Increase in team velocity

 
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.

Image of example of the design system atoms.
Icon representing an atom.

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.
Icon representing a molecule.

MOLECULES

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

Icon representing an organism.

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.
Icon representing a 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.

Image of example of the design system page.
Image of the Getting Started screen for the online design system.

ONLINE CENTRALIZED DATABASE

The system's online database is a key feature that allows teams easy access to the system. Below are a few examples from the database.

Image of several of the design systems online screens.