Instant, in-app help that answers questions without breaking the workflow.
AI Assistant
Responsive Web
Fintech
Sage Connect homepage with the Search Help panel open
PROJECT OVERVIEW
ROLE
Senior Product Designer, end-to-end design ownership
PLATFORM
Web app — in-app panel on the Sage Connect homepage
INDUSTRY
Fintech / Accounting / SaaS
TOOLS
Figma
DURATION
2 months
TEAM
1 PM, 2 Devs, 1 QA, 1 Designers
COLLABORATION
Product Management, UX Research, Content Design, Engineering, Sage AI team
01 — OVERVIEW
Every question used to pull users out of their workflow.
Sage Connect users run into questions all the time like how to present an invoice, how to share a statement, what the Aging Report means, and every one of those questions used to pull them out of their workflow to find an answer.
The Sage Connect AI Chatbot is an intelligent, in-app assistant designed to streamline onboarding, assist with common tasks, and drive product adoption. It provides instant, 24/7 support by answering FAQs, guiding users through key workflows, and escalating complex issues to human support when needed.
It lives behind a persistent chat icon in the Sage Connect interface — a Sage Copilot-like experience where users get contextual help without disrupting their work. Under the hood it’s powered by the Semantic Search APIs from the Sage AI team: users type support requests in natural language and get intelligent recommendations, plus access to support articles for deeper detail.
02 — DISCOVERY
Getting help with Sage Connect meant leaving what you were doing. New users hit onboarding questions with no guidance in the product. Existing users doing routine work had to stop and search elsewhere. And when an answer wasn’t findable, there was no clear path to a person.
The chatbot needed to solve several problems at once
Help wasn’t in the workflow
Users were getting stuck and leaving the app to search knowledge base articles on a whole different site. Every question cost them their place, and we never knew whether the article they found actually answered it.
Onboarding had no guide
New users needed to learn the product as they used it, not before.
Answers, not documentation
Content designers were already writing and updating the knowledge base articles. The knowledge was there, it just lived on another site. The chatbot feeds that same knowledge into the app and answers in plain language, right where the user is stuck.
Trust had to be earned
We never knew whether the knowledge base actually answered anyone's question. Keeping people in the app shows us whether their questions are getting answered. And since AI answers can be wrong, every answer shows its sources and lets the user say when it missed.
Failure needed a design, not a dead end
Support requests kept coming in and we were a smaller product without many support people. The chatbot serves as the support we did not have. When it cannot help, the user still gets a clear path to a human instead of a dead end.
User breakdown
New users
Learning the product as they go. They need the chatbot to explain what things are. The Aging Report, what they can do in the app, and guide them through first tasks.
Existing users
Doing routine work like invoice presentment and statement sharing. They need a fast, specific answer in the moment without leaving the page.
Stuck users
Questions the bot can’t answer, or problems too complex for a search result. They need a clear route to human support instead of a dead end.
03 — USER FEATURES & GOALS
01
Get an answer without leaving the workflow
Help opens as a panel over the application so the user never loses their place.
02
Ask in natural language
No keywords, no help center search syntax, just type the question the way you’d say it.
03
Go deeper when needed
Every answer connects to Knowledgebase articles for the full detail behind the summary.
04
Say whether the answer helped
A one-tap Yes/No keeps the feedback loop tight and shows the team what’s working.
05
Reach a human when needed
Complex issues escalate to human support instead of looping the user through more bot answers.
My approach
I owned the design of the experience from the overall flow and information architecture through detailed interaction design and final UI including every state the chatbot can be in, not just the happy path.
I worked with the Sage AI team on how the Semantic Search APIs would shape the experience. What the bot could answer, how sources would surface, where the limits were, and with content design on the greeting, example questions, and feedback language, so the bot sounds like Sage and sets honest expectations about AI answers from the first screen.
04 — DESIGN
How do users get help?
Sage Connect homepage → Nav button or floating pill → Greeting + example chips → Type question / tap chip → Answer + KB links
How do users rate an answer?
“Was this helpful?” Yes → Thanks for the feedback! No → Feedback form (3 checkboxes + free text) → Submit
How do users go deeper?
Every answer links out to Knowledgebase articles: one or two sources inline, more than two in a Sources list. A Knowledgebase link in the panel header goes to the full help library.
The solution, built around five key areas
01
An entry point that’s always there
Reachable two ways: a “Search Help” button in the top navigation and a floating “Search Help” pill with a sparkle icon at the bottom right. Both open the same panel. The launcher stays collapsed until needed. Help is always one click away without taking up screen space.
Floating launcher pill
02
A greeting that teaches
Opening the panel shows more than an empty input. The greeting tells users what the bot is, how to use it, and what to do if the first answer misses.
“Hi, [Name]. Need help using our application? You’ve come to the right place. Welcome to Sage’s AI-powered search. If you don’t get the answer you need at first, try asking your question a different way.”
How do I send a message?
What is the Aging Report?
What can I do in the app?
03
Answers with sources
The user asks in natural language .“How do I send statements to my customers?” and gets an answer card linked to Knowledgebase articles. How sources appear depends on how many there are:
SOURCES
Inline links with an external-link icon
Showing sources isn’t decoration, it’s how the user checks the answer, and how the bot earns trust.
Result with Sources (6)
“Was this helpful?” + improvement form
04
Feedback built into every answer
Under every answer: “Was this helpful? [Yes] [No]”. Yes shows a green check and “Thanks for the feedback!” No opens a short form: three checkboxes (“Not accurate,” “Not relevant,” “Wrong help links”), an Additional Feedback field, and a Submit button that stays grey until something is entered, then turns green.
The form turns a bad answer into useful signal instead of a dead end.
05
Designed in case of failure
The chatbot component has five states, and the Flows grid designs a full row for each failure mode. Escalation to human support covers complex issues, so a user the bot can’t help still has somewhere to go.
COMPONENT STATES
Collapsed
Default
Loading
Result
Error
FAILURE FLOW ROWS
No Answer Found
Error Message
Offline / Unavailable
Sage Connect AI Chatbot
Panel component, five states: Collapsed, Default, Loading, Result, Error.
Search Help Nav Button
The top-navigation entry point.
Chat bubbles
Including a Welcome variant for the greeting.
05 — DELIVERY APPROACH
The chatbot was scoped as an MVP with the core loop of ask, answer with sources, rate first, and the failure states and feedback refinements following.
1
MVP core loop
Ask → answer with sources → rate.
2
Failure states
No Answer Found, Error, and Offline flows plus human escalation.
3
Sources links
Knowledgebase linkout options and feedback states
06 — THE IMPACT
Instant, in-app answers without leaving the workflow.
Natural-language questions with sourced answers.
A feedback loop on every answer, so bad answers become signal.
Failure states and human escalation designed in from the start.
82%
Helpfulness “Yes” rate
65%
Reduction in support tickets
07 — REFLECTION
“Designing a chatbot is mostly designing trust.”
The greeting, the sources, the disclaimer, and the feedback form are all doing the same job: helping the user judge whether to believe the answer in front of them.
The step after that is even bigger. This the stepping stone for this AI to not just answer the question, but help the user do the task. Instead of reading how to do something and figuring out which buttons to press, the user could ask the chatbot to do it for them.