Designing for AI assistants that convert leads and cut costs
Overview
Vendasta's first AI assistant was created to solve the problem of small businesses losing leads and wasting time on repetitive questions through a chat widget that provides instant answers and can even book new business.
My focus was establishing a scalable vision for the AI Workforce while designing for the initial launch of AI assistants. The approach involved researching evolving trends, designing for trust, and simplifying setup for quick time-to-value.
As a Staff Designer, I collaborated with the Senior Product Manager, working directly with multiple development teams and coordinating with Marketing. We also paired closely with a major partner to refine messaging flows and deploy AI assistants at scale.
Outcomes
Foundational prototypes were crucial for aligning stakeholders, generating excitement, and gaining essential feedback at a customer panel event
This initiative was a major step for Vendasta to become AI-first, and deliver significant user value. Among many stories, one business achieved an 80% lower cost-per-lead and another saw a 55% conversion rate on chat interactions.
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. We needed to be aware of the existing strengths of LLMs (ChatGPT) to temper expectations with reality.
We needed a framework for thinking about AI assistants that could scale into the future, and set guardrails for users to see immediate success.
Through rounds of brainstorming and whiteboarding with the PM and other designers, we settled on 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
Testing
We found one or two services that organized their AI offering in a similar way, which was validating. The list made sense to stakeholders and customers, while providing a logical organization for development.
We chose a few reference customers and ran their scenarios through the framework to prove fit. The prototype was a valuable guide and presentation piece for the first few iterations.
Naming
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.
Other AI considerations
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. So, if the user added their website as a knowledge source on one feature, the same knowledge should be available for them to use elsewhere without needing to add it multiple times. The Knowledge Base needed to live in a centralized area and the experience of working with it should be consistent across features.
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.