Design a Customer Support Chatbot

Build a Sun King support chatbot in Voiceflow with 4 intent flows.

Introduction

30 Second Summary

Millions of people rely on solar energy products that require weekly mobile payments to stay active. When a payment fails or an activation code never arrives, customers need help immediately.

In this project, you will design and build a customer support chatbot for Sun King, a solar energy company, handling the four most common customer issues: failed payments, product enquiries, shop locations, and keycode problems.

What You'll Build

A working AI customer support chatbot prototype in Voiceflow backed by professional conversation design documentation in Figma.

By the end of this project, you'll have:

A Figma documentation file containing user personas, an intent priority matrix, a chatbot voice chart, and conversation flow diagrams.
A Voiceflow agent with 4 fully built conversation flows including error recovery and human handoff.
A shareable prototype link you can embed in your portfolio to demonstrate conversational design skills to potential employers.
Secret Mission: Add a "Check My Payment Balance" flow that simulates pulling account data and displaying remaining installments.

Are there any prerequisites?

This project assumes familiarity with UX design principles like flow mapping and personas. Basic experience with Figma is helpful but not required.

Set Up Your Voiceflow Agent and Figma File

Before you can design conversation flows, you need a workspace for your chatbot and a documentation file to capture your design decisions.

In this step, you'll create the Voiceflow agent that will become your Sun King chatbot and set up a Figma file to document your conversation design process as a portfolio case study.

In this step, get ready to:

Create a Voiceflow agent with a global prompt defining the chatbot's role.
Set up a Figma case study file with 4 frames for documentation.
Gather your domain knowledge by writing down real customer phrases.

Create a new agent in Voiceflow

Your Voiceflow agent is where the chatbot lives. The global prompt defines the agent's personality and applies to every conversation turn.

In your Voiceflow workspace, click Projects in the top navigation.
Click New project.
Name your project Sun King Support.
Keep the default settings and select Start from scratch.

This opens the global agent view where you'll configure the chatbot's high-level behaviour.

Click the Agent tab.
In the Global prompt section, paste the following text to define your agent's identity:

# Personality
You are a friendly and patient customer support assistant for Sun King, the world's leading supplier of off-grid solar solutions. You help EasyBuy customers resolve their issues quickly and clearly.

# Tone
Warm, reassuring, and simple. Use short sentences. Avoid jargon. Many customers are checking from basic smartphones between tasks.

# Guardrails
Only help with: failed payments, product enquiries, shop locations, and keycode issues. If you cannot resolve an issue, offer to connect the customer with a human agent. Never guess at payment amounts or account details.

What does the global prompt do?

The global prompt is the foundational identity of your Voiceflow agent. It runs on every single conversation turn, shaping how the agent responds regardless of which specific flow is active.

The # Personality section defines who the agent is. The # Tone section controls how it speaks. The # Guardrails section sets hard boundaries on what the agent can and cannot do.

Don't see the Global prompt section?

Make sure you've clicked the Agent tab at the top of your project. The global prompt appears in the main editing area once you're on that tab.

help me find where to set the global prompt in my Voiceflow agent

Create your Figma case study file

Your Figma file documents every design decision, making this project portfolio-ready from the start.

Switch to Figma in your browser.
Click + New design file to create a blank file.
Rename the file to Sun King Chatbot - Conversation Design by double-clicking the file name at the top.
Press F on your keyboard (or click the Frame tool in the top toolbar) to create a frame.
Draw a frame on the canvas and rename it User Research & Intents by double-clicking its title.
Repeat this 3 more times, creating frames named Chatbot Persona, Conversation Flows, and Case Study Summary.

You should now see 4 empty frames on your Figma canvas, arranged side by side.

Why 4 separate frames?

Each frame represents a stage of the conversation design process. Separating them keeps your documentation scannable for hiring managers reviewing your portfolio.

You'll fill in User Research & Intents and Chatbot Persona in the next steps, then Conversation Flows as you build in Voiceflow, and Case Study Summary at the end.

Frames overlapping or hard to find?

Press Cmd+Shift+1 (macOS) or Ctrl+Shift+1 (Windows) to zoom to fit all frames in view. Drag frames apart if they overlap.

help me organise my Figma frames for this chatbot case study

Gather your domain knowledge

Before designing any conversation flow, you need to document what you know. Your firsthand experience as a Sun King customer service executive is your primary user research.

Open a text document, sticky note app, or a text layer inside your User Research & Intents Figma frame.
For each of the 4 intents below, write down at least 3 real phrases that customers used when contacting support:

Failed Payments (e.g., "my payment failed," "I sent money but it didn't go through," "M-Pesa deducted but no confirmation").
Product Enquiries (e.g., "what can the HomePlus charge?", "which one has a TV port?", "how much is the big system?").
Shop Locations (e.g., "where is the nearest shop?", "do you have a branch in Kampala?", "what time does the shop open?").
Keycode Not Received (e.g., "I paid but didn't get my code," "my product locked," "the code SMS never came").

Why write these phrases now?

These example utterances become the training data for your chatbot's intent recognition. The more varied and realistic they are, the better your bot will understand real customers. Your experience makes these far more valuable than guesses.

Save your notes. You'll use them directly in the next step when building your intent map.

Your workspace is ready. Next up, you'll structure your domain knowledge into a professional intent map and user personas in Figma.

Document User Research and Intent Map

Your workspace is ready. Now it is time to turn your real customer service experience into structured conversation design documentation.

Professional conversation designers start every project with user research and intent mapping. You already have something most designers lack: hundreds of real conversations with Sun King customers burned into your memory. This step captures that knowledge in a format hiring managers recognize.

In this step, get ready to:

Build an intent matrix documenting 4 key customer support intents.
Create user personas representing Sun King's EasyBuy customers.
Prioritize intents by volume and urgency based on your experience.

Build your intent map in Figma

An intent map captures every reason a customer reaches out and documents how they phrase their requests. It is the foundation your chatbot's conversation flows are built on.

Switch back to your Figma file (Sun King Chatbot - Conversation Design).
Navigate to the User Research & Intents frame.
Create a matrix with 4 columns. Label each column with one intent: Failed Payments, Product Enquiries, Shop Locations, and Keycode Not Received.

For each of the 4 intent columns, fill in these rows:

User's goal - what the customer is trying to accomplish (e.g., get my solar product working again for keycode issues).
Example utterances - at least 5 real phrases customers use for this intent. Pull from your domain research notes. Think about how customers actually spoke to you, not how a manual would phrase it.
Required information - what data the bot needs to resolve the issue (e.g., payment method, date, phone number).
Success criteria - what "resolved" looks like for this intent (e.g., customer receives their keycode, customer finds nearest shop address).

What is an intent?

In conversational design, an intent is the reason a user starts a conversation. Each intent represents one distinct goal the customer wants to achieve.

Mapping intents before building anything ensures your chatbot handles the problems that actually matter to users, not just the ones that are easy to build.

Use your real experience

Your firsthand customer service experience is your primary research source here. Think about the exact words customers used when calling or messaging.

Phrases like "my light stopped working" are more authentic than "I require a PAYG activation code." The more natural the utterances, the better your chatbot will understand real users.

Here are example utterances to get you started for each intent:

Failed Payments: "my payment failed," "I sent money but it did not go through," "mobile money deducted but no confirmation," "I paid at the shop but nothing happened," "my payment is not showing."
Product Enquiries: "what products do you have," "which one can charge a phone," "how much is the HomePlus," "what is the difference between HomePlus and HomePlus Pro," "can I power a TV."
Shop Locations: "where is the nearest shop," "do you have a shop in my area," "what time do you open," "I want to pay in person," "where can I buy Sun King."
Keycode Not Received: "I paid but did not get my code," "my light stopped working," "where is my keycode," "I need a code to unlock my system," "I paid yesterday but still no SMS."

Replace or add to these with real phrases you remember from your time at Sun King.

Create user personas

Personas help you design conversations that match your actual users' communication style and technical comfort level. A customer on a feature phone in a rural area needs a different interaction pattern than a smartphone user in a city.

On the same User Research & Intents frame, create a section below your intent matrix for user personas.
Design 2-3 persona cards representing Sun King's typical EasyBuy customers.

Each persona card should include:

Name - a realistic name for this customer type.
Location - urban, peri-urban, or rural area.
Technical literacy level - how comfortable they are with technology.
Device type - smartphone or feature phone.
Sun King product - which product they own (HomePlus, HomePlus Pro, HomePlus Max, or a Solar Lantern).
Payment method - how they typically pay (mobile money or cash at shop).
Primary frustration - their biggest pain point with customer support.

Why do personas matter for chatbot design?

A chatbot that assumes every user has a smartphone and fast internet will fail customers on feature phones with SMS-only access. Personas force you to design for your least-technical user first.

They also help you justify design decisions in interviews. When asked why you used buttons instead of open text input, you can point to your personas and explain that most users have low technical literacy.

Draw from the real customers you served at Sun King. Think about the range of people who called in.

Prioritize intents by volume and urgency

Not all intents are equal. Some complaints flood in daily while others trickle in weekly. Prioritization determines which flows you build first and where you invest the most design effort.

Add a priority label to each intent column in your matrix.
Consider two factors: volume (how often this complaint came in) and urgency (how time-sensitive the issue is for the customer).
Label each intent as High, Medium, or Low priority.

What makes an intent high priority?

Failed Payments and Keycode Not Received are typically the highest priority. Without a working keycode, the customer's solar product is completely unusable. They paid money and got nothing in return.

That urgency should inform how much error recovery and escalation logic you build into those flows. Product Enquiries and Shop Locations are important but less urgent. A customer browsing products can wait a few seconds longer than one whose lights just turned off.

Add a brief note under each priority label explaining your reasoning (e.g., "High priority because customers call about this daily and cannot use their product until resolved").

Not sure what to include in your utterances?

Think about the last 10 customer calls you handled for each issue. What exact words did people use? Include slang, broken sentences, and common misspellings. Real utterances are messy. That messiness makes your training data authentic.

Help me brainstorm realistic customer utterances for a solar energy PAYG support chatbot.

Your research frame is now a professional design artifact. Next, you will define your chatbot's personality and map the conversation architecture that brings these intents to life.

Design the Chatbot Persona and Conversation Flows

Your intent map and personas capture what customers need. Now you need to define how the chatbot responds to those needs.

A chatbot without a consistent voice sounds robotic and disjointed. In this step, you will define your chatbot's personality, then map the exact conversation architecture for every intent.

In this step, get ready to:

Create a voice chart defining the chatbot's personality and communication style.
Map the greeting and routing flow with buttons and a fallback path.
Map conversation flows for all 4 intents with error recovery and human handoff.

Create a voice chart in Figma

A voice chart is the personality blueprint for your chatbot. Without one, each flow you write will sound slightly different, breaking the illusion of a single, consistent assistant.

What is a voice chart?

A voice chart defines a chatbot's personality traits, communication style, and tone variations in one reference document. It ensures every message the chatbot sends feels like it comes from the same character, regardless of which flow the customer is in.

Switch to your Figma file and open the Chatbot Persona frame.
Give your chatbot a name that fits Sun King's brand. Something warm and solar-themed works well (for example, Sola or Ray).
Add a Personality Traits section listing 3-4 core traits (e.g., warm, patient, reassuring, knowledgeable).
Add a Communication Style section with guidelines: use simple language, keep sentences short, avoid jargon, and ask one question at a time.
Add a Tone Variations section that maps tone to context. For payment issues, use empathetic language. For product questions, use enthusiastic language. For keycode problems, use urgent and action-oriented language.
Add a Dos and Don'ts list. Example DOs: acknowledge frustration first, offer a next step in every message. Example DON'Ts: use technical terms like "PAYG activation" without explaining, ask compound questions.

Draw from your real experience

Think about the tone you used when speaking to frustrated customers on the phone. The empathy patterns you developed naturally are exactly what this voice chart should capture.

Your voice chart is now the reference you will check every time you write dialogue in Voiceflow later.

Map the greeting and routing flow

The greeting flow is your chatbot's front door. It determines whether customers find what they need in seconds or abandon the conversation.

Switch to the Conversation Flows frame in your Figma file.
Create a flow diagram starting with a Welcome Message node. Write a greeting that introduces the bot by name and explains it can help with payments, products, shop locations, and keycodes.
Below the welcome message, add 4 button options as the main menu. Label them clearly: "Payment Issue," "Product Info," "Find a Shop," and "Keycode Help."
Draw an arrow from each button to a placeholder node representing that intent's flow (you will detail these in the next substep).
Add a Fallback Path branch for when the user types something that does not match any intent. This path should gently re-prompt the user with the button options.

Why buttons instead of open text?

Offering suggested prompts as clickable buttons reduces user effort and prevents misrouted messages. Users can still type freely, but buttons guide them toward the fastest resolution.

This follows a core UX guideline: present options as buttons, not text, so users see the chatbot's capabilities at a glance.

Your greeting flow should now show: welcome message, 4 buttons, arrows to each intent, and one fallback branch that loops back to the buttons.

Map each intent's conversation flow

Each intent needs a complete flow diagram showing every path the conversation can take. Real customers do not follow happy paths neatly. They skip steps, give incomplete answers, and get frustrated.

For each of the 4 intents (Failed Payments, Product Enquiries, Shop Locations, Keycode Not Received), draw a flow diagram on the Conversation Flows frame with the following paths:

Happy path: the ideal resolution in 3-5 turns. For example, the Failed Payments happy path: bot asks payment method, confirms amount, provides troubleshooting steps, issue resolved.
Clarification loops: what happens when the bot needs more information. Draw a loop arrow back to the question node with a re-prompt message.
Error recovery: what happens when the bot misunderstands or cannot help. Use contextual re-prompting (ask for the specific missing piece, not a generic "I didn't understand").
Human handoff escape: at what point the bot transfers to a live agent. Add this as an exit node accessible at any turn in the flow.

Keep each intent's happy path to 3-5 turns maximum. Count turns by how many times the bot sends a message, not how many nodes are in the diagram.
Use your experience to identify where customers typically get stuck. These are the points where you add clarification loops.
Label every arrow in your flow diagrams with the trigger condition (e.g., "user says mobile money," "user doesn't respond," "3rd failed attempt").

What does a good flow diagram include?

Each node should contain the bot's actual message text (not just a label like "ask question"). Each arrow should state what the user does to trigger that path. Dead ends should not exist. Every node either resolves the issue, asks a follow-up, or hands off to a human.

Start with your highest-priority intent

Draw the Failed Payments flow first (your highest-volume intent from Step 2). Once you have the pattern down, the other 3 intents will go faster because they follow the same structure.

Once all 4 intent flows are drawn, review your Conversation Flows frame. You should see the greeting/routing diagram plus 4 intent flow diagrams, each with clearly labelled happy paths, loops, error nodes, and handoff exits.

Your design documentation is complete. You have a personality-driven voice chart and a full set of conversation flow diagrams. Next up, you will bring these designs to life by building the actual agent structure in Voiceflow.

Build the Agent Structure in Voiceflow

Your conversation designs are complete. You have flow diagrams, a voice chart, and a clear intent priority sitting in your Figma file.

Now it's time to bring those designs to life inside Voiceflow. In this step, you'll translate your Figma documentation into a working agent by building the greeting flow and your two highest-priority conversation flows.

In this step, get ready to:

Configure the greeting and main menu with 4 clickable button options.
Build the "Failed Payment" conversation flow with troubleshooting and escalation.
Build the "Keycode Not Received" flow with timing explanation and manual check.

Configure the greeting and main menu

Every chatbot needs a clear entry point. Your greeting flow introduces the bot and presents the 4 main options as clickable buttons so customers don't have to type.

Why buttons instead of open text?

Presenting options as clickable buttons reduces user effort and eliminates misinterpretation. Customers can get help in one tap instead of figuring out how to phrase their request.

This follows a core guideline from Nielsen Norman Group: offer relevant suggested questions as buttons, not text.

Switch back to your Voiceflow workspace and open your Sun King Support agent.
Create a new workflow for your greeting. In the workflow canvas, you'll see a Start chip where the conversation begins.
Drag a Message step from the step toolbar (left side of the workspace) onto the canvas and connect it to the Start chip.
Click on the Message step and write your welcome message. Use the friendly, warm tone from your voice chart. For example: "Hi there! I'm your Sun King support assistant. How can I help you today?"
Drag a Buttons step onto the canvas and connect it below your Message step.
Click on the Buttons step, then click the + icon to add your first button. Enter the label: Failed Payment.
Click Add another to add three more buttons with the labels: Product Enquiries, Shop Locations, and Keycode Not Received.

What do buttons do on the canvas?

Each button you add creates a connection point (port) on the Buttons step. You'll wire each port to a different path, so the conversation branches based on which button the customer taps.

For now, leave the button ports unconnected. You'll wire them to the intent flows as you build them in the next substeps.
Enable No Match in the Buttons step settings. Set the reprompt message to something like: "I didn't catch that. Please tap one of the options above so I can help you."

Your greeting flow should now show the Start chip connected to a Message step, which connects to a Buttons step with 4 labelled options.

Don't see the Message or Buttons step?

If you don't see these steps in the toolbar, look for the toggle at the top of the step sidebar that switches between scripted steps and agentic steps. The Message and Buttons steps are scripted (deterministic) steps.

help me find the Message and Buttons steps in Voiceflow's toolbar

Build the "Failed Payment" flow

Failed payments are typically the highest-volume customer complaint. Customers have paid via mobile money or cash but their product stopped working. This flow needs empathy first, then clear troubleshooting steps.

Create a new workflow for the Failed Payment intent. Drag a Message step onto the canvas and connect it to the Start chip.
Write an empathetic opening message acknowledging the frustration. For example: "I'm sorry to hear your payment didn't go through. Let me help you sort this out."
Add a Buttons step below this message with two options: Mobile Money and Cash at Shop. This asks the customer how they paid.
Wire the Mobile Money port to a new Message step that asks the customer to confirm the amount and date of their payment.
After the confirmation message, add another Message step with the troubleshooting steps. Write 3 clear actions: check their mobile money balance to confirm the deduction, wait 15 minutes and retry, and check for a confirmation SMS from their mobile money provider.
After the troubleshooting steps, add a Buttons step asking: "Did that help?" with two options: Yes, it's working now and No, I still need help.
Wire the "Yes" port to a closing message that thanks them and asks if there's anything else.
Wire the "No" port to a human handoff message. Write something warm like: "Let me connect you with a team member who can look into this further. Please hold on."
Wire the Cash at Shop port from the payment method buttons to a Message step that asks the customer to confirm which shop they visited and when. Follow with a message advising them to return to the shop with their receipt, or offer human handoff.

Why ask the payment method first?

Mobile money and cash payments have completely different troubleshooting paths. Mobile money issues can often be resolved by retrying the transaction. Cash payments require verifying with the shop.

Asking this upfront avoids generic advice and gets the customer to a solution faster.

Return to your greeting workflow. Wire the Failed Payment button port to this new workflow so the routing is connected.

Use your voice chart

Refer back to your Figma persona frame while writing dialogue. For payment issues, your voice chart should call for an empathetic, reassuring tone. Read each message aloud to check it sounds natural.

Build the "Keycode Not Received" flow

This is your second-priority flow. Customers who don't receive their keycode after paying literally cannot use their solar product. The urgency is high, so this flow needs to be fast and clear.

Create a new workflow for the Keycode Not Received intent. Drag a Message step onto the canvas and connect it to the Start chip.
Write an opening message that acknowledges the urgency. For example: "I understand you haven't received your keycode yet. Let's get this sorted quickly so your product is back up and running."
Add a Buttons step asking the customer to confirm they've made a payment: Yes, I've paid and I'm not sure.
Wire the "Yes, I've paid" port to a Message step that asks when they made the payment (today, yesterday, more than 2 days ago).
After the timing question, add a Message step explaining the SMS delivery timeframe. For example: "Keycodes are sent via SMS shortly after payment is confirmed. If you paid within the last hour, please wait a few more minutes and check your messages."
Add a Buttons step offering a manual check option: I'll check my messages again and It's been a while, I need help.
Wire the "I'll check my messages again" port to a Message step with a closing note: "No problem! Check your SMS inbox and spam folder. If you still don't see it in 15 minutes, come back and I'll connect you with the team."
Wire the "It's been a while, I need help" port to a human handoff message. Write: "Let me connect you with a team member who can look up your account and resend the code."
Wire the "I'm not sure" port from the payment confirmation buttons to a Message step that advises the customer to check their mobile money transaction history or shop receipt, then offers to connect them with an agent if needed.
Return to your greeting workflow and wire the Keycode Not Received button port to this new workflow.

Why is the keycode flow so critical?

Sun King's EasyBuy model requires a keycode after every payment to keep the solar product running. Without the code, the customer's lights and phone charger stop working entirely.

This makes keycode issues high-urgency even though they're lower volume than payment failures. Your tone should reflect that urgency.

Your Voiceflow agent now has a greeting flow routing to two fully built conversation flows. You can test both by using Voiceflow's preview feature to walk through each path.

Buttons not routing to the right flow?

Make sure each button's port in the greeting workflow is wired to the correct intent workflow. Click and drag from the port to the target step. If a line doesn't appear, try dragging directly from the small circle on the port.

help me connect my greeting buttons to different workflows in Voiceflow

Your agent is taking shape. You've built the core structure and your two most important flows. Next up, you'll complete the remaining intents and polish all the dialogue.

Build Remaining Flows and Polish Dialogue

Your agent already handles the two most urgent intents: failed payments and missing keycodes. Now it's time to complete the picture by building the remaining two flows that customers need.

Product enquiries and shop locations are lower-urgency intents, but they still drive a huge volume of support tickets. A well-designed chatbot resolves them instantly, freeing human agents for complex cases.

In this step, get ready to:

Build a Product Enquiries flow with quick-reply buttons for each product line.
Build a Shop Locations flow with pre-set location details.
Polish all dialogue across all 4 flows against your voice chart.

Build the Product Enquiries flow

Customers frequently call Sun King to compare products or understand which system fits their home. Your chatbot can answer these questions instantly by guiding users through the product catalogue with buttons.

In your Voiceflow agent, navigate to the Product Enquiries flow that is connected to your main menu's Product Enquiries button.
Add a Message step at the start of this flow with a greeting like: "I'd love to help you learn about our products. What are you looking for?"
Drag a Buttons step onto the canvas and connect it below the message.
Click the + icon inside the Buttons step to add your first button.
Add 3 buttons with these labels: "I need lighting", "I need to charge my phone", and "I need to power a TV".
Click Add another after each button to create the next one.

Why buttons instead of open text?

Buttons reduce user effort and prevent misunderstandings. Customers on basic smartphones can tap a choice instead of typing out a question, which is especially important for Sun King's off-grid customer base.

For the "I need lighting" path, add a Message step describing Solar Lanterns (budget-friendly, portable) and the HomePlus range for multi-room lighting.
For the "I need to charge my phone" path, add a Message step describing the HomePlus Pro (comprehensive lighting and smartphone charging, 960 lumens across 4 tube lights, 10-year battery life).
For the "I need to power a TV" path, add a Message step describing the HomePlus Max (powers Sun King HD TVs, pedestal fans, and radios, with dual charging from solar and grid).
At the end of each product description, add a follow-up Buttons step with two options: "Tell me more" and "Back to main menu".
Connect the "Back to main menu" button path back to your opening flow's welcome message.

What are the Sun King product lines?

Sun King offers three main product categories. Solar Lanterns are budget-friendly and portable. Solar Home Systems (HomePlus, HomePlus Pro, HomePlus Max) provide multi-room lighting and charging. Solar Inverter Systems deliver full AC power for larger needs.

The HomePlus Pro focuses on lighting and smartphone charging. The HomePlus Max adds laptop charging, TV compatibility, and dual solar-plus-grid charging via USB-C.

Build the Shop Locations flow

Customers often want to visit a physical Sun King shop to make payments in cash, pick up products, or get in-person support. Since you cannot integrate a live store locator on the free tier, you will simulate this with pre-set locations from your experience.

Navigate to the Shop Locations flow connected to your main menu's Shop Locations button.
Add a Message step with a prompt like: "I can help you find your nearest Sun King shop. What city or area are you in?"
Add a Buttons step below with 3-4 location options based on areas you know from your customer service experience (for example: "Lagos", "Nairobi", "Kampala", "Other area").
For each location button, connect it to a Message step containing the shop address, opening hours (for example: Monday to Saturday, 8am to 5pm), and a note about what to bring (ID and payment receipt if applicable).
For the "Other area" button, add a Message step that says something like: "I don't have details for your area yet. Let me connect you with a team member who can help." Then connect this to a human handoff message.
At the end of each location response, add a Buttons step with "Find another shop" and "Back to main menu" options.

Keep location details realistic

Use real areas you served during your time at Sun King. In interviews, you can explain that a production version would integrate with Sun King's live store locator API, but you simulated the core interaction pattern for the prototype.

Write and refine all dialogue

A chatbot's personality lives in its dialogue, not just its flow structure. Now that all 4 flows are built, you will review every message against the voice chart you created in Figma.

Open your Figma file and switch to the Chatbot Persona frame to have your voice chart visible while editing.
In Voiceflow, click through every Message step in all 4 flows and check that each message is 2-3 sentences maximum.
Verify that each question in your flows asks for only one piece of information at a time.
Check that the tone matches the context: empathetic for payment and keycode issues, helpful and enthusiastic for product enquiries, straightforward for shop locations.
Confirm that every path has a next step. No message should leave the user stuck without a button, a follow-up question, or a handoff option.
Add a transition message at the end of every resolved conversation: "Is there anything else I can help you with?" followed by buttons for your main menu options and a "No, thanks" option.

What makes good chatbot dialogue?

Good dialogue sounds human without pretending to be human. Keep sentences short and avoid jargon. Say "your payment" instead of "the PAYG transaction".

For error-related flows (payments, keycodes), always acknowledge the frustration first before jumping to troubleshooting. Something like "I'm sorry you're having trouble" goes a long way.

Flow feels robotic or repetitive?

If your messages all sound the same, vary your sentence openings across flows. Use "Let me help you with that" in one flow, "Great question" in another, and "I understand" for problem-related flows.

Also check that you are not repeating the chatbot's name in every message. Once per conversation (in the greeting) is enough.

help me make my chatbot dialogue sound more natural and varied

Your agent now has all 4 intents fully built with polished, consistent dialogue. Next up, you will add error recovery and test every path to make sure nothing breaks.

Add Error Recovery and Test Your Prototype

Your chatbot now handles all 4 customer intents with polished, empathetic dialogue. The next challenge is making it resilient when conversations go off-script.

Real customers type unexpected things, misspell words, and get confused mid-flow. In this step, you will build error recovery that catches those moments gracefully, then test and publish your finished prototype.

In this step, get ready to:

Build a global fallback with a 3-strike escalation approach.
Test all conversation paths in the Voiceflow simulator.
Publish your agent and document your case study in Figma.

Build fallback and error handling

When a user types something the bot does not understand, it needs a plan. A 3-strike approach gives the user multiple chances before escalating to a human agent.

Return to your Voiceflow agent canvas.
Add a global fallback response that triggers when the bot does not understand the user's input.
For the first misunderstanding, write a gentle re-prompt message that offers the 4 main menu buttons again. For example: "I'm not sure I understood that. Here are some things I can help with:" followed by your 4 intent buttons.
For the second misunderstanding, write a rephrased question that tries to narrow down what the user needs. For example: "I want to make sure I get you the right help. Could you tell me if this is about a payment, your keycode, a product, or finding a shop?"
For the third misunderstanding, offer a human handoff. Write a warm message such as: "Let me connect you with a team member who can help further. One moment please."
Add a "Start over" option that is accessible at any point in the conversation. This can be a persistent button or a recognized phrase that routes back to the main menu.

Why a 3-strike approach?

A single misunderstanding should not dump the user out of the conversation. The 3-strike pattern gives the bot three opportunities to recover: offer buttons (reduces typing errors), rephrase (catches confusion), then gracefully hand off (respects the user's time).

This pattern mirrors how a good human agent would respond. They would try clarifying twice before escalating to a supervisor.

What makes a good human handoff message?

Avoid robotic language like "Transferring to agent" or "Error: intent not recognized." Customers are already frustrated by this point.

Use language that feels supportive: acknowledge the difficulty, reassure them that help is coming, and set a brief expectation. Your voice chart from the Chatbot Persona frame should guide the exact wording.

Test every path in the Voiceflow simulator

Testing uncovers the moments where your conversation feels unnatural or gets stuck. You will walk through every flow to confirm the bot responds correctly before sharing it.

Open the test tool in Voiceflow by clicking the preview/test button.
Test the happy path for all 4 intents. Walk through Failed Payment, Keycode Not Received, Product Enquiries, and Shop Locations from start to resolution.
Test edge cases by typing unexpected inputs mid-flow. For example, type a random word while in the middle of the Payment flow to see if the fallback triggers correctly.
Test the full fallback path. Type gibberish three times in a row to confirm you see the gentle re-prompt, then the rephrased question, then the human handoff offer.
Test button navigation by clicking through all 4 menu buttons and confirming each routes to the correct flow.
Test the "Start over" escape from inside each flow. Confirm it returns you to the main menu cleanly.
Note any points where the conversation feels unnatural or gets stuck. Fix dialogue, add missing transition messages, or adjust routing as needed.

Testing does not consume your credits

Messages sent while developing in-app or when using shareable prototypes do not consume credits. You can test as many times as you need without worrying about your 100-credit Starter allowance.

Bot not triggering the fallback?

Make sure your fallback is set as a global handler, not scoped to a single flow. Check that no other intent is accidentally matching your test inputs before the fallback has a chance to trigger.

If buttons disappear after the first misunderstanding, verify that your re-prompt message includes the button/choice step, not just a text response.

Help me debug my Voiceflow fallback.

Generate your shareable prototype link and document your case study

Publishing makes your chatbot accessible outside the editor. You will also complete your Figma case study documentation to create a portfolio-ready deliverable.

In your Voiceflow agent, click Publish in the top right corner to open the publish view.
Give the new version a name (e.g., "v1 - Complete 4 intents") and add a brief description of what is included.
Click Publish to make it live.
Generate a shareable prototype link from the on-canvas Share menu or the Agent menu.
Test the shareable link in a new browser tab to confirm it works outside the editor.

What can you configure on the shareable link?

Voiceflow lets you set password protection, choose the input modality (Chat, Voice, or Buttons-only), and configure appearance settings like interface colour and branding icons.

These appearance and branding changes are cosmetic for prototyping purposes. They help you present a polished demo to hiring managers or stakeholders.

Take screenshots of key conversation moments from your published prototype. Capture: the greeting with buttons, a successful Failed Payment resolution, the fallback sequence, and the human handoff message.
Switch to your Figma file and open the Case Study Summary frame.
Document the problem statement: Sun King's high call volume for repetitive customer issues (failed payments, keycode problems, product questions, shop locations) that a chatbot could resolve instantly.
Document your design process: user research from lived experience, intent mapping, persona creation, voice chart development, flow architecture, and Voiceflow build.
Document key design decisions and rationale. Include why you chose the 3-strike fallback pattern, why you prioritized certain intents, and why you used buttons over open text for routing.
Paste your prototype screenshots into the frame to show the working chatbot in action.
Add improvement notes: what you would do differently with more time, what features require backend integration (live payment lookup, real store locator), and how you would measure success (resolution rate, handoff rate, customer satisfaction).

Why document improvements?

Hiring managers want to see that you can think beyond v1. Listing specific improvements (like real-time payment data via API, or multilingual support for Sun King's 12 countries) shows you understand the gap between a prototype and a production system.

Your Sun King chatbot is fully built, tested, and shareable. Next up, the Secret Mission challenges you to add a data-driven payment balance flow that demonstrates backend integration thinking.

Secret mission

Add a "Check My Payment Balance" Flow

Your chatbot handles complaints beautifully. But what about proactive service? In this secret mission, you'll add a 5th flow that simulates pulling account data and telling the customer their remaining installments. This demonstrates you can design for data-driven conversations, not just static Q&A.

Clean Up Your Resources

This project runs entirely on free-tier cloud tools, so there are no ongoing costs. Decide whether to keep your resources available, pause them, or delete them entirely.

Resources you used:

Voiceflow agent: "Sun King Support" (hosted in your Voiceflow workspace).
Figma file: "Sun King Chatbot - Conversation Design" (hosted in your Figma account).
Published prototype link (generated from your Voiceflow agent).

Keep everything running

No action needed. Choose this if you plan to continue refining your chatbot, adding it to your portfolio, or sharing the prototype link with potential employers.

Your Voiceflow agent stays in your workspace and the published prototype link remains active.
Your Figma file stays in your account with full version history.
Both Voiceflow Starter and Figma free tier have no time limits, so nothing will expire or incur charges.

Pause - I'll come back to this later

Unpublish your agent to stop the prototype link from working, while keeping your design work intact for later.

In Voiceflow, open your "Sun King Support" project. Any published prototype link will stop responding once you unpublish or modify the agent's publish state.
Your Figma file requires no action. It stays in your account indefinitely at no cost.
When you return, you can re-publish the agent and pick up where you left off.

Delete - I don't want to use this again

Remove all project resources permanently. Only do this if you are certain you no longer need the chatbot or documentation.

Delete your Voiceflow project: go to your Voiceflow workspace dashboard, hover over the "Sun King Support" project card, and click the three-dot menu. Select the option to delete the project. This also deactivates the published prototype link.
Delete your Figma file: open the Figma file browser, right-click the "Sun King Chatbot - Conversation Design" file, and select Move to Trash.
Permanently delete from Figma Trash: click Trash in the file browser sidebar, right-click the file, and select Permanently delete. Confirm the action.
Your Voiceflow and Figma accounts remain active. Neither service charges you on the free tier, so there is no need to delete the accounts themselves.

That's a Wrap!

Nice work. You've designed and built a complete customer support chatbot from real-world experience. That's exactly the kind of work that lands conversational design roles.

Here's what you accomplished:

Documented user research and intent mapping from firsthand domain expertise, translating real customer complaints into structured conversation design documentation in Figma.
Designed a chatbot persona with voice guidelines and tone variations, then architected conversation flows with error recovery and human handoff patterns.
Built a working 4-intent chatbot prototype in Voiceflow using the professional conversational design process, and created a portfolio-ready case study in Figma.
Added a data-driven Check My Payment Balance flow using variables and conditional logic, demonstrating how chatbots interact with backend systems.

Ready to quiz yourself?