Building a Design System

Getting Started with Atomic Design

A teammate and I partnered to create a responsive design system for SpareFoot's web experience. Our goal was to create one common visual language that would serve as the source of truth for the design and engineering teams.

Creating a well defined design system would accelerate our teams ability to design, build and test new products and features; moving us toward our shared goal of providing the customer with a simple streamlined experience to find and book self storage.

Though we took direction from Brad Frost’s Atomic Design process, we decided early on that it wasn’t necessary to stick with his naming conventions. We found his process helpful, but we noticed blank stares when trying to explain to stakeholders the difference between an atom and a molecule.

Start with what you have to get to what you need.

Define WHAT YOU HAVE, WHAT YOU NEED, AND WHAT YOU DON'T NEED

The first task was conduct a full visual audit of sparefoot.com. All visual elements and interactions were categorized and added to a deck. This exercise catalogued all design inconsistencies across the website in one place; and was a crucial step in determining which patterns and elements we intended to keep and omit. It also helped us identify any missing pieces or opportunities.

The Nerdy Details (aka The Good Stuff)

simplifying typography and addressing line height

We knew from looking at the iPhone 5 that our standard text was too small and contributed to readability issues. We needed to pair down the number of type styles we were using. In order to simplify multiple fonts and over a dozen text styles we opted to use just one font and defined the minimum amount of headline and text styles necessary. Moving from regular weight to light font weight helped create an airiness to the otherwise heavy bold elements on the site. 

consistency and spacing through grids and margins

The next thing we tackled was to define a responsive grid that would intuitively display content regardless of screen size or breakpoint. After consulting our analytics team on the most common devices and screen sizes our customers use, we opted to create grids for 320px (mobile), 768px (tablet) and 1200px (desktop) breakpoints. 

spacing and padding

Establishing a system for spacing and padding immediately created rhythm and balance to our pages. We used an 8px-based scale that worked well with our newly established typography sizing and line-heights.

forms and inputs

We designed top-aligned text fields that were easy for the eye to scan and user to complete quickly. Obvious error states and educational helper text were essential while designing text fields. In an effort to optimize the mobile platform, we considered details such as surfacing the appropriate key/numeric pad depending on the type of information the user was providing. 

cleaning up icons and colors

For visual consistency, it was necessary to define standards and set rules for all present and future icons. Our icons are now defined by a simple style made up of a 2px black stroke. Creating all icons on a transparent 16x16 pixel square ensured they fit seamlessly into our newly defined grid system.

Though SpareFoot has a limited color palette, our audit revealed several shades of each color represented on production. We paired down the color palette and defined when each should be used. We also updated our colors to ensure AA accessibility compliance. 

Bringing It All Together

Now that we had a solid foundation and paired down all components to only the necessities, we were ready to start building our design system. We compiled a prioritized list of core pages and components and built everything out in sketch. We then exported our assets into Invision’s Design System Manager (DSM) where we annotated each section explaining our rationale and guidelines for usage.

This created one single source of truth for tenured and new designers as well as our engineering partners and product team. The benefits of this project include overall design consistently, an ability to prototype and test faster, iterate more quickly and improved usability. 

Bonus! SelfStorage.com and B2B Pattern Work

Selfstorage.com

Though our flagship brand is SpareFoot, we have a partner site, SelfStorage.com. Once we had completed our SpareFoot Design System the team appreciated the value of the work so much we prioritized the creation of a style guide for SelfStorage.com.

View next case study →