Autotrader
Illustration System

UI/UX Design Illustration Motion Design
Autotrader blue cityscape scene with illustrated buildings and vehicles at night

An illustration system for Autotrader, built to span every product experience. From website and mobile app UI to marketing and social placement.

Three core elements: vehicles, people, and environments — plus a library of spot illustrations for tighter UI placements.

Four illustrated Autotrader vehicles shown in different color palette variations

Vehicles

A semi-realistic illustration style, distinct from anything else in the automotive space. Designed to feel at home within Autotrader's brand without competing with photography.

Autotrader illustration system applied across multiple mobile app screens
Orange illustrated truck parked on a coastal road White illustrated minivan at a suburban dealership
Illustrated dealership exterior with cars on a lot Autotrader mobile app screens featuring vehicle illustrations
Red convertible on a scenic desert road
Simplified vehicle spot icons for Autotrader UI placements Technical cutaway drawings of vehicle exterior and interior details
Autotrader Buy Now online car purchase scene

People

Character design that avoids cartoon extremes. Grounded enough to feel real, yet stylized enough to belong within the vehicles and environments.

Diverse group of illustrated character designs for the Autotrader people library
Pencil sketches of character figures holding mobile devices Pencil portrait sketches exploring facial expressions for character design
Autotrader Sell Your Car Center UI with character and vehicle illustrations applied
Autotrader illustration scale system
Autotrader mobile app onboarding screens featuring character illustrations
Illustrated people used in Autotrader mobile app context

Backgrounds

Environmental settings that anchor the system in familiar moments — a dealership lot, a city street, an open road. Context that makes each scene feel earned rather than generic.

Overview of background environment types: city, dealership, and natural settings
Autotrader dealer contact form empty state with illustration
Illustrated urban cityscape used as a vehicle background environment

Spot Illustrations

Simplified, concept-driven illustrations for tight UI placements — entry points, empty states, and sub-navigation. No people or backgrounds. Just the idea, distilled.

Spot icons applied within Autotrader At Home Services UI
Autotrader spot icons: badge, warning, shield, and sparkle Autotrader spot icons: steering wheel, 360 view, tow truck, and mobile form Autotrader spot icons: crash, star rating, price thumbs up, and diamond
Spot icons applied within Autotrader vehicle detail page listing UI Autotrader spot icons: paint brush, chassis, tire, and umbrella
Empty state screens in Autotrader mobile app with spot icons

Style Guide & Illustration Library

A comprehensive style guide documenting usage rules, component definitions, and instructions for extending the system — establishing what to do, and what not to.

The library lives in Figma, giving teams across Autotrader a shared source to compose and extend illustrations where needed.

Kelley Blue Book
Icons & Illustrations