Designing for AI assistants that convert leads and cut costs
The story
Small business owners are busy people. They can’t keep up with replying to every call and message promptly, and might lose a sale to competitors.* Also, people often ask the same questions that the business already answers on its website. This wastes the owner’s time.
Vendasta’s AI assistant provides instant answers for website visitors through a chat widget. It can even book new business, which the owner just needs to confirm. The business saves time and gets more customers.
With “AI Workforce,” Vendasta envisioned a team of AI assistants who could similarly help with other areas of running a business.
Challenges
People are wary of chatbots
Most people prefer talking to a real human, especially for complex enquiries.* Chatbots have a reputation for feeling unnatural and unhelpful.*
To mitigate negative perceptions from end-users, we default to transparency: naming the AI as such, or having it introduce itself that way. Transparency sets realistic expectations and builds trust.
LLM-backed bots are prone to hallucinations
The potential for false statements is unavoidable,* but with the right guardrails (system prompt) and knowledge base (retrieval-augmented generation), the AI assistant was so accurate it was able to effectively do business on behalf of humans. The advantage is not immediately clear over earlier chatbots.
It was important to get the customer to see the value quickly in-product, so all set-up steps included smart defaults and there was a tailored demo available.
AI is an evolving technology
There weren’t many good models for AI chatbots at this time. Competitors were still using scripted if/then branching chatbots. Terminology was shifting. (Chatbot? Assistant? Agent?) We had to stay updated on the latest ideas, terminology, and models and adapt quickly.
Design-wise, the biggest challenge for this project was showing a realistic vision of the ease in operations afforded by an AI chatbot.
I had previously spent a 2-day hackathon exploring AI capabilities and design patterns with other designers in my division.
The team
Company and project: Vendasta is a SaaS company that creates software products for small-to-medium businesses, and an enterprise-level CRM and reseller platform. This work focused on the AI conversation experience on the SMB side, while also keeping resellers (Vendasta partners) in mind for scale.
I worked with 2-3 development teams involved with different parts of this work along the way. A senior product manager and myself (staff designer) were consistent across the teams.
We also collaborated with designers in marketing and other product divisions on consistent AI branding, messaging, and motion design throughout the platform.
Outcomes
- 80% lower cost per lead for one business
- 55% conversion rate for another
- Instant answers for customers
What I did
The vision for AI assistants
How might someone build their AI assistant one day?
When we talked with customers (agency / business owners), they imagined an all-powerful AI that could basically run their business for them. They wanted a level of automation that would be years off, if not impossible with LLMs alone. We needed to be aware of the existing strengths of LLMs (ChatGPT) to temper expectations with reality.
With a technology as hyped and flexible as AI, it was important to set guardrails for users to see success. Meanwhile, keeping an eye on the sci-fi future promises of AI, we needed a framework for thinking about AI assistants and a UI that could scale smoothly into the future. What aspects of the AI model could users affect, balancing flexibility and control?
I went through rounds of brainstorming and whiteboarding with the PM and other designers. We came up with this list of factors. Each could have presets and the option to customize prompts:
- Objectives — What the AI will try to do in interactions, e.g. get a phone number.
- Skills — A way to define the expertise of the bot, what it should be good at, e.g. selling
- Abilities — Agentic options tied to real APIs or other automations, e.g. to send a booking link
- Knowledge — Auto-gathered and user-entered text to improve accuracy using RAG (retrieval-augmented generation)
- Personality — Tone of voice, name, visuals, and audio aspects
- Channels — Where the AI can interact, e.g. web chat, social media
We found one or two services that appeared to be organizing their AI offering in a similar way, which was validating. The list made sense to stakeholders and customers, and developers said it seemed like a logical way of organizing things.
To create a realistic testable prototype for AI with so much flexibility would be difficult. Instead, we chose a few reference customers and ran their scenarios through the framework for fit.
Most of the challenge in implementing the vision would be on the technical end, but the prototype was a valuable guide and presentation piece for the first few iterations.
Employees?
Vendasta now calls this product AI Workforce / Employees. I am referring to it as AI Assistants which was the term we settled on while working on it. The thinking was that AI is an assistant to employees, not a replacement. However, employee is a generic term that also appeals to business owners.
I am cautious about anthropomorphizing AI too much, and this caution is warranted with recent stories of AI psychosis.* (Not that I think a support chatbot with plenty of preventative prompting is going to be a problem, but as AI features evolve to allow more customization, you never know what creative ideas people might come up with.)
Giving a bit of human or friendly quality to an object or technology can make users see it more favorably and enjoy interacting with it.*
However, with a technology as unpredictable as AI, already touted as a labour replacement, the anthropomorphization could land in the uncanny valley or be seen as threatening, or at least disingenuous, to human employees.*
To properly set user expectations, we name the AI by default as “Automated Assistant” and recommend it be introduced as such.
Visualizing the user experience of AI chat
There isn’t much UI involved for AI chat interactions. Success of the AI assistant depends on humans getting messages and notifications. AI should just work, so how could I show that ideal, AI-powered world?
In this story, a website visitor interacts with an AI assistant that gets her phone number and a preferred booking time. The business owner gets a notification while he’s out between jobs and only needs to confirm the booking. Later on, AI automatically reaches out with a cross-sell via text.
This all really works now, but wasn't built yet! It was important to confirm realism with development and not oversell.
Did I use AI to design for AI?
Writing — I used ChatGPT to write a script for the AI conversation in the prototype above. It made sense to use AI to get a realistic-sounding AI conversation, which only needed a few edits.
UI generation — I didn’t trial any such tool on this work. Image/UI generation and prototyping tools were fledgling at this time. Most of the UI elements needed for this work already existed in the design system.
Ideation — I tried the free version of Claude to see how it did at code prototyping. In a few prompts, it had a wireframe version of the screen I was envisioning. It was somewhat impressive, but without more work, provided no more utility than a whiteboard sketch.
I also asked Claude to brainstorm elements required for a dashboard to manage multiple AI assistants, which I had already sketched out. It came back with mostly what I had, plus one extra suggestion that might be worth considering.
A consistent way to add knowledge to AI
AI knowledge is essentially text content, from various formats, that can be used by generative AI features in crafting its output.
Build once, use everywhere
At the start, we had just one AI feature, but planned for more. The Knowledge Base should be a shared resource that can be used across all AI features. It needed to live in a centralized area. These requirements come more from Vendasta’s software principles, rather than user needs directly. Designing with these principles in mind makes things a bit more interesting, and simple features not as simple as they seem at first. A business user might add knowledge from the web chat AI assistant directly, and not need to look at the centralized knowledge base. An account admin might upload knowledge for multiple AI assistants across accounts from a centralized place.
I settled on an “add” workflow that could be launched in a modal from different features, and a list that could be used by itself or shown as a reusable component in other locations.
For the centrally uploaded knowledge to be useful, it needs to be linked to a feature, e.g. a chatbot. When the knowledge is added directly to the feature, the linking step is hidden. The admin features had not been built yet.
Smoothing out many steps — Due to technical constraints, the web scrape and “training” flow requires a few steps. To keep users engaged throughout, I added interstitial progress screens that show the number of pages counting up, with a generic Material spinner.
Later, we replaced the spinner animation with a custom one (below). The process will also run in the background if it takes too long.
Feedback on the knowledge-adding experience
“Magical to use (fast & intuitive)”
— Product growth manager. We heard similar comments from early access partners.
We found the time to refine the user experience so that customers could see and feel the value throughout the AI features. As soon as the AI assistant is up and running, it follows through on that expectation.
Communicating AI magic through motion design
There was a larger collaborative branding effort around AI in the platform, but that’s a different story. For now, I’ll now leave you with this mesmerizing AI animation. It represents information flowing into AI during the knowledge-adding process.
The icon was designed by another designer, and this animation was produced by our video/motion person. I made a reusable SVG and CSS version shown here. It’s much lighter-weight than the web output of animation software.