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.
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
Ensure all components
are WCAG compliant
Ensure system is scalable to evolve with site needs
MEET THE CORE USER GROUPS
designers & developers
They need to easily understand current design elements, functionality, and guidelines in order to efficiently create or enhance site features.
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.
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.
Site-wide Content Audit
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
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.
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.
Using Sketch, I built the system's foundation by cataloging and accessibility testing all of the system's different design elements.
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.
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.
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.
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 -
Increase in brand credibility
Unified design consistency
Increase in team velocity
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 are the system's basic building blocks. They can be combined with other system elements but can't be broken down any further.
Molecules are simple groups of atoms, functioning together as a unit that have unique properties.
Organisms are combinations of molecules that work together as a unit to form distinct sections of an interface.
Templates are complex groups of organisms that create page-level layouts. They convey the page's underlying structure.
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.
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.