
Intro
Vanarama
Lead Product Designer
Timeline
8 Weeks
Team
PM, 2 Engineers
My Scope
Behavioural analysis using Hotjar heatmaps and session recordings
CMS marketing slot integration across key pages, operable by marketing without engineering dependency
Baseline and validation usability testing via UsabilityHub
Decision mapping across search, derivative, and product pages
UI design across all three stages of the journey
The Challenge
Outcome Snapshot
45%
Reduction in search page bounce rate
32%
Increased conversion to product pages.
35%
Increase derivative page engagement
48%
Reduction in delivery calls enquires
Research
Original Screens

Usability Testing
Only 1 in 10 respondents found the search layout effective
70% failed to locate delivery time without additional clicks
40% abandoned the derivative task before completing it
Only 20% found the derivative page clear enough to choose a variant
Competitive Analysis

Customer Service Insight
Strategy
Search Results
Users browse vehicles
Can I find a vehicle worth considering?
Requires specs, availability, delivery time, and filtering at card level
Derivative Page
Users explore vehicle groups
Which variant is right for me?
Requires imagery, comparable specs, and a decision anchor
Product Page
Users opens vehicle details
Am I confident enough to commit?
Requires social proof, process clarity & summary that builds as they configure
The Wireframes
New Search Page
Uninformed review section taking focus
No multi images
No car spec info
No delivery context
Delivery timeline added
Scrollable images on cards
Car spec comparison info
Marketing CMS section
Marketing CMS - plan to page
Larger scrollable images
Car model & spec added
Car logo added for scannability

New Definative Page
New Product Page
The Design
The Design Building Blocks
Status bar creates immediate hierarchy, delivery & availability first
Consistent image ratio across every card makes comparison simple
Spec icons informative without adding visual noise
Manufacturer logo, price, brand & commitment in one place
Orange CTA consistent across the grid, a clear action
AA banner breaks the grid intentionally without disrupting hierarchy

Future Proofing
Hot Offer icon and delivery badge paired, urgency and reassurance in one bar
Full-width lifestyle imagery sets an aspirational register the card grid deliberately doesn't match
Brand logo and model name at hero scale, authority at the moment of first impression
Card grid drops back to consistent treatment, hierarchy clear without being heavy-handed
Before vs After
Future Proofing
Swipeable gallery keeps imagery prominent but doesn't takeover
Six key specs readable in under three seconds
Trustpilot social proof at the right moment
Order summary panel makes the deal feel distinct & deliberate
Full-width orange CTA matched to the commitment being asked
The Impact
Reusable components
CMS slots and filtering patterns added to the design system
Reflections
Operational data is user research with a cost attached — every support call is a design failure with a price tag
Empty UI is never neutral — absence signals incompleteness in high-consideration purchases
When earlier stages do their job, later stages need less















