Autotrader Illustrations

Illustration style for Autotrader. Created to work throughout the entire product experience, from UI placements on the website and mobile app, to marketing and social applications.

Hero illustration featuring a white SUV positioned in front of a stylized city skyline

These illustrations help to break up the images and text that make up a majority of the content on the site, and bring some fun, personality, and color to the brand. The style consists of three main elements: vehicles, people, and environments, as well as spot illustrations for placement within the UI where space is limited.

UI of Autotrader login screen showcasing all elements of the illustration style


Vehicles

The vehicles needed a unique look and feel to everything else in the market. Utilizing a semi-realistic style that could help compliment the tone of the Autotrader brand and voice.

Mobile app interface
Autotrader illustration of a gray minivan parked at a car maintenance shop with service technicians Autotrader illustration of a red convertible driving on a scenic desert road with mountains in the background
Autotrader mobile app empty state screens featuring illustrated vehicles in various scenarios Autotrader illustration of a blue pickup truck parked on a sandy beach with ocean and palm trees Collection of Autotrader empty state illustration examples showing various vehicle and scene compositions


People

Establishing a character design style that was not overly trendy or cartoonish was tough to get right, but the inclusion of people helped to establish some humanity and relatability to the scenes.

Autotrader illustration character designs showing a diverse group of illustrated people in various styles and poses Autotrader character development sketches and iterations showing different figure poses and expressions Additional Autotrader character development sketches and design variations for illustrated figures Autotrader illustrated characters integrated into mobile app interface and user experience design Autotrader mobile app onboarding screens featuring illustrated characters and welcome messaging


Backgrounds

Background environments were created to help establish a setting for these vehicles and people to live in. Placing a vehicle in front of a dealership, city, or landscape helped to ground them further in reality.

Autotrader background environment illustrations showing various settings including cityscapes, dealerships, and landscapes Autotrader empty state illustration showing an illustrated dealership exterior storefront


Spot Illustrations

Spot illustrations are a simplified, more literal interpretation of a single concept. These images are smaller, and usually used for entry points or to represent one subsection within a larger group. They don't include people, or background imagery and there's less detail within objects.

at home services spot illustrations
Grid of four Autotrader spot illustration examples showing simplified vehicle and scene compositions Grid of four Autotrader spot illustration examples in various color palettes and styles Grid of four additional Autotrader spot illustration examples for UI placement


Style Guide & Illustration Library

A style guide and illustration library for all of the various components within the library was created. This would provide information on best practices of how and when to use certain elements, instructions on creating new pieces, and establish rules of what to do and not do.


The illustration library was built in Figma so that designers across Autotrader teams could plug in and compose illustrations with the various elements where appropriate.

Figma Illustration Style Guide figma library - cars
at home services spot illustrations

More Work