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 if 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:

Creating an interactive chatbot prototype

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!
Creating an interactive chatbot prototype

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! You can sign up for Botsociety here


Also published on Medium.

Comments


Vittorio Banfi

Co-founder and CEO botsociety.io

Related Posts

Tutorials

How to design a Facebook Carousel with Sketch

When designing a Messenger chatbot, one of the nicest message formats that you can send is a carousel. The carousel allows you to send multiple images, titles and multiple links for each element of a Read more…

Tutorials

How to create your first Slack bot mockup

In this tutorial, we are going to create a simple Slack bot mockup. Designing a Slack interaction before actually building it will help you save a lot of time. How? By previewing and prototyping your Read more…

Tutorials

How to design a Facebook Messenger mockup

In this brief tutorial, we will go through the basic steps of designing your first Facebook Messenger mockup. Designing this chatbot interaction is crucial to the success of your project. If you get it wrong, Read more…