Skip to main contenteBay Playbook

Generative AI overview

We use AI to superpower the user experience, so we can celebrate—not replace—the human experience on eBay. This framework is rooted in our eBay Responsible AI principles, and it aims to ground our design thinking in honoring and preserving the community we’ve built, while embracing AI in responsible and transparent ways.

Considerations

Extend human capabilities

We use AI as a tool to build enhanced experiences that proactively anticipate someone’s goals in personalized and meaningful ways.

Empower human agency

We give people control over their AI-powered experiences through transparency and awareness.

Ensure accessibility

We design AI-powered experiences that can be used and understood by a diverse group of people of all abilities.

Champion inclusivity

We mitigate prejudice and bias when using GAI to create new images, videos, or texts with a human in the loop.

Uphold accuracy

We confront the uncanny valley and spread of inaccurate information when using GAI through analysis, testing, and planning.

Iterate responsibly

We engage in a system of checks and balances with our XFN partners, so we can move fast and fix things.

Look and feel

Color

One of our tenets is to be transparent and obvious when AI is being used. Color is an important device we use to inform users that AI is at play. We employ the full color gamut as it represents the diversity of our marketplace and the flexibility in which AI can be used. However, not all of the colors need to be used at once and depending on the context, color can be full opacity or less, temporal or consistent, subtle or strong.

Two squares showing color swatches for generative AI inside each. The first has the “AI Gradient Full Spectrum” at the top with each of the core colors that make it up aligned horizontally below. From left to right, they are - AI Yellow, AI Red, AI Purple, “AI blue”, and AI Green”. The second square shows our three other AI gradients aligned horizontally at the top - AI Gradient Purple Strong, AI Gradient Blue Strong, AI Gradient Green Strong. Below those are the subtle versions - AI Gradient Purple subtle, AI Gradient Blue subtle, AI Gradient Green subtle. Below those are visuals of the same subtle gradients on a dark background.

Subtle gradients

We use subtle color gradients comprised of two neighboring colors in the spectrum for backgrounds when introducing AI features and in skeleton loading states while loading AI generated content. We alternate which color to use as loading states throughout a page or flow. We do not use static or persistent gradients in anything except the spectrum icon and images.

Two mobile examples showing subtle gradients being used as loading states. The first shows the background of an assistant module using the subtle blue gradient. The second shows a skeleton loader using the subtle purple gradient.

Strong gradients

We use strong color gradient outlines when introducing prompts. Each prompt introduces itself in a new gradient color and fades to border default in the rest state. We only use color gradients as transitions on shapes, never as persistent color and never on typography.

Two mobile examples showing strong gradients being used as loading states for prompts. Both examples show 3 prompts loading - 1 inside an assistant module and the other inside a chat window. The first two are outlined in gray and the last one us outlined using a strong gradient.

Icon

The icon is another visual device we use to convey that AI is being used to power features in our product. There are three sizes of both variants—filled and outlined. The filled icon should be used primarily, except in cases where the AI icon appears next to other outlined icons. The outlined version has the addition of a “thin” style for explicit use in category pills that also use this style.

Our filled AI spectrum icon in full color in 3 different sizes - 24px, 20px, and 16px.

Filled

Our outlined AI icon in black in 3 different sizes - 24px, 20px, and 16px.

Outlined

Filled icon

Use the filled icon in full spectrum color to indicate that a message or feature is powered by AI. For messages from eBay or buttons that take users to an AI powered experience, the disclaimer tag is not required. However, when generated content is displayed, the icon alone is not enough. We must be more explicit in these cases and use a disclaimer along with the icon.

Two examples using the filled full spectrum AI icon. The first sit inside an education module sitting in front of a string of text that says, “Let’s find the perfect arm chair, Olivia.” with prompts below. The second shows the icon inside a button that says, “Refine” sitting on top of a generated image.

Outlined icons

When AI is an option in a list, such as in menus or quick filters, use the outlined version for consistency with the surrounding icons. The “16 thin” version should only be used in category pills like those at the top of the homepage.

Two examples using the outlined AI icon in black. The first is inside navigation pills on the eBay homepage. Under the search bar, the first pill shows the outlined icon in front of a text string that says, “Chat with eBay.ai”. The second shows a bottom sheet with navigation links inside it. The first uses the outlined icon in front of the same text string.

Using icons

The icon paired with an explicit label like “Generated with eBay.ai” makes it clear to our users what content has been generated or curated by GAI when we have high confidence in the content and there is low risk to eBay. However, in adjacent UI elements, the text-and-icon badging only needs to appear once. For example, when a button leads to an AI-powered feature in the same module, and the module already indicates the presence of AI in text, the icon alone in the button is sufficient. We also use text-only disclaimers when we have low confidence and there is high risk to eBay. Learn more in the Disclosing GAI section below.

Two examples using the AI icon. The first uses the filled AI spectrum icon at the end of a subtitle in full color, trailing the text string “Curated with eBay.ai” on a white background. The second uses the outlined icon in white on top of an image in a marketing banner and also trails the same text string.

Radius

Buttons

Buttons and avatars are fully round.

Three toggle buttons in a horizontal line and each has a different image of a chair style. The first says “Dining” and is in a selected state with a 2px black border around the image. The other two chair images have white background and no border. The second style “Office” and the third is “Dining”. All images have 16px corner radius.

Images

Toggle buttons and images have a 16px radius.

Example of 3 prompts and chat bubble,. Each shape has 3 corners that are 16px corner radius and 1 that is 0px.

Chat

Prompts and chat bubbles have 3 rounded corners and one squared corner.

Disclosing GAI

In order to maintain transparency and mitigate mistakes caused by Gen AI, we are intentional about how and when we disclose it to our customers. Our confidence in the content generated and the risk it may create for eBay will determine the type of disclosure we use, as well as its placement and prominence. Most experiences will have one disclosure but some may have both.

Labels

Labels are used when we have high confidence in the generated content and there is low risk for eBay - they allow us to take credit for the AI being used well on our platform. Labels utilize the full spectrum icon paired with pre-defined text strings that consistently express how generative AI is at work on our platform. These include and are limited to: Generated with eBay.ai, Curated with eBay.ai, and Set by eBay.ai.

Example of a label that says “Generated with eBay.ai” followed by the full spectrum icon in color.

Generated

The string “Generated with eBay.ai” is used when text is generated by AI.

Example of a label that says “Curated with eBay.ai” followed by the full spectrum icon in color.

Curated

The string “Curated with eBay.ai” is used when gen AI curates a set of items .

Example of a label that says “Set by eBay.ai” followed by the full spectrum icon in color.

Set

The string “Set by eBay.ai” is used when gen AI sets an ad campaign rate.

Disclaimers

Disclaimers are used when we have medium/low confidence in generated content and the risk is higher. Disclaimers are generally a single string of legalese used to explain to our customers that the generated content may be inaccurate and to relieve eBay from some of the risk. Disclaimers should be tailored to each use case and written by legal. Make sure to consult with your content and legal partners when creating them.

Two lines of text left aligned that say, “eBay.ai chat may return inaccuracies or offensive language that doesn't represent eBay.”

Voice and tone

Our eBay voice is the personification of our brand, and AI-generated content follows our voice and tone guidelines. Consistency and cohesion build trust and comprehension, so whether you’re reading something written by a person or AI, it should sound the same. We use other signals to disclose when we're surfacing AI-generated content.

And, as always, the tone should modulate to meet the situation.

Visual showing voice and tone framework with three rows. The top row says “Voice” with a box extending left to right that says, “Your close, reliable friend”. THe second row says “Tone” and has 7 boxes aligned horizontally with the following labels from left to right: “Apologetic, understanding, supportive, informative, helpful, celebratory”. The third row has the label, “Context” with two boxes and arrows pointing left and right between them. THe left box says, “Negative experiences” and the right box says, “Positive experiences”.

Decibel levels

When branding AI moments, we have multiple levels of volume available. For louder moments, we recommend using animation, bolder colors, and badging with both icon and text. For softer moments, use just the icon and a temporary background gradient to introduce the module. And for more tactical moments, a simple string of text can tell users all they need to know.

3 UI examples on a scale that shows minimal to prominent from left to right. The most minimal example on the left is a label with the AI icon after it that says, “Generated with eBay.ai”. The second example is an assistant module that has the icon with the text string, “Hey Olivia! What are you looking for today?” on a subtle gradient background. The third, and most visually prominent, example is an education card with gray background and an image above with large full spectrum AI icon and a subtle gradient background behind it.

Components

Education modules

Education modules provide users a short description of a feature with a visual connection to the icon. They can use an icon with background gradient or a single icon.

Two examples of education modules. One is an education card with gray background, blue button, and an image at the top with large full spectrum AI icon and a subtle gradient background behind it. The second is a bottom sheet with full spectrum AI icon centered above a headline, subtitle, and button.

Assistant modules

Assistant modules offer guidance and ingresses into AI generated features. They utilize the full spectrum filled icon to denote they are powered by AI and prompts to help customers narrow down their search and initiate chat experiences.

Two examples of assistant modules. One is at the top of the search results page under the search bar that says, Let’s find the perfect arm chair, Olivia” with full spectrum AI icon in front of it and prompts below. The second is at the bottom of the search page just above the keyboard that says, “Hey Olivia, what kind of arm chair are you looking for today?” with link to “Reply”

Feedback

Giving feedback is a very important aspect of using AI. We should (and in some cases may be required to) give our users a way to tell us if AI generated content is inaccurate, irrelevant, or offensive. We do this by using either a text link or an overflow menu, depending on the context. Use a text link when being explicit is important and an overflow menu when other actions are required. Text next to the thumbs up and down icons should always be clear and descriptive, and can change based on context (i.e. “Helpful” vs “Not helpful” or “Accurate” vs. “Not accurate”).

Two examples of ways we gather feedback. The first is via a text link that says, “Help us improve eBay.ai and provide feedback” with the word “feedback” underlined. The second is via an overflow menu o the right of a section title on a module that has been curated by eBay.ai. The overflow icon is selected with a popover that gives 2 options for feedback - “Helpful” with a thumbs up icon in front of it and “Not helpful” with a thumbs down icon in front of it.

Navigation

Access to the AI chat interface will be accessible in several areas and is contextual based on where the user is in the flow. On the homepage, the sub nav will provide an ingress. On other pages, like VI, the ingress can be found in the overflow menu. Further ingresses may be found throughout the product in-page in AI specific modules.

Two examples of ways to navigate to the eBay.ai chat experience. The first is from a navigation pill right under search field on the homepage. Navigation pill has the stroked AI icon and text string, “Chat with eBay.ai”. The second is via a popover menu that appears when user long presses on an image. In this example, the image if of black sneakers with the same icon and text string. This icon and text string is the first in a list of 5 other actions user can take on the item.

Pre-loaded generated content

We use the same gradient background to introduce pre-loaded generated content. This gives a subtle, temporary, visual indicator that it was powered by AI along with an explicit tagline.

Example of an AI generated module on item page that has been pre-loaded. Module says, “What people are saying”. The text is black and the background is loading in using the subtle green AI gradient.

Loading generated content

For AI generated content that may take longer to load, we use our current Evo skeleton loading framework with the addition of color gradients to lightly call more attention to the area and signal that it’s powered by AI. We also badge AI generated content with the full-spectrum filled icon and explicit text to ensure users understand it’s powered by AI.

A mobile example of an item page with a skeleton loader using the subtle purple gradient showing an AI generated module loading in between the seller description module and “More like this” module.

Real-time content generation

In instances where AI is generating content in real-time, we use a type-on animation where each word is written out one by one to ease wait times and mimic how content is actually being generated.

An example of generative AI writing a description for the seller in real time. The title says, “Describe item” with two test boxes, “title” and “description”. In the description field, the context that has already loaded is written in black, while the word currently being generated by AI is written in light gray with a cursor behind it.

Platforms

3 examples of how the AI shopping assistant window shows up on 3 different screen sizes. The first is full screen on mobile. The second is a side pane window floating in the bottom right corner of the screen on top of an item page on a medium sized browser screen. The third is a large browser screen where the window behaves the same.

Best practices

Color

Use gradients in spectrum icon, prompts, and skeleton loaders paired with neutral text.

“Do” example showing a search screen with the query “Arm chair” typed in to the search field. Multiple suggestions are stacked in black text with gray icons in front of them. The last 2 suggestions have the full spectrum AI icon in front of them also with black text.

Don’t use gradients on typography.

“Don’t” example showing a search screen with the query “Arm chair” typed in to the search field. Multiple suggestions are stacked in black text with gray icons in front of them. The last 2 suggestions have the full spectrum AI icon in front of them and the text also has a gradient applied.

Badging

Only use 1 sparkle icon per module.

“Do” example of a case where only 1 AI icon badge is required. The subtitle of a bottom sheet says, “generated with eBay.ai” followed by the full spectrum AI icon. There is a paragraph of text with 3 action buttons below. None of the buttons contain an icon because the subtitle above is sufficient.

Don’t use multiple sparkle icons in a single module.

Example of a case where only 1 AI icon badge is required but this example shows what not to do, which is use multiple. The subtitle of a bottom sheet says, “generated with eBay.ai” followed by the full spectrum AI icon. There is a paragraph of text with 3 action buttons below. In this example, all three buttons also have icons, which is repetitive.

Feedback

Give clear context as to what the up and down thumbs mean.

“Do” example of a use case where leaving feedback is explicit and concise. There is a text box with generated description that has a section title saying, “Description generated with eBay.ai” and an overflow menu with popover menu that has a thumbs up icon with label “Helpful” and thumbs down icon with label “Not helpful”.

Don’t show the up and down thumbs without any context.

“Don’t” example of a use case where leaving feedback is not explicit. There is a text box with generated description that has a section title saying, “Description generated with eBay.ai” and two icon buttons aligned right. The first is a thumbs up icon with no label and the second is a thumbs down icon with no label.

Office hours

The technology that powers eBay.ai is moving extremely fast with new legislation being introduced to protect consumers just as quickly. Please sign up for office hours early in your design process and again prior to launch to ensure your experience meets current OX, RAI, CoreAI, and legal guidelines. If you think your project requires a more hands-on collaboration, contact OneExperience (OX) team.

Resources