Frontend × API Integration × UX

License Plate Vehicle Search

A flexible vehicle lookup experience designed for cases where customers can't provide a VIN. License plate becomes the primary key, GraphQL powers dynamic attribute matching, and progressive refinement turns "no exact match" into "here are your closest options."

Role
Senior Frontend Engineer
Timeline
Oct 2025 – May 2026
Stack
React · TypeScript · GraphQL
Status
Shipped

The Problem

At Walmart, many customers trying to purchase vehicle-related products don't have their VIN (Vehicle Identification Number) readily available. VINs are long, hard to remember, and not always visible without getting out of the vehicle.

The existing system defaulted to VIN-first lookup, which created a dead-end for customers without a VIN. They'd hit a wall: "We need your VIN. Sorry." Lost conversion opportunity.

License plate, on the other hand, is always visible on the vehicle and easy for a customer to read and remember. But the backend data wasn't structured for flexible plate-based lookup with fallback refinement.

The Opportunity

Make license plate a first-class lookup method. When a plate doesn't yield an exact match, instead of failing, offer progressive refinement: choose a year range, body type, bed length, fuel type. Turn "no match" into "pick your vehicle from these options."

This required:

Product Decisions

License plate as a primary lookup method

Many customers don't have a VIN handy or can't remember it. License plate is always visible and memorable. The system needed to support this as a first-class lookup, not an afterthought.

Progressive refinement over false negatives

Instead of failing when exact matches don't exist, the flow progressively refines: license plate → year range → body type → bed length → fuel type. Better to show 5 possible matches than zero.

Dynamic attributes per vehicle class

Trucks have 'bed length' and 'aspiration.' Sedans don't. The form needed to dynamically show/hide fields based on the vehicle classification, not show an overwhelming 20-field form.

Accessible filtering, not model lookup

Customers filtering by features (high-capacity bed, fuel efficiency) is how they actually think. Model names are internal taxonomy. The UI prioritizes feature-based search.

How It Works

License plate ingestion

Customer enters plate + state. System queries a third-party registration database to extract base year, make, body type.

GraphQL dynamic schema

One query returns the matching vehicles AND the optional attributes available for that class (bed length, aspiration, transmission type). Front-end renders conditionally.

Refinement flow

If no exact matches, user selects from available year ranges, body types, then feature filters. Each selection updates the result set in real-time.

Result confidence

Each result is tagged with confidence (exact match vs. refined). Highest-confidence results ranked first. Customer knows when the system is guessing.

What I Built

Current State

Status
Shipped
Implementation scope
Frontend + GraphQL integration
Browsers tested
Chrome, Safari, Firefox (mobile & desktop)
Accessibility
WCAG 2.1 AA compliant

Roadmap

License plate + VIN hybrid lookup

Single form supporting both VIN and license plate, with backend auto-routing to the correct resolver.

✓ Shipped

Dynamic attribute filtering

Vehicle-class-aware form that shows only relevant filters (bed length for trucks, not sedans).

✓ Shipped

Progressive refinement UX

Multi-step flow with confidence scoring and clear messaging when results are narrowed vs. exact.

✓ Shipped

Performance optimization

GraphQL query batching and caching to reduce latency on refinement steps.

Next

Mobile-optimized refinement

Bottom-sheet or modal-based filtering for mobile to preserve screen real estate.

Future

Tech Stack

ReactTypeScriptGraphQLTailwind CSSForm state managementAccessibility (WCAG/ARIA)