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 bot, you will be able to define the best user interaction possible before actually building it. Otherwise, you will figure out it does not work after you build it — which is very expensive, not to mention frustrating!

Don’t feel like reading? We also have a video version of this tutorial

For this tutorial, I’m going to create a LunchAtOffice bot. This bot will allow you to buy lunch when you are the office with your colleagues.

1. Define name and profile picture of your Slack bot

First of all, I signed up at Botsociety here. I’m then able to choose my chatbot name and platform. I can also upload a profile picture that matches my bot idea. The screen looks like this:

I then click “Start designing” and proceed to the next one. I’m now confronted with the editor. I’m able to see a desktop Slack preview in the center and a tool panel on the right-hand side:

The right-hand side panel allows me to add new messages, people, and channels into my Slack design. Now want I want to do is design my happy path. The happy path is the best interaction possible between the users and my bot. In this case, we are designing a bot that you can use to order food at your office with your coworkers. So the happy path is something like: Collegue1 asks Collegue2: Should we eat something? Collegue2 says sure, and then they use the bot. So the first thing I want to do is add messages from collegue1 (let’s name him Vittorio) and collegue2 (let’s name him Mark). In order to define those users, I click on the “People” label on the right-hand side:

I now change the names of “User” to “Vittorio” and upload a profile picture. I add a new person using the small form immediately below it. I will name this new person “Mark” and upload profile pictures for him as well. The final result looks like this:

Great, I now have completed the basics. I can now start the actual design

2. The context of our Slack bot

I now want to add the messages of the two colleagues talking with each other about the lunch. I click back to the “Add Message” tab, then add two or three chat messages. For the sake of this tutorial, I’m keeping it simple — you can have more complex and compelling ways of showing the context of your bot. The only limit is your imagination! Regardless how you accomplish this, you should be sure to clarify the use case you have in mind.

In order to do that, I’ve added a couple of messages of the people. It looks like this:

This should be enough to clarify the use case before my users start to engage with my bot. I can preview the whole user experience by clicking “Play” on the top right corner.

3. The rest of the happy path

There are different ways to interact with a Slack bot. For this LunchAtOffice bot, I want users to tag the bot in the common chatroom. To design that, I simply add a message from “Vittorio” that says “@LunchAtOffice can we eat Thai food?”. After this message, I add another one sent by my bot. To change the person sending the message, I simply click on it as shown below:

Now I would like the LunchOfficeBot to start sending messages. First, I want him to send a simple message that lists the Thai restaurants available around the office. I then want one of the users to select one restaurant:

I now want to add a “Button” type message. I can select the message type by clicking on the “Message type” selector under the bot name selection. Note that only bots can send button messages!

I then fill the form of the button type and upload an image:

After I’ve added this message, I will be able to see the final result:

For the sake of this tutorial, I will consider my happy path as completed with this message. In real life, I would probably need to reach a business objective — successfully complete an order for example.

4. Designing alternative paths

Now that I’ve completed my Happy path, I can start designing the other possible paths. Some of them may be functional, some of them may be fallbacks in case the bot does not understand the intent of the user. For this tutorial, I would like to design an alternative path where the user, instead of asking where to eat Thai food, requires directly to order at “Pho and Thai”. In order to design such path, I will mouse over the message I would like to “fork”. In this case, the first message of the conversation may be the same: The path starts to diverge from the message that says “@LunchAtOffice can we order thai food?”. As I mouse over this message, a “+” button appears. If I click it, I can actually add an alternative path:

I can now add an alternative message by using the right-hand side panel as usual:

If I click “Add”, I’ve now created my second path! Now what actually will happen is: This query will bring the user directly to the other existing message of the happy path — the last one. So what I can do is link this new path with the existing message in the happy path. I can simply click on the “Link” button:

I can now select the message of the Slack bot that I would like to link. A flowchart is shown:

I now have completed this alternative path! This is of course only the first one, and it’s a very simple example. I actually need to design some more scenarios before I can consider myself satisfied. For example, from the happy path, I can infer that I need to know the Slack team office’s location. Therefore, I need an onboarding path where my Slack bot informs the team about his own capabilities as well as allowing them to set up the location of their office. I should also design the scenario used when the team asks for a restaurant — or a cooking style — that is not available. And probably another 10 more. Each path will be then be used by the technical team in order to train the NLP model

5. Share your design

I’m now ready to share my design. Doing that is very simple: I can click on the button on the top right corner “Share”. By default, my mockup is shown as a video playing on the web page. I can also create an interactive version of the same mockup — so that my users can actually try it by clicking around. You can find the bot created in this tutorial here. I can also export a video file or an Excel file!

The objective of sharing is getting as much feedback as possible about my Slack bot. The feedback will allow me to iterate on the design and get it better. This is particularly important if you are planning to build a non-trivial Slack bot. I can also user-test my Slack bot, and be sure that my demographic understands the interaction and find it compelling.

Thanks for reading this tutorial! You can try out Botsociety here. Please leave any comment if you have questions!