AnswerFlow

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.

Client

Answerflow AI — B2B SaaS, AI

My Role

Lead Designer · Brand Identity

Deliverables

Product Design · Design System · Branding

Tools

Figma · Adobe Illustrator · Framer

AnswerFlow — product overview — AnswerFlow / Selected product view

0→1

Product and identity designed from scratch

Core product surfaces designed

Scalable component and brand system

Widget

Customisable embedded experience delivered

Problem

Non-technical business owners needed to create useful chatbots without understanding model terminology.

Ownership

Product design, onboarding, conversational UX, brand identity, and component system.

Constraints

Unify configuration, testing, and embedding without exposing technical complexity.

Outcome

Three coherent product surfaces and a customisable widget delivered as one scalable system.

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, I 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

Design Approach

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.

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.

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.

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 Variables CSS Token System Accessibility

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

Have something in mind?

Let's make it work.

Ex-Founder, Product Manager & Designer. Based in Dubai.

Email Srivatsa ↗LinkedIn ↗