How to design conversational AI agents

Users also strongly desire better tools for “comparing products”, especially details like nutritional information, specifications on tech products, cars, even clothing. They want features like a “compare” button or the ability to see differences side-by-side on a single screen. AI-generated side-by-side comparison tables are highly valued by users as they help in making decisions between products.

5. Clear visuals and user-friendly design

Seeing product pictures and visuals alongside search results is crucial for online shopping. AI interfaces can effectively present results using visual layouts and features like “carousels”, which are particularly useful on mobile to showcase multiple relevant products without cluttering the screen. For designers, we recommend the following:

Rethink placement on mobile: For conversational features on mobile, placing the conversational UI at the top of the page pushes products down. Consider placements like the bottom of the screen, a flyout menu, or a side panel that allows users to browse products while interacting with the AI. Let the user have control over when conversation appears.
Prioritize a “co-browse” experience: A preferred design is an “integrated mode” where the AI assistant appears on the same page as the product results, allowing users to see products update in real-time as they refine their search with the AI. A side panel/fly-out was suggested as an ideal way to achieve this without being as cumbersome as a top-of-page element.
Use clear and intuitive labels: Descriptive labels like “shopping assistant” clarify the feature’s function.

6. Building trust and handling errors gracefully

Trust is a significant factor in user adoption of AI features. Users want clear source attribution for information provided by AI. In a shopping context, this translates to clearly showing product details, prices, and links to retailers.

When the AI can’t fully understand a query or finds no results, it should handle this gracefully. Instead of a simple “no results” message, it can offer intelligent suggestions, alternatives, or prompt the user for clarification, maintaining a productive dialogue.

7. Conversational commerce components library:

We have a downloadable component library on Figma accompanying the UX use cases, that can be used as a guiding kit to utilize designs as outlined in the UX documentation. It contains a collection of reusable UI elements reflecting our tech capabilities that are pre-designed and pre-built, allowing designers and developers to quickly adapt to their particular brand needs and quickly customize and incorporate into their projects.

Components include: