How to design your first 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, as we’ve discussed in previous posts.

1. Define your use case

This is the most abstract and crucial decision of your design. Is abstract because it has to be a general idea rather than a specific flow. Is crucial because you cannot just replicate an existing mobile app and expect users to flock to your bot. For the sake of this tutorial, I’m going to create a New York Taxi bot. This bot has a strong personality: He’s been driving people in New York for quite some time and has a lot of tips and tricks about the city. He’s also rough outside but he actually cares a lot. People will use it to discover new things about the city.
Look what I did here:

• Define an objective: People need to use it to discover new things
• Define (roughly) a personality to go with it. It may also be a brand persona

Now we are ready to grab the tools and start designing!

2. The tool for a Messenger mockup

You can use pen and paper, or a Google Doc. We think that using a dedicated tool will make the difference in your design. You can sign up for free on botsociety.io and tell us what you think.
Regardless of the tool, it’s important to choose one carefully as it will be intensely used in the next phase.

3. Design the happy path

With “Happy path” we refer to the best experience possible: the user follows exactly the steps we have in mind for them, reaching our business goal. Is important to include it first in our Messenger mockup.
In my case, the happy path is the shortest way from the start of the interaction down to getting a tip on a specific bar of New York.
Using Botsociety, I add a new “Conversation”, putting “NYC Tips” as name, selecting Facebook Messenger as the platform and uploading a profile picture of an actual taxi driver (!).

Now I’m ready to sketch the best interaction possible: The user selects “Manhattan”, and then asks about bars; he then selects a specific bar. I start with the first messages:

This is ok at the moment. I’ve added a first introductory message; I then explained to the user what the next step may be: He can both type something or press one of the Quick Replies button below. You can follow the same line of thought for voice interfaces. If you are interested, check out our tutorial about designing for Google Home.

In the future, I want to iterate to be sure that the opening question is clear enough and that the personality is the right. As of now, I really want to design the happy path as fast as possible and then iterate on my Messenger mockup. Adding some more messages:

I simply added some more text messages from the bot side and then a quick reply. The last message is a carousel: It shows some bars that the user can choose. If the user wants, he can reserve a table at such bar, or call them up. For the sake of this tutorial, I consider this action as the objective of my design

Ok so now I have my happy path. I click Play (green button in the top right corner). The whole experience will play instantly like a video. I use this feature to review my happy path. To edit a message, I can just click on it, change the text and click on the “Save” button. Once I’m satisfied with my happy path, I will move on designing the other paths

4. Design the other paths

The other paths represent the other possible scenarios. They can be functional — example: What happens if the user selects “How to get in”. They can also represent fallbacks on errors. For example: What happens if the user types something random that the chatbot cannot answer — how will the bot react?

For this tutorial, I’m going to create a second path at the first. Using my mousewheel, I scroll up to the top of the conversation, here:

Here the user may type something else. In order to create this path, I can go with the mouse over the option. You will see arrows, that allow me to switch between the different options. After the last button, I will select the reamaining option, where no button is clicked. It looks like this:

I can click “Add New Message”. I want to design the path where the user asks directly which are the cool bars:

As you see here, I added a text message from the user, followed by a text message by the bot and a set of quick replies. Now, one of the answers to the Quick Reply is actually “Prohibition era bars”. If the user selects it, he’s going to end up on the happy path! In order to design that, I can click on the “Link to message” button. If I click on it, I will be able to select the message I would like to link to:

I click on the right message. Done! I will see something like that

Now I can proceed to design all the other paths. Note that I don’t need to write every variation of each question of the path. That may be done later using an NLP engine. What I should do is define the overall paths and scenario, so that it’s possible to train the NLP engine against those specific use cases. I’m not going to do that for the sake of the brevity of this tutorial, but you would get the idea.

5. Share your design

Now that you are satisfied with your Messenger mockup, it’s time to get feedback on it! It’s very easy to do that with Botsociety. Just click on the button in the top right corner “Share”. You can make it interactive or just have it play like a video. You can take a look at the design created in this tutorial here!

Originally published at Botsociety Journal.