The Chatbot Business Framework

  • Start Here
  • Benefits
  • Implementation
  • Development
  • Insights
You are here: Home / Conversational Design / 15 Ultimate Chatbot Prototyping Tools

April 12, 2020 ·

15 Ultimate Chatbot Prototyping Tools

Conversational Design

Learn all about chatbot prototyping tools that you can use to prototype and mockup a chatbot. There are a variety of tools out there and choosing one to start with can be daunting. I’m sharing with you some popular software that’s used for mocking up chatbots and the ones I used when I was a product manager and designer for an enterprise chatbot.

Designing a conversational workflow for a chatbot can be really fun. When I designed a chatbot that was supposed to support 30,000 internal users, it was just really fun to learn how users would interact with it. However, what was difficult was being able to design complex dialogue flows and allowing the user interact with the chatbot without requiring engineers to be involved in the initial design.

Chatbot prototyping tools

I’m going to share with you some of my favorite tools I used to design a chatbot. I will say that if you choose a chatbot platform, some of them may be niche enough to offer their own mockup tools inside their platform. However, those platforms often have a subscription plan as a barrier to entry initially (like Botmock, Kore.AI, and SmartBot).

Considerations for Choosing Prototyping and Mockup Tools for a Chatbot

Below are the components that should be considered when choosing software for prototyping  or mocking up a chatbot.

  1. Graphic Design Layout. The software should allow you to visualize what the bot should actually look like. At the very least, it should allow you to upload a background image of your chatbot and allow you to have a text editor to write over it.
  2. Conversational Flow. The tool should allow you to create multiple pathways to enable testers to have conversations that can go multiple ways.

Before You Mockup and Prototype a Chatbot or Virtual Assistant

With any product, the first step is always understanding the problems that your customers are trying to solve. Imagine them using the chatbot and approaching the chatbot to help solve their problems. Before you even begin prototyping, provide a sample set of your potential users a potential scenario and ask, “What would you type or say to a chatbot to start helping you with that?”

Whatever the user says, write it down verbatim. This will give you the “utterance” that you can start with in order to create your prototype. A little bit of research versus premature prototyping will allow you to save time in designing conversational flows that will mirror how real life user will interact with the chatbot.

Design Iteratively for One Use Case (and Iterate)

It is important that with any new prototype, begin with one specific use case that you know you can expand upon. For example, the internal use case to prove out chatbot within the organization I was working with was looking up employee identification numbers and pulling back their names and departments. After we released it, we were able to iterate and make that experience better because we found that there were over 25 different ways people ask that question versus the 3 that our team had thought of initially.

As much as you can modify the dialogue and design, different users will have varying opinions on how the chatbot should work. Incorporating a flow (maybe after the first initial phase) to include a feedback mechanism will allow you to have data points to help implement new features and feedback.

Scope the MVP

If you have engineers and data scientists on your team, chances are they’ll want time to perfect and do quality assurance. With a chatbot especially, the only way you get real feedback from real users is when you go live with it. Truly focus on the MVP, and get the chatbot released and shipped. When you prototype, you might get sucked into a rabbit hole of various options. Just know when to stop in the conversation (error handling examples for chatbots).

Tools Used for Implementing an Enterprise Chatbot for 30,000 Employees

Draw.IO

Draw.IO is a workflow visualizer that is open source. I used Draw.IO in order to create a low-fi workflow to showcase to testers and developers my idea on how a conversation should flow within the bot.

Adobe XD

Once I got an understanding of the main flow, I used Adobe XD to create graphics and pathways. What is great about Adobe XD is that it has an actual prototyping capability so that you can link buttons so that you can actually simulate a conversation with the bot.

Sketch

I used Sketch for a while (before I invested in the Adobe Suite). It is very similar to Adobe XD, but I honestly think Adobe XD is better in terms of the prototyping it can do.

Best Tools and Software for Chatbot Mockups and Prototyping

Botframe

This allows you to create conversational mockups really easily, and then be able to see it on screen.

Mocking Bot

This allows you to create dialogue and workflows for your chatbot.

Pricing:

  • Free: Up to 3 Projects
  • Lowest Cost Tier: $49 per month

Facebook jQuery Plugin for Messenger

This is a simple plugin tha tallows you to display your Facebook Messenger dialog and conversations on your website or web app.

Bots UI Kit

This can be used with the Sketch UI kit when prototyping.

Botsociety

Pricing:

  • Free: Up to 2 Projects
  • Lowest Cost Tier; $35 per month

HelloTars

This allows you to create a functioning chatbot protype without havign to design or write any code. This tool allows you to create customized conversation dialogue that allows end users to chat and interact with it.

Pricing:

  • Free: 14 days
  • Lowest Cost Tier: $499 per month

Summary of Protyping and Mockup Recommended Tools and Software

I hope this gives you a good list of software and solutions you can use to start prototyping your first chatbot. Before you invest in a software solution for designing, I would urge you to try out Draw.IO, as it has been one of my favorites for designing dialogue to display the pathway that someone would take when interacting with a chatbot. 

Once you are in a place where you need to prototype with a wider audience where you need to refine the prototype, invest in Adobe XD, as it is system agnostic and will allow you to design a bot (or anything for that matter) so that you can have users interact with it.

Other Chatbot Design Posts You Might Like

Here are some other blog posts I’ve written around chatbot design that you might like:

  • How to Design Chatbot Error Messages and Error Handling
  • Small Talk Dataset for Chatbots
  • Create a Chatbot for Free Using Google Dialogflow
  • Conversational Designer Career Overview
  • Conversational Marketing Strategy with Bots


Many of the links on this blog are affiliate links. ChatbotBusinessFramework.com receives a small comission when certain items are purchased, but the price is the same for you. ChatbotBusinessFramework.com is a participant in the Amazon LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Previous Post: « Small Talk Dataset for Chatbot – Free Dataset List
Next Post: Chatbot Intents – Simple Explanation & Fundamentals »

Primary Sidebar

About

Sharing the best strategies on chatbots, virtual agents, and conversational agents using NLP, AI/ML to drive customer engagement, improve user experience, and drive ROI for small business and large enterprises. Learn more ...

Recent Posts

  • ChatGPT – OpenAI Artificial Intelligence
  • How to Store Data for Chatbots
  • Chatbot Architecture – 4 Essential Components Explained
  • 21+ Chatbot Hackathon Ideas – Winning Projects
  • Chatbots and Digital Marketing – Overview and How They Work Together

New Chatbot Tips & Strategies

Join thousands of others for the latest in news, tips, and strategies sent to your inbox weekly!

Copyright © 2025 · Captivating Theme on Genesis Framework · WordPress · Log in