First introduced via the launch of the Echo in 2015, Alexa has been hugely successful for Amazon. So much so that the company has expanded Alexa’s reach into a range of Amazon home smart devices, capitalizing on her huge range of operations and abilities. It is possible to develop your own Alexa skills, and thus, you will ned to create your Alexa design first.

It is important to remember that Alexa has her own personality and this is exactly what draws customers to using those devices. Keep this in mind while creating your chat scenarios, as your aim is to keep people interested in using you and not push them away. Think about what you expect to hear from Alexa, and build your design that way!

In this tutorial, we are going to walk you through your first Alexa design with Botsociety.

Start off by opening a free account on Botsociety, then create a new mockup and select Amazon Echo amongst the choices. Remember to give your mockup an identifiable name so that you can easily refer back to it.

Alexa design tutorial

 

Click on the “Start Designing” button to create your mockup. You will now find yourself in front of the Alexa design screen which will look like this:

Alexa design first step

As you can see, on the left side of the new mockup will be where we will type Alexa’s phrases, and on the right side the user’s phrases. However, before we start typing, it is important to know what your main line of conversation will be. We call this “the happy path”. The happy path is the most common interaction that you can anticipate. Once we have established a happy path we can also create alternate scenarios and link them to the happy path.

Alexa design: Your Happy Path

For the sake of this tutorial we have created an Alexa design interaction called “InteriorHousePainting”. Users can ask Alexa about the best type of paint for interior walls, find places to buy the paint, and also look for painters to do the job if they prefer that option.

For this interaction, our happy path will be a user requesting to chat with InteriorHousePainting to understand more about the best paint for interior walls, and to then search for the best location to buy this paint. So let’s get started!

Alexa mockup part 1

This is our happy path. Remember: it’s up to you to decide how you would like your bot to sound. Keep this in mind when you are creating your Alexa design, as you really want to make sure you keep your message in line with how you want your business to come across to your potential customers. You can always ask yourself the following questions to help you determine your bot’s character before you develop your mockup:

  • Do I want my bot to have a personality, and what kind of personality?
  • Is my first question clear enough?
  • Are my questions and answers logical and do they lead to my end objective?

Now that our happy path has been established we can work on alternate scenarios. You can add as many of these to your Alexa design as you wish. These alternative paths can start from the very first interaction, or branch off at any point.

2: Linking Alternative Paths

Instead of asking Alexa to talk to InteriorHousePainting, we can instead imagine a scenario where the user asks Alexa to help with deciding a color, or for more information on painting kitchen walls. In order to add an alternative path just place your mouse cursor over any message and a “plus” button will appear. Click on this button.

Alexa add path

We can start the new path or scenario in the green box.

Alexa design part 4

In this second path, we tell Alexa that we want to paint our kitchen wall by typing in the new text and hitting the “add” button. From here we can either go back to the happy path by hitting the left arrow that appears when we hover over the message, or we can continue to work on this second path. We will work on the latter right now.

Alexa select previous path

In this path Alexa will respond by saying “Sounds great!”, and from there we can link this path to the happy path. To do this we will use the “Link to message” button below the message.

Alexa design link path

From here we can choose the message we want to link back to in the flowchart.

Alexa link back

I’m going to link back to Alexa’s first message in my happy path. Now we have created a simple second scenario in our Alexa design – alternative paths can, of course, be as short or as long as you want them to be! Our linked message will now appear in the preview:

Alexa design

Now that we know how to link one alternative path we will continue through the above steps to create as many as we need. Remember to ask yourself questions such as “What if the user is looking for a certain service?”, or “What if the user answers no instead of yes?”. For example, in our InteriorHousePainting design we could assume that the user may wish to look up local painters to do the job for them. Once you have designed all the main paths, you can test your bot, export it, and share it with coworkers and potential clients.

Alexa last screen

This user testing tutorial will show you how to user test your Alexa design to see how well it performs.

You can try Botsociety here. Please leave comments below if you have any question, I’ll be happy to answer.

Comments


Jade Anna Hughes

Creative writer

Related Posts

Tutorials

Chatterbot design in 5 easy steps

Once upon a time, you could only find chatterbots in science fiction shows like Star Trek. Now, artificial intelligence is at anyone’s fingertips. It’s no secret: humans love to talk! And they love interfaces that Read more…

Tutorials

How to embed a chatbot into your website

So you are building a chatbot, and you would like to show it off on your landing page or website. How do you do that? In this tutorial, we are going to see how to Read more…

Tutorials

How to design a Facebook webview

In this tutorial, we are going to design a Facebook webview using Botsociety and Sketch App. A Messenger webview allows your users to visualize a website inside the Facebook Messenger experience without getting out of Read more…