Getting started with conversational UI design can be a bit overwhelming. What is the best way to design a chatbot interaction? Do you start with an information architecture, a flow diagram, a list of use cases or something else? Are there any special tools that you can use…

After spending months building a messaging platform, interacting with chatbots and designing chatbots here are my learnings in form of a quick step by step guide to chatbot design.

There are different kinds of chatbots. This article focuses on what I call “Transactional Chatbots” — Bots that help users perform certain tasks based on user input.

For purposes of this article, let’s assume we have gone through the activity of defining the key user outcomes, supported use cases and most importantly we have good reason to believe that conversational UI is the best solution for the problems we are trying to solve. If you want to read more on these topics, please read my earlier article — To build a successful chatbot.

Now, to the design steps.

1. User Intents — Scope

Start with defining key user intents that you believe your chatbot will encounter and the ones you should support. The scope is key here. Carefully define what you should cover and what you will not.

Let’s take an example. Say, I want to design a Reminder bot. The key user intents could be:

1. Set a reminder for something I fear I might forget
2. Set a reminder for someone else who I think might forget the task
3. View upcoming reminders
4. Edit/ Cancel reminders

For purposes of this activity let’s focus on setting simple personal reminders, viewing and editing them which means 2 is out of scope.

2. Key user inputs

Next, list down user inputs required for each intent you identified in Step 1. This will help you with Step 3 (Assistant) and Step 5 (Script). You might want to refine the user inputs after you have gone through the other steps. So, don’t worry about creating the perfect list.

As an example, here are the key inputs for “Setting reminders”

1. What to remind
2. Date for the reminder
3. Time for the reminder

3. Play Assistant

Since chatbots are conversational, what better way to define the interactions than based on an actual conversation. After you have identified key user intents and user inputs required for each intent, find a couple of friends who can spare some time for a quick activity. Tell them to think of you as an assistant who can help with <key user intent> and start a dialog. The user inputs you defined in the previous step should help you with the conversation.

If you plan to create a bot for a particular platform like Facebook or Slack, I recommend you to use the respective platform for this dialog.

While you are performing this activity, note down the dialog flows. This should give you a good understanding of the different ways users approach the task. Keep in mind though, this is not the exhaustive list of all possible ways your users will interact but a small sample to get you started.

Repeat this exercise for each intent.

In my case, I found a couple of colleagues who were more than happy to have an assistant. I asked them to assume I am someone who can remind them of tasks they don’t want to miss. Then, I asked them to think about the last few reminders they had set and replay the same scenarios.

Here is sample of what I got

Friend: Yogesh, remind me to call my doctor at 10 am on coming Thursday

Me: Sure! I will remind you to call your doctor at 10 am on Thu, Apr 6th.

Friend: Remind me to pick up Julian at 5:30 today

Me: You got it! Reminder to “Pick up Julian” added for 5:30 pm today.

Friend: And, on Monday to go to the meeetup after work

Me: What time do you leave work?

Friend: 5:30 pm

Me: Cool! I will remind you to go to the meetup at 5:30 pm on Mon, Apr 10th

Friend: Also, remind me to call mom every day at 4

Me: I will remind you to “call mom” at 4 pm every day

As you can see from this example

1. People tend not to follow a template when they are conversing. Each of those sentences is different.
2. They assume you are intelligent enough to deduce some things like am/pm based on common sense — “…call mom everyday at 4”
3. They might miss key inputs like time and date — “…go to the meeetup after work”
4. At times they will misspell words — “…meeetup…”

I did a similar activity for all the other intents I had listed in Step 1.

4. Design Flow

Use the dialog flows you documented in Step 3 to create flow diagrams for each intent. Creating flows helps you articulate and critique the interaction early on.

Here is a flow I created for “update reminders”.

As you can see, updating reminders, the way I have here, turns out to be a multi-step process with a lot of back and forth communication. This also means added complexity, uncertainty and increased chances of error at each step.

For updating reminders, I decided to augment the conversational UI with a graphical UI interaction where set reminders are always visible with edit and cancel options next to them — see UI sketch below.

Tip:

To help simplify the flow:

If you can, reduce the number of decision boxes without compromising the user experience.

Explore if you can augment the conversational UI with a graphical UI.

A little help from Graphical UI enabled me to reduce additional back and forth communication and simplify the flow significantly. It also enhanced the user experience by giving visibility of existing reminders. Here is the updated flow —

After you have defined the flows for key intents, consider these scenarios as well —

Reset or next intent — What will your bot do after the task has been performed? You can either leave it at Resolution and reset it for next input or you can move on to another intent. For instance, if it is a pizza ordering bot, after ordering a pizza it can move on to “tracking your pizza delivery”.

Switching intents — Since the interaction is conversational users can switch intents on your chatbot. For instance, while the bot is still waiting for input on the Time for Reminder, the user can ask the bot to update an existing reminder. You need to decide if you are going to support switching intents and in what cases, and design additional flows based on the approach you decide to take. Allowing users to switch intents might add some flexibility to your interactions but can also create additional cognitive load for them.

Abandon Flow — Have you ever faced a scenario when you are chatting with a friend and all of sudden they stop responding (maybe because they got a phone call). This will happen to your chatbot as well. You need to plan for this. Have a timeout for each input and remind the user upon inactivity.

5. The Script

In case you were wondering — “We haven’t, still written a single word of content for the interaction that is supposed to be conversational”, here it is [finally!].

Here are some of the scenarios to keep in mind while writing your script.

1. Onboarding
2. Missing or ambiguous inputs
3. Verification
4. Resolution
5. Switching intents
6. Abandon flow
7. Fallback

Onboarding — Conversational UI can create additional cognitive load on users trying to figure out how they can interact with your bot, especially first time users. Write a script explaining what your bot does and how users can interact with it. Be upfront and explanatory — provide a sample statement if needed.

Here is an example — Hello Mike! I am your personal reminder bot. Just tell me what I can remind you of and when. For instance, you can say “Remind me to get milk at 6 PM tomorrow.”

Missing or ambiguous inputs — Your bot will need certain inputs from users to be able to service them. Assume users are going to miss key inputs and write a script for each missing user input. Here is one for Setting Reminders:

1. Missing What to Remind — “What can I remind you of?”
2. Missing Date of Reminder — “What date should I remind you to <task>?”
3. Missing Time for Reminder — “What time should I remind you to <task>?”

You can also combine 2 statements into 1 in the case of missing inputs like date and time. However, exercise caution with this approach — combining 2 asks can sometimes confuse users.

Verification — In some cases, you’d want to verify user inputs before you perform the next action. For instance, if you were shopping online, you’d want to verify the order and total amount before you go the payment step.

Resolution and next intent — What would your bot say after it has performed the task it was asked to?

Here is an example for setting reminders — You got it! I will remind you to “get milk” at 6 PM tomorrow.

If you plan to move to another intent after resolution, you might want to add that to the dialog.

Switching intents — In the previous step, we went over the decision of whether or not you are going to support switching intents.

Here is how the script for the 2 approaches might look like

1. I can sure help you with changing the time for “Getting tickets” but can you please specify the time for “Picking up Pete” first.
2. Sure! Let’s update the reminder for “Getting tickets” first. What do you want me to update?

Abandon Flow — When you are writing the script for “Abandon Flow”, keep in mind that users might come back to the chatbot at a later date and they might have no recollection of the task they were trying to accomplish. An “Abandon Flow” script for Reminders could be -

Hey, you wanted me to remind you to “Pick up Pete” but you didn’t specify a date and time. Do you still want that reminder-

• Yes, add date and time
• Nope, move on

Fallback — Design a fallback script where your bot has no clue on how to respond. This will happen more frequently than you think.

6. Bring it all together

Once you have the flows and the scripts for intents, it is time to bring all the good stuff you have worked on together as you would with pieces of a puzzle. You can sketch the interaction on paper or use any design tool — whatever you are comfortable with. And that’s it! You have the first design for you chatbot interaction.

Once you have the interaction defined, I would highly encourage you to build a prototype and test it out.

There are few tools out there that you can use without writing a single line of code.

1. Motion.ai — SMS, Facebook Messenger, Slack, Email, Smooch and Web-based conversational UI.
2. Chatfuel.com — Facebook Messenger
3. Api.ai — SMS, Facebook Messenger, Slack, Cisco Spark, Amazon Alexa, Google Home, Skype, Kik, Twilio, Line, Telegram, Twitter and a couple more.

Finally, here are some other things to keep in mind

• While writing the script try to add variety to the bot responses. It brings a human touch to your designs — “I will remind you to [task] at 10 am tomorrow”, “You got it! Reminder set for [task] at 10 am tomorrow” …
• Every interaction with your bot does not have to be conversational. Some interactions are better with Graphical UI than with Conversational UI. For instance, you can leverage webviews if designing for Facebook messenger and interactive messages if designing for Slack.
• It’s good to plan for some “Greetings” conversations but tie them with the primary purpose of your chatbot to avoid wandering off topic — “Nice to meet you as well. What task can I remind you of?”
• And most importantly, have some fun