The process

Building a design system from the ground, up.

This major automotive retailer has Tire Dealer & Repair Shop in 38 states, generating over $1 Billion annually. With over 15 internal and external products, many areas of design and development needed to converge into one working system. My team and I was tasked with rebuilding their current design system from the ground up to be consistent, efficient, and concise.

Client

Major Automotive Retailer

Role

UX / UI Designer

Time

8 Months

Team

Han, Adam, AJ, Vamsi, Carolina

Foundations

Foundations are the visual elements needed to create engaging end-to-end user experiences. This includes guidance on iconography, typography, layout, and color.

This foundation is utilized in the creation of all other elements and components of the design system. The foundational styles were distributed via design tokens and Figma Team Libraries.

some of our foundations greatest hits

Color

We explored many options for expressing color and arrived at a color scale ranging from 10-100 in value for all colors. The color scales allowed us to easily apply colors in full and half-step increments to different elements and element states.

Icons

The client was already utilizing FontAwesome for all their icon needs the issue was implementation. We sought to give designers the icons where they work in Figma in a ready-to-go component format. These components contain variants for all 50+ icons for an easy-to-browse 900+ icon library.

Typography

We started with auditing the product to take inventory of all fonts and their use cases. From there, we consolidated all fonts into ten categories and six weights. To create the text styles in Figma we had to implement a weight style for each font size, totaling over 60+ text styles.

Components

Foundations are the visual elements needed to create engaging end-to-end user experiences. This includes guidance on iconography, typography, layout, and color.

‍This foundation is utilized in the creation of all other elements and components of the design system. The foundational styles were distributed via design tokens and Figma Team Libraries.

check out our component building process

Product Audit

For all components, we started by auditing every product to take inventory of where and how components were being used. The impact and frequency of use made certain UI elements eligible to be components.

Review Variants

We met as a team to review all instances of a potential component. We weighed the potential value of it and how we imagined users would utilize it. Not all components reviewed were built. But for those that did we open JIRA and in the backlog it goes!

Build in Figma

The JIRA ticket gets pulled by a designer and it’s off to the races! Our process usually included building, reviewing, and testing our components in Figma. All components were checked for adherence to foundational elements of the design system and if maximum potential was being reached.

Documentation

For our documentation needs we reviewed a few different Design System Hubs, such as Zeroheight and Gatsby, but Supernova won our vote. We could hook our Figma design files directly into Supernova to save production time and decrease imperfections in design quality.

‍We worked with our developers to implement Storybook components to provide live previews to document users. Supernova also provided exporters for React code that we could potentially use in production for Discount Tire products. Effectively we had a direct Figma to production pipeline in place.

how did we make our documentation shine?

Site Map! Everything in
the right place.

We wanted to keep our release 1 documentation light so that users aren’t overwhelmed with a bunch of knowledge to learn. We drew inspiration from the way Discount Tire organically segmented its products with the enterprise and commercial segments drawing from a core set of values or principles. Our values and principles for the system are the foundational pieces that the rest of the design system stood upon.

Custom CSS. Because we can.

Supernova comes with a pre-built template to provide a no-code solution for designers. However, we took advantage of the ability to inject custom CSS into the website to give the site a Discount Tire look and feel. The resulting website anchors the user in the Discount Tire environment while not actually in a Discount Tire owned space.