Creating Conversational Experiences (II): Build and Design

Cristobal Villar
Landbot.io
Published in
9 min readDec 12, 2017

Here it is, the second article of our series on Creating Conversational Experiences. It is said the better has to wait so let’s try to make it worth it.

To sum up, what we’ve seen thus far, let’s go through the main steps of the Planning stage:

  1. Objective. The goal your chatbot will pursuit.
  2. Functionality. What will the bot be able to do and what value is it going to add to your audience.
  3. Technological Approach. Based on rails, including Natural Language Processing…
  4. Audience. What’s the people it will reach like (their socio-demographic information will tell you which tone or channel you should use!).
  5. Channel. Facebook Messenger, Slack, Skype, Twitter, Web…

Now we’re going to dig into the building and designing process AKA the fight against blocks and arrows to create a beautiful tree your mom would be proud of!

1. The preliminaries.

A Christmas Gift Recommender?

Just like we can’t start watching a movie from the credits, we need some preliminary work before building our chatbot.

In fact, you can do a lot of things that don’t require you to be in front of a computer at all. In fact, after building +500 chatbots in the past two years, and going through many different building processes, I’m back to basics now and a pencil is my very best first friend.

List everything you want your chatbot to do: ask for email, give this or that other information, send you data through X app… Once your list is ready, start by drawing a ‘greeting’ circle and keep adding branches and concepts to it, like in the image below:

Once you've briefly designed the main flow and its features, it will be easier to move to the next step!

2. Visual or code?

When it comes to building a chatbot there are two main options in the horizon. The first one is using some visual-composing app — those that require no coding because their interface is 100% visual, usually based on blocks and arrows.

ManyChat’s beautiful visual composer.

This is great for non-coders seeking to build a competitive bot without manually entering hundreds of lines of code. Of course, it may come with some limitations, defined by the provider of the product and its functionalities. These visual bot-builders are usually less powerful in terms of AI (NLP, Machine Learning, training…) but faster and more cost-effective. SMEs, this is your best choice!

The other option is going for some highly-technical chatbot building tools, like those provided by IBM (Watson) or Microsoft (Azure Bot Service). These come with high technology features and provide a way wider range of possibilities, although its complexity is exponentially higher.

Some random piece of code, isn’t it beautiful?

You’ll need technical skills and time to write and review code, understand the algorithms behind — or build your own — and a ton of data to train that NLP or prediction capabilities.

3. Structure.

Keeping up with the movie analogy, 90% of the chatbots share a common structure. We’ll go through the framework we use at our company to build any chatbot, a generic structure. Then, I’ll explain some other useful alternative structures depending on the use case. Let’s go!

Generic Structure

Check the following chart — built in a couple of minutes with LucidChart, a highly recommended diagram tool — to discover what most chatbots look like from the inside:

The diagram is quite self-explanatory, but let me explain it a bit. Every chatbot starts welcoming users, like you would do with a regular, real-life conversation. That Welcome block usually includes guidelines on how to use the bot (type anything, press buttons, send voice notes…). Then we reach the Menu.

The Menu usually gives users some options they can choose from, and an extra CTA. 90% of chatbots have a clear purpose, and adding a CTA is usually necessary. Let’s imagine this bot wants you to subscribe to a newsletter. Options 1, 2 and 3 will try to convince you that subscribing is the best decision possible, but you don’t need to go through them if you’re already in!

After every option block, we prompt users to decide whether they need More info, which would lead them to the previous menu (fortunately hiding the already picked option, or at least providing visual feedback showing they’ve already been there) or they’re good. If they want no more info, there are only two exits: Bye bye in case you don’t want to know more

Finally, we like adding the possibility to Restart the flow. Some chatbots are meant to be ‘used’ just once, but I believe they should always give the opportunity to move back and forth in the flow so users feel like they’re in control of the situation.

Lead Generation

This Lead Generation flow is quite easy to understand: we ask for data until users don’t want to give more. Then, we provide more information until they’re convinced and want to continue filling in more data…

And that’s it. Just like a Landing Page with several CTA where we scroll down when we need to find out more, here we give the option to give data or get information to keep a perfect balance!

Lead Scoring (Lead Gen Variation)

This is a variation that includes some Lead Scoring in the beginning, for those cases where conversion is high but lead quality poor.

In this occasion, we make a personal data question and right after a qualification question (e.g. ‘What’s your budget?’) and, depending on the answer, we provide A) a generic response or B) perform a human takeover or provide specific information. Of course, we can add more intermediary steps to the process — more qualification questions — but this is the essence!

Support / Customer Service

Finally, one of the use cases big cops are most interested in: automating support using a chatbot to save — a lot of — cost.

In the flow, we can see how users type in a question or select a topic and they can choose between “Yes, that’s what I was looking for!” or “Not for me…” which would give them the option to try again or talk to some real Customer Support agent. The process could be 100% automatic but since most companies — especially for Tier-2 and 3 questions — invest in human resources, it makes a lot of sense to me.

4. Design

The #1 goal when it comes to design is being able to adjust to the whole brand/company/project identity. We need to think of a chatbot as the virtual, talking ambassador of our business, so let’s treat it carefully!

In the previous article of this series, we talked about the tone, or how the chatbot should act depending on what we want to transmit or who are we talking to. In this one, we’ll focus on the aesthetic part of the customization.

Like some of you may be already thinking, it depends a lot on where is your chatbot going to live how much personalization can we put into it. We’ll cover the three main scenarios:

Instant Messaging Channel

If yours is a Facebook Messenger, Telegram or Slack bot, you won’t be able to visually customize much more than the avatar, name, status maybe and that’s it.

KLM’s chatbot on Facebook Messenger

So, if this is your case, focus on the tone and the personality, the way the chatbot expresses things and take the book of style as a guideline.

Live Chat

Depending on the provider, you can customize a lot of things, from the background color to the header’s tagline or the font:

Intercom’s Live Chat

Website

This is definitely the most flexible channel, since it’s up to you how far do you want to take its design. With players like Landbot, you can customize anything and truly impress the original image of your company in a Conversational Experience.

Landbot’s Design menu, with +20 variables to customize.

5. Tips and tricks.

Finally, we’ll include here some quick-guide AKA tips and tricks AKA actionable advice for those of you wondering about the commandments of the bot-building process (IOHO):

  1. Introduce yourself. It’s all about the conversation so just the way you want to collect your visitor’s name, our experience tells us that creating a character with a name and a defined personality is the best way to increase engagement and therefore conversion.
  2. Explain what it is all about: One of the VIPoints: you need to play fair with visitors’ expectations. Use the first couple of messages to explain what they can and can’t do, how do the interaction mechanics work and what’s going to happen next.
  3. Keep messages short. You don’t expect people on Messenger to type 100-word messages, and your chatbot shouldn’t either. Cut to the chase!
  4. 3 messages in a row, maximum! Your chatbot is not an AK-47, and it’s especially frustrating receiving many messages in a row if your audience is on mobile. Stick to 3.
  1. Don’t ask for data in exchange of nothing If you start the conversation by asking for the birth certificate, your visitors will leave. Give them info in exchange and use visual rewards, like GIFs, when they complete key actions.
  2. Allow field changes: It’s quite easy to misspell an email, so give your visitors the opportunity to edit data by creating flow loops. It’s also cool to sum up the info gathered by using dynamic fields.
  3. Emojis 😎 are cool, images and videos are even cooler! Visual elements such as emojis, images or videos are great tools to get the most out of the interaction but beware of annoying fast-moving GIFs. In most tools you can use iFrames you can embed pretty much anything in a message, take advantage of it!
  4. Hide the textbox if possible: Again, it’s all about expectations. If you haven’t set up 100 keywords for every possible scenario, you better hide the textbox and give users a couple of options — buttons — that will lead them somewhere instead of receiving an error message after flirting with or bullying your lil’ bot.

And that’s it for the Build and Design stage! We’ll be sharing our experience with Testing, Implementing and Analyzing chatbot creation soon so stay tuned! And, in case you missed it, check our previous article on Planning the Creation of Conversational Experiences.

Don’t forget to share some love ❤️ — and some claps 👏 — if you’ve enjoyed the read and feel free to leave a comment with your questions or your personal experience when trying to build a chatbot flow!

Make sure you don’t miss any article of this series:

  1. Build and design.
  2. Planning.
  3. Test, implement and analyze.

--

--

Cristobal Villar
Landbot.io

COO and co-founder at Landbot.io and Helloumi. Economist with passion for markets and Customer Communication.