Hero
UX/UI Design
UX/UI Design
Automotive Retail

End-to-End Online Car Buying UX for a Regional Dealer Group


Let's Connect

Overview

What we built

An 18-lot used-car dealer group's website was a lead form wearing a car-shopping skin: no condition detail, no trade-in estimate, no financing start, just a call waiting at the end. We designed a full step-tracked buying journey, and fully online reservations reached 14% of sales.

In plain terms: shoppers landed on vehicle pages that showed a car but told them almost nothing they needed to decide on it. They could not inspect condition beyond a handful of photos, could not estimate what their trade-in was worth, and could not start financing without calling a lot. Nearly every visit ended the same way, a form fill followed by days of phone tag, and analytics showed younger buyers dropping off at exactly the point the site asked them to pick up the phone instead of continuing online.

We interviewed 16 recent buyers and mapped how a purchase actually happened offline, then designed a vehicle detail page around a standardised 360-degree photography spec with condition annotations, so shoppers could inspect a car the way they would on the lot. A step-tracked flow carried them from trade-in estimate through financing pre-qualification, deposit and delivery or pickup scheduling, validated through 4 rounds of prototype testing. Prototype task success for completing a reservation reached 91%, page engagement time rose 2.3x, financing pre-qualification starts climbed 57% in the first quarter, and fully online reservations reached 14% of total vehicle sales within 6 months.

The Problem

Lead forms, not purchase flows

The dealer group's site looked like a car-buying website but behaved like a lead-capture form. Shoppers browsing across 18 lots could see a photo and a price, but nothing that let them evaluate a specific vehicle's actual condition, work out what their own car was worth against it, or understand what financing might look like before they committed to a call.

That gap pushed every serious shopper toward the phone. Nearly every visit that showed real buying intent ended in a form fill followed by days of phone tag with a salesperson, a process built for an era before shoppers expected to do more of the purchase themselves. Analytics confirmed the pattern was costing the group its youngest buyers, who abandoned at exactly the point the site asked them to call rather than continue online.

None of the underlying steps, checking condition, estimating a trade-in, starting financing, were things the site made impossible. They simply were not built into the online experience at all, which meant a shopper's only way to answer any of those questions was to stop browsing and start a phone conversation the site had given them no reason to trust would be quick.

No condition detail

Shoppers across all 18 lots could see a handful of photos but nothing that let them properly inspect a specific vehicle's actual condition before contacting the dealer.

No trade-in estimate

The site gave shoppers no way to estimate what their own vehicle was worth, leaving a key part of the purchase decision unanswered until a phone call.

Financing stuck offline

Starting financing required calling a lot rather than anything the site itself supported, adding friction at exactly the step that turns browsing into buying.

Younger buyers dropping off

Analytics showed younger buyers abandoning specifically at the point the site asked them to phone in, rather than continuing the purchase online.

What it was costing them

Every visit that ended in a form fill and days of phone tag was a shopper the group had to re-engage manually instead of converting while intent was highest, and across 18 lots that meant real sales staff time spent chasing leads a better flow could have carried further on its own. The pattern hit hardest with younger buyers, who simply left rather than wait for a callback.

The Solution

Step-tracked online buying journey

We started with 16 interviews with recent buyers and mapped how a purchase actually unfolded offline, from first walking a lot to driving away, so the online journey could mirror steps shoppers already trusted rather than invent new ones. That mapping made clear where the site's gaps sat against a real purchase, not just against a generic ecommerce checklist.

The vehicle detail page became the anchor: a standardised 360-degree photography spec with condition annotations, so every one of the 18 lots' vehicles could be inspected online the way a shopper would inspect it in person. Around that page we built a step-tracked flow covering trade-in estimate, financing pre-qualification, deposit and delivery or pickup scheduling, so a shopper could move through the entire purchase without needing to call first.

Four rounds of prototype testing validated each step of the flow, from the 360 viewer through to deposit and scheduling, before any of it reached development, and the work handed off to engineering with a full Figma component library so the built product matched the tested design exactly, without a gap between prototype and production.

Key decisions

01

Map the offline journey first

16 interviews with recent buyers and a map of the offline purchase journey ensured the online flow mirrored steps shoppers already trusted rather than a generic checkout.

02

Standardise 360-degree photography

Every vehicle across the 18 lots got the same 360-degree photography spec with condition annotations, so shoppers could inspect condition without visiting in person.

03

Track the whole purchase in one flow

Trade-in estimate, financing pre-qualification, deposit and delivery or pickup scheduling were built as one step-tracked flow instead of separate disconnected forms.

04

Validate before handoff

4 rounds of prototype testing checked each step of the flow before development began, catching problems while they were still cheap to fix.

05

Hand off a component library

Development began with a full Figma component library, so the built experience matched the tested prototype rather than drifting during implementation.

Measurable Impact

What changed after launch

By the final testing round, prototype task success for completing a purchase reservation reached 91%, evidence that shoppers could now move through trade-in, financing, deposit and scheduling without needing to call the lot first. Vehicle detail page engagement time increased 2.3x once the 360-degree viewer replaced the old photo gallery, a sign shoppers were finally getting the detail they needed to decide.

The new flow changed buying behaviour after launch too. Online financing pre-qualification starts rose 57% in the first quarter, and fully online purchase reservations, unheard of under the old lead-form site, grew to 14% of total vehicle sales across the 18 lots within 6 months.

Vehicle inspection

A handful of photos with no condition detail

360-degree photography with condition annotations

Purchase flow

A lead form ending in days of phone tag

Step-tracked flow from trade-in to delivery

Financing starts

Financing only available by calling the lot

Pre-qualification starts up 57% in a quarter

Online reservations

No way to reserve a vehicle online

14% of vehicle sales fully online within 6 months

Headline results

Prototype task success for completing a purchase reservation reached 91% by the final testing round

Vehicle detail page engagement time increased 2.3x after the 360-viewer redesign

Online financing pre-qualification starts rose 57% in the first quarter post-launch

Fully online purchase reservations grew to 14% of total vehicle sales within 6 months

Tech & Tools Used

What powered the build

Every tool below earned its place in this engagement. Here is the part each one played.

Figma logo

Figma

Held the vehicle detail page and step-tracked flow designs, including the 360-degree viewer and condition annotation components, through every round of prototype testing.

FigJam logo

FigJam

Hosted the offline purchase journey mapping from the 16 buyer interviews, giving the team a shared reference for how the online flow should mirror it.

Maze logo

Maze

Ran the 4 rounds of prototype testing that measured task success on completing a purchase reservation before development began.

Hotjar logo

Hotjar

Recorded shopper sessions on the live site, showing where younger buyers were abandoning at the original site's call-to-phone step.

Google Analytics 4 logo

Google Analytics 4

Tracked vehicle detail page engagement and financing pre-qualification starts, surfacing the drop-off point the redesign was built to fix.

React logo

React

Built the interactive vehicle detail page and step-tracked purchase flow, including the 360-degree condition viewer, for production.

Next.js logo

Next.js

Served the rebuilt vehicle detail pages across all 18 lots' inventory with the performance needed for a photography-heavy buying experience.

Storybook logo

Storybook

Documented the Figma component library's built counterparts, keeping the production flow aligned with the tested prototype through handoff.

Ready to Build your Automotive Retail Business with UX/UI Design

Ask Byte

Ask Byte

Typically replies instantly

just Now

Hi! I'm OrganByte's assistant. How can I help you today?

AI-generated content may be incorrect


OrganByte

Building innovative software solutions that transform businesses and drive digital success.

© 2026 YourCompany. All rights reserved.