
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
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.
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.
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.
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.
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
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
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
Ran the 4 rounds of prototype testing that measured task success on completing a purchase reservation before development began.
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
Tracked vehicle detail page engagement and financing pre-qualification starts, surfacing the drop-off point the redesign was built to fix.
React
Built the interactive vehicle detail page and step-tracked purchase flow, including the 360-degree condition viewer, for production.
Next.js
Served the rebuilt vehicle detail pages across all 18 lots' inventory with the performance needed for a photography-heavy buying experience.
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

