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.

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.

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.

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.

Filled color

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.

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.

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.

Radius

Buttons

Buttons and avatars are fully round.

Images

Toggle buttons and images have a 16px radius.

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.

Generated

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

Curated

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

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.

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.

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.

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.

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.

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”).

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.

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.

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.

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.

Platforms

Best practices

Color

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

Don’t use gradients on typography.

Badging

Only use 1 sparkle icon per module.

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

Feedback

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

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

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

Generative AI motion

Learn how to bring eBay's generative AI framework to life with our motion language.

OneExperience office hours

Book office hours with the Brand and Design System teams.

Change log

Date	Notes
Jun, 2024	Updated to eBay Evo Added resource section
Mar, 2024	Updated name to “eBay.ai” to reflect the recent trademark Updated label content, added 2 new variants, and added a section called “Disclosing GAI” to explain when to use each Updated content strings in examples to align to current guidelines Added a don’t for gradients on typography
Nov, 2023	Removed gradient stroked icons and black filled AI icons
Sep, 2023	Moved motion specs and examples to new paged dedicated to AI motion Updated color gradients for light mode and added dark mode values for all gradients Gradients are now opaque and referred to as “strong” and “subtle” Updated language in color section to match updated color variables Added resource row for AI skeleton loading Added resource row for AI spectrum icon highlight
Sep, 2023	Adds subtle gradient and solid colors Rename seed colors to “strong”
Aug, 2023	Updates “powered by ebay.ai” to “powered by AI” and adjusted other copy with “AI” as needed
Aug, 2023	Adds v1.0 of playbook page and component stickersheet