Bots built like flowcharts
Training a bot meant drawing complex diagrams by hand — and redrawing them every time a product changed.
An AI chatbot that learns from your best agents — Algo case study
Algo automates customer support with an AI chatbot trained on a team’s own answers — and hands over to a person whenever it should. As lead product designer at Biz4Group in 2023, I designed the whole product for Lazify, a start-up: the agent inbox, the bot builder, the knowledge hub, analytics, organisation settings, the chat widget customers see, and the landing page that sells it.
- Agent workspaceInbox · Saved replies · Actions
- Bot builderBot management · Visual editor · Knowledge hub
- Chat widgetHome · Messages · Help
3Ways a chat is handled: automated, semi-automated and human
4Surfaces: landing page, agent workspace, bot builder and chat widget
25+Screens and states designed
1Inbox where agents and the bot work side by side
Support teams answer the same question all day
What Algo does
Algo learns from a support team’s previous agent responses, answers customers in a human way that adapts to each situation, and then auto-responds to related questions. Agents only step in for the questions that are genuinely new.
Who it’s for
Support agents working the inbox, bot managers who train and tune the bot, admins who run the organisation, and the customers who meet Algo through a chat widget on a company’s website.
Why custom bots break down
Existing chatbot tools asked support teams to become bot engineers. The product had to remove that work, not move it around.
Inboxes full of repeats
Agents spent their day on questions that had been answered hundreds of times before.
Robotic answers
Scripted bots couldn’t adapt to what a customer actually said, so people gave up and asked for a human anyway.
Moving was painful
Teams’ history lived in tools like Zendesk and HubSpot. Switching meant starting the bot from zero.
Train by chatting
Let the bot learn from the answers agents already give, so training happens as a side effect of normal work.
People and bot in one place
One inbox where the bot handles the routine and agents take over the moment a chat needs a person.
How the product fits together
- Sell
Landing page
Explains how Algo learns, what it saves, how to migrate and what enterprises get — ending in early access.
- Set up
Organisation and billing
Create an organisation, add billing, invite members and define roles, groups and permissions.
- Train
Bot builder
Manage questions and answers, edit flows visually, merge similar nodes and publish help articles.
- Run
Inbox, widget and analytics
Customers chat through the widget; agents work the inbox; the dashboard shows how much is automated.
Customers want bots as good as your best agent
I checked the founder’s idea against published research from the same period. The demand was real — and so was the gap.
What support leaders and customers said in 2023
Zendesk CX Trends 2024: 4,441 CX leaders, agents and tech buyers and 2,818 consumers in 20 countries, surveyed July–August 2023.
| Finding | Share |
|---|---|
| Leaders using gen AI who see positive ROI | 83% |
| Leaders reimagining their customer journeys | 70% |
| Consumers who want bots as expert as skilled agents | 68% |
Chatbots were moving to the front line
Gartner customer service research, published July 2022. The second figure is Gartner’s forecast for 2027.
| Measure | Share of organisations |
|---|---|
| Already using a chatbot or virtual assistant (2022) | 54% |
| Chatbots as their primary service channel (by 2027, forecast) | 25% |
Where Algo set out to be different
My own scoring of typical chatbot tools at the time, 0–5, against the product we designed. A design target, not a measured result.
- Algo (design target)
- Typical chatbot tools of the time
| Capability | Algo (design target) | Typical chatbot tools of the time |
|---|---|---|
| Learns from agents | 5 / 5 | 1 / 5 |
| Human hand-off | 5 / 5 | 3 / 5 |
| Actions in chat | 4 / 5 | 2 / 5 |
| Train without diagrams | 5 / 5 | 1 / 5 |
| Knowledge hub | 4 / 5 | 4 / 5 |
| Analytics | 4 / 5 | 4 / 5 |
The gap was quality, not quantity
Plenty of companies already had a chatbot. What customers wanted was one that answered like the best person on the team — and knew when to step aside.
Methods
- Client calls and stakeholder workshops
- Design workshops with the PM and developers
- Desk research on chatbot adoption and expectations
- Audit of how existing bot builders worked
Key insights
Bots had to earn trust
68% of consumers want chatbots to be as expert as skilled human agents. Learning from a team’s best answers was the way there.
Adoption was already broad
More than half of organisations used a chatbot by 2022. Algo had to win on quality, not on being the first bot a company tried.
Training was the bottleneck
Diagram-based builders made every change a project. Training by chatting turned it into everyday work.
People still matter
Two-thirds of CX leaders believe chatbots can strengthen emotional connections — but only with a clean hand-off to a person when a chat needs one.
Lead designer, from client calls to code
“Lazify’s founder had a vision of a bot that keeps learning, beyond the scripted AI of the time. My job was to turn that into a product people could actually run.”
- Client calls and stakeholder workshops with the founder
- Design workshops with the PM and developers
- Product structure: inbox, bot builder, knowledge hub, admin and widget
- High-fidelity UI for every module and state
- Leading and reviewing the work of a junior designer
- Collaboration with front-end and back-end teams through build
- Role
- Lead Product Designer
- Team
- Me, a junior designer, a PM, front-end and back-end developers
- Client
- Lazify, a start-up — via Biz4Group
- Year
- 2023
- Outcome
- Sold by the founder in 2024
- Tools
- Figma, FigJam
Everything a support team touches
Twelve modules across four surfaces — designed as one system.
Agent inbox
Conversations with search, filters and date ranges; the customer’s details, notes and history beside every chat.
Saved replies
Search and insert team-approved answers — giving replies to refund customers, onboarding, billing and more.
Actions
Trigger real API calls from a chat (GET, POST, DELETE), with a form or JSON view of the payload.
Bot hand-off
Turn the chatbot on or off per conversation, and switch on vanish mode when a chat shouldn’t be kept.
Bot management
Root questions with their variations nested beneath, drag to reorder, and analytics shown inline.
Visual bot editor
A canvas of agent and user nodes, with node details, variables, actions and child nodes in a side panel.
Similar nodes
Spot near-duplicate questions and merge them, so the bot stays lean as it grows.
Knowledge hub
Articles in collections and folders, with drafts, publishing and moving content between folders.
Dashboard
New, unresolved and open tickets, fall-off, satisfaction, and the split between automated, semi-automated and human chats.
Organisation set-up
Create an organisation in two steps — basic details, then billing — and switch between organisations.
Members, roles & groups
Invite members, create roles from granular permissions, and group people for routing.
Chat widget
What customers see: a home screen, their messages and a searchable help centre, in one small window.
From sign-up to a bot that answers
The path a new company takes, mapped from the final product.
- Create organisation
- Billing
- Invite team & roles
- Train the bot
- Add the chat widget
- Work the inbox
- Review analytics
Set up
- Start
- An admin creates an organisation.
- Actions
- Adds basic details, then billing; invites members and assigns roles and groups.
- Outcome
- A team that’s ready to work, with the right permissions.
Train
- Start
- A bot manager opens bot management.
- Actions
- Adds questions and variations, builds multi-step flows in the editor, merges similar nodes, writes help articles.
- Outcome
- A bot that knows the team’s answers.
Serve
- Start
- A customer opens the widget on the company’s site.
- Actions
- Searches help, or chats; the bot answers and hands over when it should.
- Outcome
- Most questions answered without waiting for a person.
Improve
- Start
- A lead opens the dashboard.
- Actions
- Checks automated vs human chats, fall-off and satisfaction, then trains the bot where it struggles.
- Outcome
- A bot that gets better every week.
How the product is organised
The workspace and the admin area, as they’re structured in the final product.
Workspace
- Chats
- Inbox
- Saved replies
- Actions
- Customer details & notes
- Bot management
- Questions & variations
- Visual editor
- Similar nodes
- Dashboards
- Tickets
- Fall-off
- Automated vs human
- Satisfaction
- Train bot
- Learning from agent replies
- Knowledge hub
- Articles
- Collections & folders
- Drafts & publishing
Organisation settings
- General
- Name, slug and photo
- People
- Members
- Teams
- Roles
- Groups
- Chat settings
- Saved replies
- Bot management
- Security & privacy
- Audit log
- Developer settings
- Usage & billing
- Subscription
- Promo codes
- Legal & compliance
Structure before style
The layout skeleton of the key screens: hierarchy, density and the side panels that make the product work. Redrawn for this case study from the final designs.
One inbox for people and the bot
Agents live in the inbox, so it had to carry everything they need without leaving the chat. The conversation sits in the middle; the customer’s details, notes, conversation history and chatbot breadcrumbs sit on the right, so an agent knows what the bot already tried before they reply.
Two tools make agents faster. Saved replies put the team’s best answers one search away. Actions go further: an agent can call a real system — check a refund, update an order — straight from the chat, with the request shown as a simple form or as JSON for technical teams.
The problem
- Agents copied the same answers again and again.
- Checking an order meant leaving the chat for another tool.
- Nobody could see what the bot had already said.
What I designed
- Saved replies, searchable and shared across the team.
- Actions that call real APIs from inside a conversation.
- Customer context and chatbot breadcrumbs beside every chat.
Why this, not thatI put the chatbot switch in the customer panel, per conversation, instead of a global setting. Support is case by case — an agent should be able to take over one tricky chat without turning the bot off for everyone.
Train the bot by chatting, not drawing
Most of a bot’s knowledge is the same question asked many ways. Bot management shows each root question with its variations nested beneath it, so a bot manager can see coverage at a glance, drag variations into place and turn analytics on to see which questions matter most.
When a flow needs more than a single answer, the visual editor takes over: agent and user nodes on a canvas, with every node’s details, variables and actions in a side panel. Similar nodes surfaces near-duplicates so they can be merged before the bot gets messy.
The problem
- Bot logic lived in diagrams only one person understood.
- The same question was answered several slightly different ways.
- There was no view of which questions actually came up.
What I designed
- Root questions with nested variations, drag to reorder.
- A visual editor for multi-step flows, with variables and actions.
- Similar-node detection to merge duplicates.
Why this, not thatI made the list the default and the canvas the exception. Most training is adding another way to ask a question — a list does that in seconds, while a canvas is only worth opening for real multi-step flows.
Answers before anyone has to ask
Customers meet Algo through a small chat widget on a company’s website. It opens on a friendly home screen with recent messages, a way to send a new one and a search for help — so many people find the answer before they ever start a chat.
Behind the widget sits the knowledge hub, where teams write articles, organise them into collections and folders, and publish them. The same content powers the widget’s help tab and gives the bot more to learn from.
The problem
- Customers had to start a chat to find even simple answers.
- Help articles lived somewhere else from the bot.
- Content was hard to organise as it grew.
What I designed
- A widget with home, messages and help in three tabs.
- A knowledge hub with collections, folders, drafts and publishing.
- One set of content for the help centre and the bot.
Why this, not thatI put search for help on the widget’s home screen instead of only in the help tab. A customer who finds the answer in two taps is a ticket nobody has to answer.
Built for teams of teams
Enterprise support needs structure: organisations, billing, roles and groups — designed so admins can set them up without a manual.
The rest of the product
What made this hard
Two audiences in one product
Agents need speed in the inbox; bot managers need control in the builder. Each had to feel built for them.
Trust in the hand-off
Customers and agents both need to know when the bot is speaking and when a person has taken over.
Technical power, plain language
Actions call real APIs. The design had to work for support agents and still show JSON to those who want it.
Keeping the bot clean
As teams add questions, duplicates creep in. Similar nodes and nested variations keep it manageable.
Enterprise structure
Organisations, roles, groups and permissions — without turning settings into a maze.
A widget on someone else’s site
The chat widget had to feel at home on any company’s website and still be unmistakably helpful.
Calm navy, a confident violet
A deep navy sidebar anchors the workspace; a single violet carries actions and the bot’s identity.
- Colour
- Deep navy navigation, light working areas, violet for primary actions and the bot — with green, red and blue reserved for status and data.
- Bot identity
- A friendly robot mark used in the logo, the widget and the inbox, so customers always know when they’re talking to Algo.
- Components
- Conversation list, chat bubbles with read states, side panels, tagged action lists, nested question rows, canvas nodes and stat cards.
- Density
- A compact, information-rich workspace for agents; a spacious, friendly widget for customers.
From an idea to a sold product
VisionProduct (from Vision to Product)
A founder’s idea of a bot that keeps learning, turned into a complete product across four surfaces.
Source: shipped designsDiagramsChat (from Diagrams to Chat)
Training a bot became adding answers and variations — the visual editor is there only when a flow needs it.
Source: shipped designs2023Sold (from 2023 to Sold)
Designed and built in 2023; in 2024 Lazify’s founder sold the product to another company.
Source: the clientWhat Algo taught me
Design for the hand-off
The moment the bot passes a chat to a person is where trust is won or lost. It deserved as much design as the bot itself.
Lists beat canvases, most days
A visual editor looks impressive, but most training is small edits. The everyday path should be the fastest one.
Show the bot’s work
Chatbot breadcrumbs let agents see what the bot tried — so they never ask a customer to repeat themselves.
One system, many surfaces
A shared visual language made the landing page, workspace and widget feel like one product.
Walkthrough
Want the full walkthrough?
There’s more of Algo than fits on one page — more flows, states and settings. I’m happy to walk you through the full product on a call.
Less repetition for agents.
Faster answers for customers.
Algo lets a support team’s best answers work around the clock, while people stay in charge of the conversations that need them. The founder went on to sell it — and there’s more of the product than fits on one page. I’m happy to walk you through it.