Using illustration

We use illustrations to enhance our storytelling and create a bridge between our product language and lifestyle-focused imagery.

A series of 4 mobile screens with form sheets containing illustrations from different product categories.

When to use illustration

Illustration works well in representing broad categories, abstract ideas, or complex processes that may be challenging to convey through photography or iconography alone. Illustration can also add a touch of whimsy and color to capture attention and evoke emotion. It's most effective when balancing realism and creative expression and most often used for education, celebration, null states, and categories. Use illustrations sparingly in the product experience to avoid dilution and overshadowing of content. All illustrations must undergo mandatory review by the OX team during office hours to ensure optimal use.

Areas of use

Onboarding

Welcome users and introduce them to new features and concepts.

Celebration

Congratulate users on their wins and evoke positive emotions along their journey.

Null states

Indicate empty states and evoke a sense of delight during system errors.

Categories

To visually represent areas of our product that can be navigated or selected.

Education & onboarding

Illustration works well in representing broad categories, abstract ideas, or complex processes that may be challenging to convey through photography or iconography alone. Illustration can also add a touch of whimsy and color to capture attention and evoke emotion. It's most effective when balancing realism and creative expression and most often used for education, celebration, null states, and categories.

In-page education

Feature introduction cards introduce users to new features or programs, offering a way to learn more or try them out. They always use a neutral background and blue button to make it clear the message is from eBay.

A mobile and desktop view of the eBay application and site, showcasing an eBay Motors education card
The illustration features a mechanic in a blue uniform working on a salmon colored-car with the front hood propped open. The mechanic is retrieving a car part from an eBay-branded cardboard box, with two tires stacked to the left of the box.

Modal onboarding

A Seller page is shown on mobile and desktop screen sizes. On mobile, a full sheet is displayed with a Welcome to eBay Selling message. An illustration of two people facing each other in discussion is shown, with the two people gesturing to a blue Sold item tile of a white collard shirt with green and black stripes in between them. 
On desktop, a modal is shown with the same illustration.

Mobile and Desktop Seller pages are shown. On mobile, a full sheet is displayed with a Welcome to eBay Selling message. An illustration of two people facing each other in discussion is shown with a blue Sold item tile of a white collard shirt with green and black stripes.  
On desktop, a modal is shown with an illustration of two people facing each other in discussion is shown with a blue Sold item tile of a white collard shirt with green and black stripes.
A half sheet on the eBay mobile app with the top half showcasing an illustration of a person in a green hoodie smiling on their phone, with various products and icons surrounding their head against a yellow background. The bottom half contains text in black and a CTA in blue against a white background.

Half sheet

A full sheet on the eBay mobile app with the top half showcasing an illustration of a person in a green hoodie smiling on their phone, with various products and icons surrounding their head against a yellow background. The bottom half contains text in black and a CTA in blue against a white background.

Full sheet

A full color sheet on the eBay mobile app with the top half showcasing an illustration of a person in a green hoodie smiling on their phone, with various products and icons surrounding their head. The bottom half contains text and a CTA in brown, all against a yellow background.

Full color sheet

Multi-step modal onboarding

Multi-step modals are used for education and onboarding that need more than 1 step to explain. This may include explaining specific features or steps in a complex process or gathering multiple types of information from the user. Multi-step modals also accommodate an image and can use neutral or colored backgrounds. To ensure legible text and not-too-jarring transitions between steps, full-color sheets aren't available for multi-step modals.

A Wheels & tires page is shown on mobile and desktop screen sizes. On mobile, a full sheet is displayed with a Confirm your vehicle message. An illustration of a person in a purple suit standing to the left of an orange car, with a blue bigger car and a white smaller car sitting to the left and right of the orange car.
On desktop, a modal is shown with the same illustration.
A half sheet on the eBay mobile app with the top half showcasing a person wearing a green sweater and beige pants sitting on a brown chair holding a beige sneaker to their face. Three eBay cardboard shipping boxes are stacked to the left and right of their feet, with a red ceramic pot and a stack of orange trading cards sitting in front of their feet, all illustrated on a green background. The bottom half contains a walkthrough process with text in black and grey against a white background.

Half sheet

A full sheet on the eBay mobile app with the top half showcasing a person wearing a green sweater and beige pants sitting on a brown chair holding a beige sneaker to their face. Three eBay cardboard shipping boxes are stacked to the left and right of their feet, with a red ceramic pot and a stack of orange trading cards sitting in front of their feet, all illustrated on a green background. The bottom half contains a walkthrough process with text in black and grey against a white background.

Full sheet

Celebration

Illustrations are a wonderful way to celebrate user wins and deliver personalized moments of surprise and delight. We can introduce celebratory moments when they accomplish goals, or to build anticipation for a product that is about to arrive.

Mobile and Desktop Seller pages are shown. On mobile, a full sheet is displayed with a You’ve leveled up! message. An illustration of green handheld gaming device with grey buttons sits on a neutral grey background. The screen on the gaming device shows three copper coins with the word ‘YAY’ written in white on top of the coins, all on a blue background.  
On desktop, a modal is shown with the same illustration.
A half sheet on the eBay mobile app with the top half showcasing an illustration the earth against a lime background. A black location icon sits on the map with a brown eBay shipping cardboard box rotating around the globe. The box is followed by a black dotted line to signify the movement of the box. The bottom half contains text in black and a CTA in blue against a white background.

Half sheet

A full sheet on the eBay mobile app with the top half showcasing an illustration the earth against a lime background. A black location icon sits on the map with a brown eBay shipping cardboard box rotating around the globe. The box is followed by a black dotted line to signify the movement of the box. The bottom half contains text in black and a CTA in blue against a white background.

Full sheet

A full color sheet on the eBay mobile app with the top half showcasing an illustration the earth. A black location icon sits on the map with a brown eBay shipping cardboard box rotating around the globe. The box is followed by a black dotted line to signify the movement of the box. The bottom half contains text and a CTA in brown, all against a lime background.

Full color sheet

Null states

Illustrations can add inspiration to empty product areas or evoke a more positive reaction when something goes wrong. Avoid leaving users with a dead end by including a call-to-action. For example, refreshing the page if there was an error or adding favorites to a collection if they haven't yet.

Empty states

We use empty states when users encounter product areas that don’t have any data yet. Empty-state illustrations should represent what would be there and encourage users to take relevant action.

Empty states in the Favorites tab on mobile and desktop. The illustration featured is a white trading card of a soccer player. The empty state sits on a white background with text in black that reads “No favorites (yet)”, and a blue CTA button sitting below the illustration.

System errors

System errors can happen unexpectedly and be frustrating. In these situations, using illustrations that add a touch of humor or relatability helps ease the frustration. Ideally, they should have an action that allows the user to try again or refresh the page.

A system error in the Selling tab on mobile and desktop. The illustration featured is a person wearing a white jacket and orange pants holding an antenna with from a TV showing static. The system error sits on a white background with text in black that reads “We’re getting static”, and a blue CTA button sitting below the illustration.

When no illustration applies

If no illustration fits your null-state needs, you can always use an icon instead. Make sure to use the 64px by 64px icon size—do not enlarge smaller icons in this context.

A null states in the Selling tab on mobile and desktop. An attention icon is featured in grey. The null state sits on a white background with text in black that reads “Something went wrong”, and a blue CTA button sitting below the icon.

Categories

Illustrations visually indicate categories that a user can navigate to or select. This helps with easy identification, which allows users to quickly take action, whether that's exploring, saving, or adding personalized information.

Three smartphone screens show app pages with colored category illustrations: The first screen shows interests: Sneakers, Electronics, Home goods, and Sports. The second screen shows categories: Home Decor, Books, and Tech. The third screen shows sizes: Clothing, Shoes, and Accessories.

Resources

Change log

DateNotes
Jun, 2024
  • Updated to eBay Evo
Dec, 2023
  • Page created