Designing conversation flows

Now that we understand the components that make up a chatbot, we can start to design the conversations that we want our chatbot to handle. Designing conversations now makes it a lot easier to visualize how the chatbot will work, making it easier and quicker to build. Designing conversations in this way makes them easy to understand, making it a great tool for creating chatbots with people who can't code.

This design method will work for voice or text chatbots; just imagine the textboxes as speech bubbles.

Starting with the perfect conversation diagram

Everything has to start somewhere, so it may as well be perfect. The aim of this stage is to have a basic conversation diagram that we will later expand into a detailed flow diagram.

To do this, you need to think about what the perfect conversation with your user would be. Start by writing down what the user will say and how the bot will respond. This is an example of ordering a pizza:

Ordering pizza conversation

This can be done in lots of ways: with flow diagram software, using two phones or two messaging accounts, or simply with pen and paper. The aim is just to understand how the chatbot is going to be interacting with the user and what utterances the user is likely to say.

Conversation flow diagrams

Now that you have a basic conversation diagram, we need to make it into a flow diagram. A flow diagram is different from a conversation diagram in a few key ways:

• Each part of a flow diagram has its own symbol, making it easy to understand what is happening at each stage.
• A flow diagram contain more than just the conversation. It also describes the logic, information, and processes that take place behind the scenes.
• Flow diagrams aren't linear. This means that they can describe lots of conversations where the user says different things.

To properly describe our chatbots, we need to have a symbol for each of the parts of the conversation. To start with, we are going to be using six, but we can add more symbols later on:

Flow diagram symbols

To create our flow diagrams, we'll be using flow diagram software. There are a couple of reasons we want to use flow diagram software instead of a normal document or even creating them by hand:

• They are easily editable. We are going to be changing the stages of the conversational flow and the text of utterances and replies as we work through this book. Having to redraw the diagram every time you make a change would be very time-consuming.
• It's the easiest way to make flow diagrams. The symbols snap into place and are easy to edit and modify. Doing flow diagrams in Word would be far more time-consuming.

In all of the examples throughout this book, we'll be using www.draw.io, but if you have a different flow diagram software that you prefer then that will work too. We use draw.io as it's free, online, and is very easy to use.

Creating a conversation flow diagram

Now that we know the parts of a conversation flow diagram, let's create one. We'll use the same pizza order conversation that we used earlier.

Start at the very beginning of the conversation. Create a symbol for the user's first utterance. This first message from the user is a really important one as it will trigger an intent:

Utterance triggering an intent

Now that the OrderPizza intent has been triggered, our chatbot can start asking the user about the pizza they want to order. We'll start by asking what topping they want and they reply with "Hawaiian":

Starting the intent

Later on, we want to remember that they chose Hawaiian as their topping so we need to store this as a slot. We store the information against a slot name, so in this case, it will be topping = Hawaiian. As well as storing the slot, we need to carry on the conversation, asking them what size of pizza they want:

Storing a slot value

With the response from the user, we store the size in a slot and proceed to the next stage. We repeat the question, answer, slot process for the size of pizza the user wants.

Now that we have all of the information that we need, we need to tell the pizzeria that someone has ordered a medium Hawaiian pizza. For this, we'll use the action symbol and make sure to include the slots that are required. When we include slot information into anything, it is normal to write it as the slot name wrapped in curly braces.

As well as telling the pizzeria about the order, we need to let the user know that their order has been placed and tell them when to collect it. Again, we use the slot name wrapped in curly braces to customize the message with slot information:

Full pizza ordering flow diagram

User stories

User stories are a vital tool in the design and testing of chatbots. They are stories about fictional users, what they want, and how they will interact with your bot. When we create a user story, it needs to be as close to a real user as possible. They should be based on a real user or the type of user that would be using your chatbot. If you have existing customers that you are wanting to target your chatbot toward then you can create data-driven user stories.

To create a user story, start by describing the user and why they are talking with your bot. Examples of the pizza ordering bot might be the following:

• Chris, a 23-year-old joiner. Wants to order a pizza on his phone so he can pick it up on the way home from work.
• Claire, a 35-year-old bank manager. Ordering a pizza using Alexa while she watches TV.

The user descriptions don't have to be very long or complicated, but they have to represent the kind of users the bot will get.

For each user, go through the flow diagram pretending that the bot is talking to that user. The aim of this is to test your flow diagram before we start building the bot. If you find that the conversation doesn't work for a certain part of the flow diagram, changing it now will save you time later on.

For simple examples like this pizza order, there won't be a big difference between all of the conversations, but user stories will become more important as we create more complicated flow diagrams.