Cars.com Spark Design System

I managed a team that researched, built, and launched a design system for Cars.com.

Spark Design System, for Cars.com

Current homepage for the Cars.com Spark Design System at spark.cars.com.

Cars.com was working from a partially used and integrated pattern library for multiple years before we were finally given the go-ahead on the building of a proper design system.

Spark color page

Spark color reference page

As Design Manager, I oversaw two direct reports – an interaction designer and a visual designer – and had a player-coach role as the primary developer on the team as well.

We spent around 3-4 months researching with current users, conducting working groups and gathering competitive analysis. My team provided valuable support in auditing current patterns and collecting information that became vital to making decisions around the building of a new design system.

Spark usability standards

Spark usability standards reference

As the primary frontend developer on the project, I created the documentation site with Hugo, an open-source static site generator, and created and integrated a library of design tokens for the site and for our product teams. I was able to extend the software – which is traditionally used for blogging – to become a robust and performant documentation site and portal for our design and engineering teams.

The building of the design system also began during a company brand realignment, which allowed us to test and prove the mettle of our system and libraries by integrating new design elements and specs with ease that would distribute out to our product teams.

Spark layout guidelines

Spark layout guidelines

Eventually, with a move to and adoption of new design software in Figma, we have integrated Figma embeds into our documentation to represent a single source of truth for examples and specifications. This has prevented misalignment of examples, and allows the Figma libraries to be the sole reference for design.