Whoa. Look at you. Just a few years back you didn’t even know what a chatbot was and now you’re looking to design one. If you’ve made it this far, you probably understand a few critical things.

Conversation Design is an art form.

Without good design, your chatbot will not function in the way you’d like it to. It may have trouble understanding simple queries that you assumed were a given. Chatbots are made up of a few key components very similar to us human beings. There’s a brain… or Natural Language Processing (NLP). There’s a soul in Sentiment Analysis and the content of a bot serves as it’s knowledge base. These things are important, but then again so are clothes… and makeup… and other cosmetics. Chatbot design is what makes a bot socially accepted by its users. Botsociety is the leading source for conversational design. In this piece, we will be exploring the ways in which Botsociety can take your project to the next level.

Getting Started

Beginning is the easy part. Before we get started, you’ll want to have a Botsociety account ready to go. This will allow you to follow along with the steps, tricks, and strategies that will be outlined in this guide.

Log-in to your account and you will be brought to a screen that displays all of your previous and ongoing projects. If you’re new to this, don’t worry. You shouldn’t have anything to see just yet. 😉

Select the blue circle with a cross in the middle to begin a new project.

The blue addition circle will bring you to the new mockup screen. This screen allows you to name your mock-up, select a profile picture, and determine the type of bot you’d like to design. This is very important as different platforms work very differently and are not interchangeable. Yet. 😉

For the purpose of this guide, we are going to design a chatbot for the Generic Template. (If you’re looking to design a Messenger Bot click here instead.) This template is very useful because it can be used for just about anything. This is the only exception to the rule about the platforms being interchangeable. The generic template is best used for custom websites or apps that don’t utilize any of the other major social platforms. We will name our Bot Buster, The Botsociety Bot.

After selecting the correct options, you’ll be brought to a screen similar to the one above. Notice the default header and footer placeholders? You can click on either of these to change the settings of your design to match the brand guidelines given to you by the project manager.

To begin with the dialogue select the Bot Says button on the left-hand side. Enter the first message you want users to see when they begin interacting with your Chatbot.

In the image above, you can see the original message I crafted to greet our users. However, I decided to follow some of the best practices for conversational design and chose to include a photograph of Buster.

To add an image to any of your messages, navigate to the camera icon located on the top toolbar of the add message module. Buster is now ready to make his introduction.

When you’ve finished your message, clicking “Add” will add the message to the dialogue displayed on the phone mockup. From this point, you make a decision to add a user response or continue speaking using your bot.

bot designTo continue the conversation as the user, head over to the right-hand side of the screen and begin to compose your response there. I am going to answer the question asked by Buster.

Following the same steps outlined above to add a message, I was able to respond saying “Yes” from the user’s point of view. You will always know the role of a person speaking in a conversation by taking a look at the color of their message.

Buster can now respond and offer a few different options. Remember, you want to make this experience as simple as possible. Giving the user an idea of the type of questions they can successfully ask will aid is your bots overall performance. Users won’t ask the bot to do tasks it isn’t capable of competing if you lay the framework first.

In this instance, our user decided to go with the option to learn to export their work. Buster immediately provides a small overview of the feature and how to use it in the correct way.

Ideally, our user would be able to ask Buster how to use any of the above features and he should be able to provide an accurate response in a timely fashion. But what about you? You’re here reading this tutorial and I bet you’d like to know how each of these things work as well. Ah! Of course, you do. It’s almost like I’m reading your mind. Fear not, I’ve compiled our best tutorials that will help you shine at work like the superstar we all know you are.

Further Education

How To Perform User Testing on Your Chatbot
How to Use the Facebook Messenger Design Kit for Sketch
How to Design a Mobile App Chatbot with Botsociety and Sketch
Create Your Own Facebook Chatbot
How to Use the Embed Your Design Into Your Website
How to Design a Facebook Carousel with Sketch

That’s all for today. Buster and I don’t want to break your brain. You need it. It’s a very important body organ. If you found this interesting, be sure to sign up to receive our newsletter.

Also published on Medium.


Bianca Nieves

Digital Marketing Manager at Botsociety