Smart Vehicle Lookup
Component Design & Validation
Solving a fundamental knowledge gap — most drivers don't know their exact vehicle trim. A tag-based dynamic filter lets users browse to their car rather than recall precise specs, cutting early-stage abandonment significantly.
The Core Insight
Most people don't know their car's exact trim
Through user research with our UX research vendor, we discovered a fundamental assumption failure: the auto quote journey assumed users knew their vehicle's exact trim, transmission type, and drivetrain. In reality, most don't — especially new drivers and those who purchased secondhand.
The existing typeahead required a precise string: "2021 Honda Accord Sport 1.5T FWD CVT" — and failed if any part was wrong. This caused abandonment at Step 1 before users ever saw a price.
"Why are we asking people to recall information they've never had to know?"
Research sessions: users saying "I know it's a Honda Accord from 2021, but I have no idea what trim." The solution wasn't to educate users on vehicle specs — it was to design around that knowledge gap entirely.
The Problem
A typeahead that punished normal users
Single Precise Entry Required
Required users to type their exact vehicle in one field. Any mismatch = zero results or wrong options. No recovery path.
Knowledge Gap Assumed Away
Most users know year + make + model — not trim, transmission, or drivetrain. The form demanded expert knowledge to proceed.
Especially Painful on Mobile
Typing a long precise string on mobile with autocorrect was a friction multiplier. Drop-off was highest on mobile devices.
❌ Old — Precise String Required
✓ New — Tag-Based Smart Filter (My Design)
Smart Vehicle Look-up
Showing 6 matches — add "Sport" to narrow to 2
"Entering '2021 Honda Accord' showed 6 models. Adding 'Sport' narrowed it to 2 — and users recognised their car immediately."
— Usability test observation, Surbhi Mahendru
The Solution
Browse, don't recall — a component that meets users where they are
Individual Tags, Not a Single String
Each known detail (year, make, model, trim) is added as a separate tag. Users add only what they know — the system narrows results with each tag. No single point of failure.
Real-Time Dynamic Narrowing
As each tag is added, results update instantly. "2021 + Honda + Accord" shows 6 models. Adding "Sport" narrows to 2. Users browse to their vehicle rather than recall it perfectly.
Contextual Sub-Labels
Each result shows plain-language details: "4-cyl · Automatic · Front-wheel drive." Users identify their car by description, not by technical spec string alone.
The Mobile Insight — Contextual Responsive Design
Post-launch usability testing revealed mobile users preferred a three-dropdown format — similar to competitors. Managing tags on a small screen had higher cognitive load than anticipated. This led to a responsive adaptation: smart tag filter on tablet and desktop, traditional three-dropdown on mobile — same database, two presentations. Design is never finished.
Impact & Learnings
What the data and testing revealed
Early Completion Rate
Smart tag filter significantly improved Step 1 completion for desktop and tablet users post-launch.
Results from 4 Tags
"2021 + Honda + Accord + Sport" = 2 precise results. Eliminates guesswork for most vehicles entirely.
Mobile Insight Unlocked
Post-launch testing revealed mobile users preferred dropdowns — leading to a responsive variant strategy.
Context Changes Everything
The same component that delighted desktop users frustrated mobile users. Patterns aren't universal — they're contextual. Test in the environment your users will actually use the product.
Browse vs. Recall is a Fundamental UX Decision
Many forms ask users to recall information they don't have. Switching to browse patterns — especially for complex product databases — is often the highest-impact change you can make.
Launch is Not the Finish Line
The mobile insight only emerged post-launch. Building in a usability testing cycle after launch — not just before — is essential. This component went through three iterations in six months.
Final Reflection
"Design is never finished — each insight shapes a more intuitive experience."
The Smart Vehicle Lookup proved that a single well-designed component can meaningfully change a product's funnel performance. But it also taught me that "correct" design isn't static — it's responsive to context, device, and evolving user behaviour. The most valuable outcome wasn't the completion rate improvement — it was the usability insight about mobile patterns that shaped future component decisions across the Aviva design system.
Project Screens
Design Screens & Deliverables
Click any placeholder to upload your project screenshots. Supports JPG, PNG, WebP.
Full-Width Screen
Vehicle Lookup — Main Flow
Click to upload screenshot
Component States
Desktop — Smart Tag Filter
Click to upload
Mobile — Dropdown Variant
Click to upload
Additional Screens
Screen 3
Click to upload
Screen 4
Click to upload
Screen 5
Click to upload
💡 For permanent images, replace .img-slot divs with <img src="..."> elements in the HTML code.
Design Files
Project Assets & Files
Component deliverables for the Smart Vehicle Lookup. Update links to your actual files.
Component Figma File
Smart Vehicle Lookup component with all tag states, dropdown variant, and interaction documentation.
Interactive Prototype
Clickable prototype showing the tag filter flow — desktop and mobile responsive variants.
Usability Test Report
3 rounds of usability testing findings including the mobile insight that drove the responsive variant.
Contact surbhi.contactme@gmail.com to request access.