AI Assistant Chatbot

Summary

The company explored a custom chatbot to help insurance agents find marketing material more easily. Powered by Agentforce, it would draw on marketing content and Salesforce data to act as an assistant for each agent’s business. Phase one is a chatbot, with a plan to grow into a fuller assistant as ROI and costs are assessed.

Outcome

Designed the company’s custom chatbot components, supporting rich text and dynamic responses, along with the content model, RAG structures and training on content and responses: everything that goes into a custom chatbot.

Role:: Product Designer
Team:: Product design, engineering and business stakeholders
My contribution:: Chatbot interface and response components, content model, RAG structure and response training, and a working prototype built with GitHub Copilot
Timeline:: 2026, 6 weeks, mostly research and training the model rather than the UI
Platform:: Web, desktop and mobile; framework-agnostic prototype in React and Angular

Proprietary work, shown in generalized form

This case study covers proprietary, employer-owned work. Visuals have been recreated and stripped of logos, branding and internal data to protect confidentiality, so only a limited selection of examples can be shared. Full workflows and detailed walkthroughs are available in conversation.

The whole chatbot system on one board: launchers, chat shells, message types, rich responses and four sample layouts. Click any image to see it full size. - cover — The whole chatbot system on one board: launchers, chat shells, message types, rich responses and four sample layouts. Click any image to see it full size.

The chat shell in its brand and light themes, with the four launcher styles

Message types and rich responses: links, documents and contact information, suggested prompts, and the input states - cover — Message types and rich responses: links, documents and contact information, suggested prompts, and the input states

Four sample conversations: a new conversation, requested documents, multiple options and contact information - cover — Four sample conversations: a new conversation, requested documents, multiple options and contact information

Background

The chatbot options available to agents could answer, but not present. They did not support the rich responses, content cards or suggested prompts agents needed to find marketing material, and a block of text was not enough. Most of the six weeks went into research and training, not into the interface.

What I did

Designed the chatbot kit. Launcher, chat shell, message types and states, suggested prompts and a disclosure line, in brand and light themes.
Made answers content, not just text. Links, documents and contact information each get their own card, with multiple-choice options for next steps.
Set up how it answers. A content model, RAG structure and training on approved content and responses, so it points to company-approved content and says when a question is out of scope.
Designed for each device. A small launcher that grows into a side panel, and a modal on desktop with a bottom sheet on mobile.

Built and tested with GitHub Copilot

I used GitHub Copilot to build a working version, not just a design: a framework-agnostic prototype in React and Angular, connected to the company knowledge base through an API. Agents could ask real questions and get answers from approved content, which is how it was tested in a pilot.

How I use AI in my process

I use AI to carry a design into something real. Figma MCP and agentic development turn design-system screens into coded prototypes people can use. Reusable skills and Markdown files document business rules and workflow reasoning, so developers see why each flow works as it does. GitHub Copilot built this chatbot prototype on the company knowledge base.

Status

Tested in a pilot with agents, not launched. It stands as a complete design and a working prototype.

Next projectFreelance

Mobile / Web App