Cars.com - DealerCenter

Summary

The Cars.com Dealer Center was designed to help dealers manage their inventory more efficiently and to understand the value generated by their relationship with Cars.com. Used by both internal sales and operations representatives, as well as dealer users, the Dealer Center interface had numerous usability issues when I was tasked with redesigning the application in 2011. My focus was on transforming a largely ineffective web app into a powerful tool that provided meaningful data analytics and insights.

Core Tools

• iRise
• Photoshop
• Omnigraffle

Problems

Car dealers and their consultants analyze several dimensions to assess inventory quality and advertising effectiveness. The existing web app did not support easy analysis or good decision-making.

Inventory Age

Inventory incurs costs as it ages on the lot. Most dealers have aging policies that are enforced with varying degrees of discipline. Greater transparency on the current age of all inventory helps dealers manage their stock more effectively, reducing costs associated with aging vehicles.

Price Quality by Age

In the past, dealers often set list prices using a “cost-plus” formula. Today, savvy dealers understand that value based on features, not arbitrary costs, drive price. By comparing inventory units based on key attributes (Model Year, Make, Model, Mileage, features, etc.) to similar units at other dealers, they can price and move inventory more competitively. The old system lacked these comparative insights.

Inventory Photo and Video Quality

Quality photos are critical to consumers during the online shopping experience. However, many vehicles were listed with poor quality photos or none at all. The existing app did not effectively highlight vehicles needing better visual representation.

Description Quality

A price and a picture can only convey so much. High-quality descriptions are vital for driving SEO traffic and engaging potential buyers. The existing system did not help users identify or improve poor-quality descriptions.

Solutions

Improved Storytelling and Charting

By combining a chart depicting inventory units grouped into a dealer’s aging policy buckets, users were immediately presented with a visual indicator of inventory health. Additional information on each bar told the story about quality along the key dimensions of Price, Photos, Video, and Notes.

Interaction Design and Filtering

The aging inventory bar chart allowed users to drill into each section and filter the inventory report below. Although there was no mandate for mobile optimization, we ensured that the chart was touch-friendly, working well on tablets and minimally on smaller screen phones.

Rich Visual Report Cues

Data grids are often a necessary evil in a SaaS environment. Our focus was on making the grid as scannable as possible by adding colors and symbols to qualitatively report on inventory health. Initially, we used a red and green color palette, but testing showed it created an undesirable “Christmas tree” effect. We opted for a more subtle visual vocabulary, which testing confirmed conveyed the desired message and influenced user behavior.

Updated Navigation Visual Design

We streamlined the navigation bar from taking up 160px of vertical space dominated by a large logo to a sleek ~40px, providing more room for users to get actual work done.

Additional Features

To address the strategic future, we wanted to answer the user’s question: “What is the value of performing these activities—taking photos, pricing competitively, writing descriptions, etc.?” The charts began to answer this by rendering two KPIs over the recent past that are important to the dealer. This MVP release proved valuable through testing, but further design and discovery efforts were needed to uncover interesting workflows and potential issues with correlating unrelated data points.