AIChatbot BuilderB2B SaaS

Answerflow AI
Chatbot Platform

Full product design for a ChatGPT-powered custom chatbot builder — designing the builder interface, embeddable widget system, and brand identity for a B2B SaaS targeting non-technical business owners.

B2B
Non-technical business owner persona
3
Core product surfaces designed
Brand
Identity built from zero
Embed
Customisable widget system
01

The Problem

Answerflow AI lets business owners build custom AI chatbots trained on their own content — FAQs, product docs, support articles — without writing a single line of code. The core promise is powerful, but the challenge is the target user: a business owner who has never built software, doesn't understand embeddings or fine-tuning, and just needs "a chatbot that answers my customers' questions."

Our users are florists and accountants. If they need to Google a word on our dashboard, we've lost them.

— Answerflow CEO

The product had three distinct design surfaces requiring cohesive but contextually distinct treatment: a builder dashboard (for creating and training chatbots), a customisation interface (for branding the widget), and the embeddable widget itself (what end-users of the chatbot see).

On top of this, we built the brand identity from zero — Answerflow had no visual direction when we started.

AnswerFlow login screen with dark visual identity, email login, account creation and Google authentication
Authentication · A focused entry point that introduces AnswerFlow's dark visual identity before users enter the product
AnswerFlow chatbot dashboard showing navigation, a sales bot conversation and an AI-generated revenue chart
Conversational Workspace · Data sources, bot settings, chat history, and generated answers organised around the conversation
02

Design Approach

01

Brand Identity: Approachable Intelligence

Developed a brand identity that communicated AI capability without feeling intimidating. Logo, colour system, typography, and iconography all built around a "knowledgeable but friendly" positioning — distinguishing Answerflow from the stark, technical aesthetic common in AI tooling.

02

Builder Dashboard: Wizard Over Configuration

Replaced a configuration panel metaphor with a step-by-step wizard that guided users through chatbot creation as a narrative: "Give your chatbot a name → Add your content sources → Test it → Deploy." Progress state was always visible. Users never saw a blank canvas.

03

Widget Customisation: WYSIWYG Preview

Designed a live-preview customisation interface — users could change colours, fonts, avatar, and greeting text and see the widget update in real time on the right side of the screen. No guesswork, no "save and check" loop.

04

Embeddable Widget: Universal & Extensible

Designed the chat widget UI to be visually neutral by default and fully customisable through the dashboard. The widget needed to feel at home on a luxury spa website and a B2B SaaS platform simultaneously — achieved through a themeable token system rather than opinionated defaults.

Figma VariablesCSS Token SystemAccessibility
AnswerFlow embeddable chatbot widget open on a light website canvas
Embeddable Widget · A compact, theme-neutral chatbot interface designed to sit comfortably on third-party websites

Your project next

Let's build something worth remembering.

Tell us what you're building and we'll come back with a plan, a timeline, and a price.

Next case study →
ReplylessAI
ReplylessAI is an AI-first email workspace designed to help busy professionals process inboxes faster.