First hand visitor insights in real time. Learn more!

Table of Contents

image_of_robot

Design your Chatbot User Experience From SCRATCH

2017-07-19

There’s a lot of buzz around chatbots lately. In fact, some claim that it’s the next big boom in the world of UX. Facebook launched its platform for Messenger, that people consider as an “information bot” rather than a chatbot. Twitter users even managed to “corrupt” Microsoft’s innocent AI chatbot in less than 24 hours.

However, that’s not why you are here at the moment because these are just secondary pieces of information in this article. After some research, I decided to test myself in a challenge. My goal was to design and set up a working chatbot for business purposes in less than 2 hours.

In order to demonstrate the true potential and scalability of this technology I stuck with one rule.

The project must not require any prior experience in coding!

If you stick around, you will learn:

  • what core UX practices should you  involve
  • what tools you need to create a simple bot on your own

Let’s get started.

About the project

One of the huge benefits of having a bot is that you can frame it as a decent automated customer service equipment. It can be a great addition to your conversion optimization toolbox. I decided to create a simple chatbot that would allow customers to view the menu and book tables in a few steps. This would also mean that the business — let’s name it Barnie’s Restaurant — could automatize these processes. Having a nifty little feature like this can lead to increase customer experience.

The two basic tools I’ve used creating the chatbot:

  • a whiteboard and some markers
  • a bot building platform

There are plenty of them out there to choose from and you can easily pick one that fits your purpose the most. I went with Motion AI. It has some nice templates and pre built modules ready to deploy. The UX is great and it offers a smooth, convenient experience overall even if you’ve never done anything like this or have no programming experience so far. In other words, it’s not just user- but also very beginner-friendly. Another good platform I would recommend is Chatfuel since it’s also very user-friendly. Botsify is great too, but it can be overwhelming for newcomers at the beginning.

The design process:

The design process

Figure 1.

Step 1.

Before jumping into the actual design process I always like to work my way around the problem itself. When people hear the word “problem”, they usually think of something wrong. I like to think of problems as questions that need answers. Some can be easy to answer while others can be challenging. At this point you should decide the following:

  • What is the main problem, what do I expect by solving it?

If you can’t answer this question, the next thing you should decide is the why? Is it because of complexity or not?

It might sound funny but it’s important to ask this question. You have to make clear that you have at least one reason to invest resources into the project.

Step 2.

Make sure you’ve gathered enough data about the users. Not only the quantity matters but quality insights are also required to answer the following question:

  • What describes my users/customers the most?

If you are familiar with the world of User Experience Design, the term “Persona” should ring a bell. In case it doesn’t, there’s no need to panic – it’s not rocket science.

  • What personality would correlate the best with the Personas?

In the example of Barnie’s little assistant Nom-Nom Bot, I decided to go with a slightly informal tone.

Step 3.

This is the part where the magic happens, the actual design flow. If you look at the whiteboard it might look like a big mess at first but the core elements are easy to spot.

how to do a website design flow

Figure 2.

Things to keep in mind during planning:

1. Avoid wall of texts:

No need for long introductions about how awesome your company is. That’s why you have an ‘About’ page on your site. If you really insist on introducing it, make a separate option for it.

This isn’t a book club.

Introduce the bot in a polite way, keep it short, clean and don’t waste time.

A computer shall not waste your time or require you to do more work than is strictly necessary.” — Jef Raskin

2. Offer only what you can fulfill:

Don’t try to pretend that your bot is a human because this will create a false illusion, which misleads your users/customers and instinctively increases their expectations.

At the beginning, my greeting was followed by this statement:

I’m Barnie’s assistant, Nom-Nom Bot!

This simple statement will make it clear to the user that s/he is talking to a chatbot. Don’t even try to go fancy and name it <something> AI because this will automatically trigger unwanted conversations that have nothing to do with your business.

3. Provide fearless exploration:

Think of your chatbot as if it was an app that the users want to explore. During the exploration, they click/tap on things sometimes just out of curiosity. The worst you can do is not providing a way back thus making them feel that they might regret the next step.

In the Nom-Nom Bot project, I decided to let the visitor navigate around freely by letting him know that going back is an option indeed.

Figure 3.

4. Optimize for mobile:

You might think that you have plenty of space to fit information in but nothing is more annoying than a stuffed small screen that you have to scroll through. If you compare figure 3 with figure 4 you can see the difference.

how to optimize chatbots for mobile

Figure 4.

5. Have common answers ready:

The less they have to type, the faster and smoother the flow will be.

Figure 5.

6. Provide a way of exit:

A common practice in business etiquette and protocol is offering the guest a seat that provides a clear view over the room’s exit. The psychology behind this practice is that the guest’s position gives him/her the option to leave, building up trust and comfort at the same time.. Needless to say that this applies also to the world of UX and a good designer keeps this in mind.

 Provide a way of exit on an e-commerce website

Figure 6.

+1 Always thank them:

They might go through the whole process or back right away as soon as they see that it’s a chatbot. It doesn’t matter at this point if they leave with a confirmation process or not, one thing is for sure:

“You MUST thank them.”

say thank you to your customer

Figure 7.

Conclusion:

If you have ever considered that you might need a chatbot, well, I have good news. With some very basic tools and a little bit of investment, you can make yourself and your business a real favor by creating a chatbot. The growing hype around AI will make this reasonably fresh technology future-proof.


Don't forget, sharing is caring! :)

21 Comments

  • Facebook Customer Support
    2018-03-31 at 09:00

    Thanks for sharing the useful project. Chatbots for Viber give their user a lot of flexibility to engage with a human user with conversation and follow the direction given by a user. Chatbots have features like persistent menus, quick replies, templates to enrich gallery and so more.

    Reply
    • Sophie
      2018-04-04 at 11:21

      Hey there! Thanks for your kind feedback. Glad you like the content!:)

      Reply
      • Cheff
        2018-12-30 at 13:13

        great post! thanks for sharing us!

        Reply
  • bingo xxx
    2018-05-10 at 13:45

    great post! thanks for sharing us!

    Reply
    • Sophie
      2018-05-14 at 13:10

      Glad you liked it!

      Reply
  • George
    2018-08-09 at 01:18

    What tools do I need to set up chatbot

    Reply
    • Sophie
      2018-08-15 at 11:34

      Hi George, I would recommend Flow, or Chatfuel. These tools both have drag ‘n’ drop style editor, so you don’t need to have any coding skills at all. However, if you can offer to hire a developer for the job, I would suggest designing one for your website specifically, simply because that will be “hard-coded” into your website and will be more optimized.

      Reply
  • Sage Support
    2018-10-10 at 13:30

    i want a chatbot, well, please suggest me the some the basic tools u was talking about in the article and what is the cost ?? i want to make to grow my business creating a chatbot. please suggest me the best .

    Reply
    • Robert
      2018-11-13 at 12:30

      Hey, I would suggest you try Mobile Monkey. You can go with the free version or check their pricing here: https://mobilemonkey.com/prices The onboarding process is easy and well explained, plus it has advanced features such as the Chat Blaster, which automates makes mass messaging.

      Reply
  • godlike
    2019-01-29 at 11:26

    What tools do I need to set up chatbot

    Reply
    • Robert
      2019-01-29 at 14:40

      I would most definitely recommend you to try Mobilemonkey, from Larry Kim, the founder of Wordstream. They have an awesome platform to build FB Messenger bots!

      Reply
  • Quickbooks tech support
    2019-09-06 at 07:20

    Yes, it’s a huge benefit of having a bot. Its a great pleasure reading your article post

    Reply
    • Robert
      2019-09-17 at 10:41

      Glad you liked it!:)

      Reply
  • alvishnu
    2022-03-23 at 08:30

    Excellent Blog! I would like to thank you for the efforts you have made in writing this post. I am hoping for the same best work from you in the future as well. I wanted to thank you for this website! Thanks for sharing. Great websites! I can also refer you to one of the Best AI Chatbot Services in Hyderabad.

    Reply
  • alvishnu
    2022-05-21 at 13:04

    Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made in writing this awesome article. I can also refer you to one of the best HR and Recruitment Chatbot in Hyderabad.

    Reply
  • alvi
    2022-06-17 at 14:03

    Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made in writing this awesome article. I can also refer you to one of the best Chatbot services in Hyderabad.

    Reply
  • Vinu
    2022-06-27 at 09:36

    I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it. I can also refer you to one of the Best Chatbot Services in Hyderabad.

    Reply
  • Vinu
    2022-06-30 at 16:04

    It is very helpful and very informative and I really learned a lot from it. I can also refer you to one of the Best Event Chatbot Services In Hyderabad.

    Reply
  • Naveed Ul Aziz
    2022-07-18 at 10:58

    I usually think of informative content as dull but necessary for learning. Interesting informational articles like this are rare. This material is informational without being boring and intimidating. Thank you.

    Reply
  • Invocom
    2022-07-20 at 10:52

    How you managed to take this informative article and turn it into an interesting piece of writing is simply amazing to me. I am very impressed with your writing abilities. I am bookmarking this content

    Reply

Leave a Reply