Skip to main contenteBay Playbook

GenAI

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.

Disclosing GenAI

Disclosing GenAI is a crucial aspect of responsible AI development. It empowers users, builds trust, and promotes accountability. Our confidence in the content generated and the risk it may create for eBay will determine the disclosure used as well as its placement and prominence. Most GenAI experiences will have one disclosure but some may have a combination.

Today, we use two types of disclosures in-product: labels and disclaimers

Labels

Labels are single strings of text coupled with eBay.ai and the full spectrum icon. They lead with a past tense verb to simply articulate how GenAI modified content. We use labels when confidence is high and risk is low.

We have a limited set of pre-approved labels available as components, including: Generated with eBay.ai, Curated with eBay.ai, Summarized by eBay.ai, and Set by eBay.ai. If you have a unique use case that falls outside of these options, please reach out to the content design team.

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

Generated

“Generated with eBay.ai” is used when net-new content is created using GenAI (e.g. Listing descriptions)

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

Curated

“Curated with eBay.ai” is used when items or recs are thematically grouped using GenAI (e.g. Shop the look)

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

Set

“Set by eBay.ai” is used when limits or preferences are suggested using GenAI (e.g. setting ad rates)

Disclaimers

Disclaimers are used when confidence is lower and risk is higher. They typically vary based on the product experience, and may or may not include links to solicit feedback or our user privacy notice (UPN). This content should always be drafted by content design and product counsel.

Example of a disclaimer that says “Chat with eBay.ai may return inaccuracies or offensive language that doesn't represent eBay.”

Text only

Use a single string of text to inform the user about broad limitations of the tool or tech.

Example of a disclaimer that says, “eBay.ai is experimental and may produce inaccuracies. If you experience issues, leave feedback for us.” with “leave feedback” underlined in gray like the rest of the text.

With feedback link

Use max 2 sentences to inform the user about broad limitations of the tool or tech, plus a link to solicit feedback on their experience.

Example of a disclaimer that says, “eBay.ai is experimental. Read our privacy policy and learn how eBay processes your data.” Both “Privacy policy” and “how eBay processes your data” are underlined in dark blue text.

With legal links

Use max 2 sentences to highlight specific risks around accuracy, privacy, or ethical concerns. If we're collecting user data, you must include a link to UPN.

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.

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 introducing customers to GenAI in product, we use multiple levels of volume. For tactical moments when we have lower confidence in GenAI content, we use labels with short strings and a small icon to ensure transparency and reduce risk. For assistive moments where eBay.ai is directly helping a user accomplish a task, we use a larger icon and natural language. And for education or introduction moments when we have high confidence, we use bolder color and motion to give eBay.ai some personality and take credit for it’s work.

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, “Can’t find it? Ask eBay.ai” on a gray 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.

Look and feel

Color

We use a custom, gradient color spectrum to visually inform users that GenAI is present in the product experience. These colors represent the diversity of our marketplace and the endless possibilities of GenAI. 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 gradients when introducing GenAI features as backgrounds and in skeleton loading states. They should be comprised of two neighboring colors in the spectrum. You can also alternate the colors used throughout a page or flow.

A mobile example showing a subtle gradient being used as a loading state for an assistant module.

Strong gradients

We use strong gradient outlines when introducing prompts, appearing as a gradient color and then fading to a border default in its rest state.

A mobile example showing 3 prompts loading inside a chat window with the header, “Chat with eBay.ai”. The first two prompts are outlined in gray and the last one us outlined using a strong gradient.

Spectrum icon

The spectrum is another visual device used to convey that GenAI is at work on the user’s behalf. There are three sizes of two variants—filled and outlined.

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

The filled spectrum icon in full color should be used in most contexts. It shows up before a string of content if GenAI hasn’t happened yet, or after a string of content if it already has.

Two examples using the filled full spectrum AI icon. The first is a label under a section header on homepage that says, “Curated with eBay.ai”. The second shows the icon inside a button that says, “Refine” sitting on top of a generated image.

Outlined icon

When a GenAI tool or feature is an option in a list, like in menus or quick filters, use the outlined version for consistency with the surrounding icons. The “16 thin” version should only be used in nav 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.

Radius

Two button examples with the AI icon inside them. The first button is a light gray circle with the full color icon centered inside it. The second is a fully rounded light gray button with dark gray stroke. The AI icon sits in front of the text string, “generate image”.

Buttons

Buttons and avatars are fully round.

Two images one with a black stroke around the selected one.

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.

Patterns

Introducing GenAI features

Education cards and sheets provide users a short description of a feature with a visual connection to the icon. They can use the spectrum with background gradient or the spectrum on its own.

Keep titles to max 1 line and subtext max 2 lines. CTAs or buttons should have max 3 words.

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.

Assisting in tasks

Assistant modules offer guidance and ingresses into GenAI tools or features. They utilize the filled spectrum and could be shown alongside relevant prompts to help customers narrow down their search.

Two examples of assistant modules. One is in the middle of the search results page under the search bar that says, Refine your results with eBay.ai” 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, “Can’t find it?” with link to “Ask eBay.ai”

Asking for feedback

We should (and in some cases are be required to) give our users a way to tell us if GenAI tools, features, or content is inaccurate, irrelevant, or offensive.

Depending on the context, you can use a text link, an overflow menu, or show thumbs up/down icons directly in an experience to solicit feedback. Text links are best if we want more detailed info on a full experience via SEEK survey where as thumbs up /down icons can give us more specific feedback on a response or image.

When using the thumbs up/down icon, use short words or phrases that are relevant to the experience and are clear opposites (e.g. “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.

Navigating to GenAI features

Access to Chat with eBay.ai is accessible in several areas and is contextual based on where the user is in their flow.

On the homepage, it can appear as a nav pill but on View Item it may show up as a peek-a-boo prompt

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.

Displaying generated content

When introducing generated content, we use the text reveal animation to bring text on screen and badge the content with the full-spectrum filled icon and explicit label to ensure users understand it’s generated.

An in-page module that has the title “product insights” on view item page with generated text filling in line by line. Label and icon under the title that says, “Generated with eBay.ai”

Loading conversational content in real time

When responses are generating in real time while conversing directly with eBay.ai, we use the bouncing dot animation while it’s thinking and then stream the response in using the text reveal animation.

Example of eBay.ai responding to a message in a chat window that says, “What are Luka doncic’s most popular rookie cards?”. eBay.ai’s response streams in line by line.

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

Text color

Use the AI color gradient in spectrum icon 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.

Background colors

Use the full spectrum AI gradient in the spectrum icon.

“Do” example showing an assistant module with gray background.

Don't use static or persistent gradients in anything except the spectrum icon. i.e. background shapes, buttons, etc.

Buttons

Use the spectrum icon on buttons when they will actually generate something.

“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 the icon in a label with the verb “Generate” before the action has been performed.

“Don’t” example showing a modal to “Create a logo for your store” with a label that says, “Generate with eBay.ai” next to a spectrum icon and “Generate” button that is text only.

Badging

Only use 1 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 spectrum 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.

Mention eBay.ai in the title or body text, if necessary.

“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 the icon on a button that doesn’t actually generate anything.

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.

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