AI Chat Experience


Designing private, customizable AI Chat for Domo and their customers.

Project Overview

As AI chat and AI agent strategies emerged, my team and I worked hard to stay on top of changing trends and industry best practices. As a data platform, we needed to be able to allow our users to control their own data sources. We also needed a way to show users if the data they brought in was ready or reliable to use as a source in their AI chat. Another important aspect of our project we we needed to allow users to see into the AI’s thinking process. We wanted to show the users as much as possible to ensure that our users could trust AI results.

My Role

I lead the design iterations of the AI Chat experience and created low and high fidelity wireframes to communicate my concepts. I extensively researched AI Chat patterns and standards to explore how we could provide an experience that our users would expect from AI Chat. I also created multiple prototypes, to illustrate important motion interactions for the developers.

I worked with our Chief Design Officer who provided education on the background of generative AI and directed some of my research and design efforts. I also met often with developer leads and project managers to coordinate development and project goals.



Introducing AI Chat

Once AI chat was opened, the user would be greeted with the welcome screen. Based on the context of the page, the AI chat would populate with different prompt questions. For data set pages, the AI would populate with questions the user could ask about that specific dataset. The same would apply for dashboards, apps and custom card pages. If AI chat was opened within a Domo product, the AI chat would populate with questions related to using that specific product.


  • AI immediately scans for dataset sources from the current page.

  • Once datasets have been scanned, related questions populate the page.

  • Users can view the datasets and sources by clicking ‘focus’, which activates blue once datasets have been scanned.
  • Users have control over which data sources the AI uses, allowing more focused responses from the AI chat.
  • Users can view chat history or start a new chat from the top navigation bar.
  • Users can also change agents from the top navigation bar, allowing them to chat with specialized agents with a specific scope.

Chat modes within chat Agents

Chat modes was a pattern I began to see Open AI and other AI chat platforms begin to use. When asking a question, users can select a specific topic or role they wanted the AI to take. This provides helpful instruction to the AI about what the user is asking for, allowing it to provide better answers.


  • By selecting a chat mode the user remains in the same agent. Users just specifying what subtask they want that agent to accomplish.

  • Allows for better organization, more robust agents, and is less disorienting for users.

  • Our default agent 'Ask Domo' has three main roles shown as chat modes: 'Analyze', 'Create', and 'How To'.

Preventing the AI Black Box

Once a prompt is entered, the AI displays it’s thought process with sources, tools, and expandable code. This is an animated process that runs before the AI populates its answer. Displaying the thinking process not only helps users see into the back box of AI, but also provides an opportunity to stop the AI if the user sees it going down the wrong road. 



  • In order to display the AI though process steps, engineers had to ask the AI to summarize it’s own process so we could display it to the users in simple steps.

  • Once complete, all steps are collapsed to make room for the AI response.

  • The steps are visible at any time for users who want to dig deeper into the AI process.

  • Any sources the AI used in it’s thinking process are kept at the top of the response for quick reference.


Datasources and data prep

In order for AI to guarantee reliable answers, the datasources it references need to contain specific AI meta data. If a datasource doesn’t have this, it’s easier for the AI to misinterpret it. This data prep is handled through another product I designed called AI Ready. (Link) Because data prep is such an important step to getting reliable answers, an important role of the ‘focus’ feature was to alert users about the status of their data sources.

  • Datasources are automatically detected based on the active page.

  • These sources are customizable if the user needs to change or limit them.

  • Sources are organized by page, with datasets, cards, and filters within.

  • If a datasource is not ‘AI ready’, it’s indicated with a yellow caution symbol and banner.

  • Users can view datasources individually, or view them from the ‘AI Ready’ tab. The AI ready tab show them which datasources are the least reliable. From there, they can link to that datasource and provide the data prep it needs.

Projects

The idea of projects was intended for users who needed to keep track of generated content and related chats. ‘Projects’ was unfortunately never released due to project scope, however, may still be explored at a later date.


  • Users can organize their chats into projects folders.

  • Project folders are separated into chats and attachments. This allows users to see all attachments related to one project.

  • Projects can be shared with multiple users. This allows groups to view and build off of content others in their group have created.

Make it custom

Once the main chat experience had been developed, we quickly moved to allow users to customize their chat experience. This was originally released as a much smaller feature where users could customize the branding of the AI Chat. The final product, however, allowed for customizable datasources, additional chat agents, custom prompts, and more.

Whiteboard sketches from the devs

Custom chat settings


  • Welcome message and prompts are customizable.

  • Custom prompts can be displayed with or without their data source.

  • Features such as ‘Focus’ or opening prompts can be turned off or limited.

  • Additional agents can be added to this chat interface.

Tools and Styling


  • Users are given control over fonts, colors, logos and light/dark mode.

  • Sources can include traditional data sources, unstructured data sources such as PDF’s, audio, etc, as well as autonomous agents. (link)