Web

Cars.com “Owner’s Manual” Style Guide & Pattern Library


I was part of a team responsible for creating & defining the company’s first ever product style guide and pattern library called the “Owner’s Manual”. Since it serves as a resource for quick referencing and implementation from developers and product stakeholders we kept all calls to action out in the open. The results of this effort are a significant decrease in the amount of definition, discovery and development time as well as visual consistency across all cars.com products.  It also increases the potential of products making it to market ahead of the competitors. 

The success of the “Owner’s Manual” was going to be heavily dependent on a solid, well thought out process. Working with the team I was able to put this visualization together of how we could better implement it in an agile development environment.   

OwnersManualFlow-V2

This was the original  design for the landing page. It was ultimately seen as too complex to be a quick reference guide but I always felt pretty good about the direction.

We worked as team to implement and improve all of the cars.com components and patterns. The following is a breakdown of  just a few of these components I focused on specifically. 

Button System

Editorial Lists

OM-Lists

Tags and Filters

OM-tags-filters

Alerts, Messages, Warnings

Missing Image Variations

OM-missing-image-variations

Accordion menu

 Dealer Vehicle Image Gallery

OM-VDP-Responsive-photogallery

Swippable Editorial Data Tables

Responsive-data-tables






Recent Portfolios