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.
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.
- 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.
- 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 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.
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.
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
This allows you to create conversational mockups really easily, and then be able to see it on screen.
This allows you to create dialogue and workflows for your chatbot.
- 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.
- Free: Up to 2 Projects
- Lowest Cost Tier; $35 per month
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.
- 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: