AutoTrader

A UX/UI direction for vehicle discovery, search results, filters, listing detail, and responsive shopping flows across desktop and mobile.

AutoTrader marketplace search overview screen.
Role

UX / UI Designer

Marketplace flows, listing detail, responsive layouts, filters, and product UI direction.

Focus

Vehicle discovery

Help shoppers search, filter, compare, and understand vehicle listings with less friction.

Surfaces

Desktop, tablet, mobile

A responsive shopping experience that keeps search intent, listing context, and actions aligned.

Mission

Make vehicle shopping easier to narrow down.

Auto shoppers arrive with different levels of certainty, so the experience needed to support broad discovery and precise filtering without making the interface feel heavy.

My contribution

I organized search, listings, and detail pages around decision confidence.

The work focused on search entry, results scanning, filter clarity, vehicle detail structure, responsive behavior, and saved-shopping moments.

Discovery starts broad, then gets precise.

The marketplace needed to help shoppers move from open-ended browsing into practical comparison without losing their criteria or sense of progress.

AutoTrader search entry page with vehicle search controls.
01 / Search entryThe first decision is framed around finding the right vehicle faster.

Search controls are presented as the main action, with supporting content kept secondary to the shopper's intent.

AutoTrader search results page with listings and filtering.
02 / Results scanListings need quick comparison before deep reading.

Vehicle cards, filters, and page rhythm help users compare options without losing the result set.

AutoTrader vehicle listing detail page with image and content modules.
03 / Detail pageDetail pages support a more confident next step.

Image, specs, pricing, and contact paths are grouped so shoppers can evaluate before reaching out.

Search, compare, shortlist, continue.

The UX work treats vehicle shopping as an ongoing decision cycle rather than a single page visit.

Search logic

Filters stay visible enough to refine without restarting.

The product keeps make, model, price, location, and body style close to the results so shoppers can adjust criteria in context.

Comparison

Vehicle cards are designed for fast side-by-side scanning.

Price, image, key specs, and dealership context are prioritized so the user can build a shortlist quickly.

Responsive continuity

Mobile screens keep the same shopping mental model.

The mobile flow protects search, result, and detail hierarchy instead of hiding core decisions in deep menus.

Every screen supports comparison.

The page variations show how homepage entry, filters, saved states, and detail views connect into one shopping journey.

AutoTrader homepage entry point.
Home entryA simple search-led starting point.
AutoTrader filter comparison and search UI.
Filter comparisonCriteria can be adjusted without breaking context.
AutoTrader vehicle detail page.
Vehicle detailSpecs, media, and actions sit in a predictable hierarchy.
AutoTrader saved search or shopping state.
Saved stateReturn paths keep the shopping journey alive.

The shopping flow moves cleanly across devices.

Tablet and mobile screens preserve the same search logic: define intent, compare options, review detail, and keep a route back to the shortlist.

AutoTrader tablet layout.
Tablet layoutThe same marketplace decisions stay reachable on smaller screens.
AutoTrader mobile search flow.
Mobile searchThe same marketplace decisions stay reachable on smaller screens.
AutoTrader mobile results flow.
Mobile resultsThe same marketplace decisions stay reachable on smaller screens.
AutoTrader mobile listing detail flow.
Mobile detailThe same marketplace decisions stay reachable on smaller screens.
Long-form product page

Full marketplace pages were organized into readable product stories.

The long-form exports show how search, content modules, listing density, and decision paths can sit together without turning into visual noise.

AutoTrader long marketplace page export.
Outcome

A marketplace flow that gives shoppers clearer control.

Good search UX helps people narrow the field without feeling boxed in.
  • Search entry points made the marketplace feel more direct
  • Result and listing surfaces were organized around faster comparison
  • Responsive screens preserved the same decision flow across devices