KBB
Third-Party
Integration

Company

DealerOn

Type

B2B, B2C

Role

Lead Product Designer

Tools

Sketch Pad, Adobe XD, Miro, Maze

An important step for a consumer in the digital retailing experience is valuing their trade-in. Kelly Blue Book (KBB) provides a standard automotive price guide for dealers and consumers alike. They do this by offering third-party integration (TPI) for car dealers to be able to evaluate and get accurate trade-in offers for consumers.

The Challenges

Create a seamless customer experience within the digital retailing tool that integrates the Kelly Blue Book API and Allows shoppers to use either Year Make Models and trims, mileage and condition, VIN to populate an estimated trade-in amount of their current vehicle.

My Role

I lead the design process with a special focus on creating a personalized customer experience and designing the interface. I collaborated with the Product Manager and Software Engineer for this project.

Interview

I usually call this my discovery phase as it reveals what works and what does not from the user’s perspective. This usually takes approximately 20-30 minutes and included topics to get to the core of what users are trying to do and what their problems are.

Some of the questions I asked were:

Have you ever buy a car online?
Have you ever go to the dealership to buy a car?
What are the challenges you face?
Which do you prefer, going to the dealership or shopping online? Why?
Have you ever trade-in your vehicle?
Did you trade-in online or at the dealership?
Tell me about your experience when trading in your vehicle.
What features would you like to see that’ll make your experience smoother?

Competitive Research

I studied a trade appraisal process across different dealership websites to identify patterns and how information was laid out to users.

They allow users to either use their VIN, License plate, or Year, Make, Model, and Trim to get an estimate.
They used a wizard to show the next step.
They used a chart to explain trade-in offers.
They all have a disclaimer on their estimator.

Persona

The insights from my user research gave a clear understanding of who my target audience will be and created a persona.

User Flow

To define the structure of the application, I created a user flow to highlight how users would navigate through the trade process. My focus here is how users would ultimately put in their vehicle information and get an estimated trade offer.

Wireframes

UI DESIGN

After multiple iterations from the wireframes, it's time to start adding some colors

Get Trade Appraisal

The landing page of the slideout allows users to either input their known estimated trade-in or click on the CTA to get an accurate appraisal.

Vehicle Condition

The quote summary page shows the quote ID, two line items, multiple checkboxes, buttons, and lead time options.

Vehicle Features

The application is designed such that it preselect some features for the user based on the inputted vehicle information. Users can also select more features or uncheck some of the features as they deem fit.