View this on a desktop
Christie
Tang
I was an adventurer like you, until I took an arrow to the knee
When I close my eyes all I see is UI
What would you say y'do here?

TrueCar

At TrueCar I designed several of our core products in New Cars, Used Cars, and Trade-in which touch on all fronts of our business. On the Used Car product, the vehicle detail page displays all information about the specific VIN, including features, price trends, vehicle report, etc. We modernized the look, added several more modules, and focused on what users cared about the most. I also redesigned our search results page, converting a row layout to a grid layout to display more vehicles, and significantly adding to and improving our filter functions. The search results page and the vehicle detail page are the key components to the Used Marketplace. For the New Car experience, I redesigned the build summary page which focused heavily on getting users to convert. Other efforts include building TrueCar’s sketch UI library from scratch, maintaining the library, and giving workshops to the team on how to design with grids and nested symbols.

Problem

Being engaged with all facets of the business meant working with a different product manager and teams. Each of these pages have a lot of user views which meant that the redesign had to carefully consider each stakeholder’s opinions on the requirements and goals.

Solution

Multiple iterations paired with user testing help us to get to the final design. After some A/B testing we made additional tweaks to help with conversion. With all our designs we wanted to make sure that it was responsive and mobile friendly.

Role

Product Designer

Industry

Automotive
Tech

Year

2018-2020

Design Tools

Sketch, Invision, Invision Studio, UsabilityHub, UserTesting

Buzzwords

User Experience
Responsive Design
System Design

CUSTOM STICKY NAVIGATION

Since the vehicle detail page gets so long, I needed a way for users to quickly navigate to parts of the page that they were interested in. The navigation would be a sticky on the left side as the user scrolled down. Scrolling would automatically move the labels, and clicking on a label would act as a page anchor. However, even with all the section labels it was too long for smaller screens. In this custom sticky navigation, labels that are too long would be hidden beneath the three lines, and appear one by one as the user scrolled. The screen on the left shows the concept of the behavior, and the right screen shows the detailed interaction of lines turning into labels.

SOME OLDER ITERATIONS

As with all projects, there were several iterations that came before the final design of the vehicle detail page. Below are some of the early work in progress options for the general layout and information architecture that didn’t make it. The difficulty in this project was trying to find a layout that fit pertinent information above the fold, having a clear call to action, while still highlighting vehicle images.

But what
about mobile
Every PM’s
favorite question
The answer is
almost always,
it just stacks
VEHICLE CARDS

We spent a lot of time testing an interactive multistate vehicle card, where a hover state would trigger more information being shown. These were a few of the options that we considered.

SEARCH RESULTS PAGE

I also redesigned the search results page, which includes the vehicle cards and the filter panel. The filter panel is much more sophisticated in that it will show your selections in a chip as a summary. Interacting with the chips can quickly remove a selected filter when collapsed. Several rounds of A/B testing went into finalizing the vehicle card that worked best for conversions.

MOBILE QUICK FILTERS

Since filters were such an important aspect of the search experience, we wanted to make the popular filters more accessible instead of hiding them all under one “Filter” button. The quick filters drop a tray which allow you to quickly make a selection, and the selection can be viewed upon save.

BUILD SUMMARY

The build summary appears at the end of a configuration flow when the user hits “Shop New” from the home page. It gives the user a summary of their configuration and also a range estimate of how much that specific build might cost. The user is encouraged to prospect and convert from this page to find nearby dealers who would have that configuration.

But what
about mobile
Every PM’s
favorite question
The answer is
almost always,
it just stacks
TRUECAR UI SKETCH LIBRARY COMPONENTS

I built TrueCar’s Sketch library from scratch, and used nested symbols so that our designers could quickly swap things out. I also designed the grid system that worked between designers and developers. Having a basic foundation with the grid and an organized library of components has increased everyone’s work efficiency and accuracy.

Next project
TrueCar Trade
Ooo! Lucky you,
a private section.
This means there’s some good stuff behind here.
Yikes. That wasn’t it.
Struggling? Pro tip, check the cover letter, your email, or just ask me for the password.
Let her sleep for
when she wakes
she will
move
mountains
Napoleon Bonaparte