How to create an interactive chatbot prototype
When you design a chatbot, it’s great to try it first hand to get the feeling of the final user experience. In this tutorial, I’m going to show how to create an interactive chatbot prototype with Botsociety. Ready?
This tutorial is also available in the video format. If you don’t feel reading click Play, otherwise keep reading!
1. Create a chatbot mockup with different paths
Create a mockup starting from the happy path, and then define the rest. You can check out this blog post ff you are not sure how to create additional paths, For the sake of this tutorial, I’ve created a short mockup that prompts the user with a simple button and then with a carousel. I’ve defined what happens if the user chooses the different options. It took me around 10 minutes. It looks like this:
Now that I’m satisfied with my design, I can click the green “Play” button on the top to have an instant preview of the final user experience. This is cool but I want to try it out myself. Let’s see how to do this
2. Make the chatbot prototype interactive
It takes 3 clicks to transform this design into an interactive chatbot prototype. Just click on the “Share” button at the top. You can now click on the “Interactive” switch. That’s it!
Once you activate the switch, any link will generate an interactive prototype inside a web page — including the embed! Is that easy. You can send the link via email, Facebook, Twitter, LinkedIn, or simply copy/paste it where you prefer. The neat thing is that you can use it with your smartphone as well. If you do that, you will have an experience which is almost the same as if you already developed your chatbot. Instead, it’s just a chatbot prototype! Check the video below:
3.Iterate your design
Now that I have a precise feeling of the final user experience, I will change and tweak my design based on what I feel works and what does not. This is very helpful for Messenger chatbots, Messenger extensions and Slack chatbots. You can also use it for voice interfaces like Google Home and Alexa. Iterating my design allowed me to get it right off the bat. Without it, I would have had to develop my chatbot, figure out it did not work well and re-build it again. This was easy for me as I am the target user of my design. If you are not the target user — for example, your chatbot is aimed at businessman or elderly — you can use our user testing feature to optimize your design before actually building it.
Hope you like this tutorial. Please let me know if you have question in the comments below!
Originally published at Botsociety Journal.
