Google Home is very cool. We love it. Building an ‘application’ for Google Home (officially called Actions on Google) will allow you to build a voice-only interaction. But before jumping in building mode: How do you design for Google Home?

Getting the conversational design wrong is very easy in this case. And if you get it wrong, then users will be frustrated and you will lose a lot of engagement. Plus, you will then need to rebuild everything from scratch. Please get the design right!

In this short tutorial, we are going to design our first Google Home design with Botsociety

This tutorial is also available in video format. If you feel like reading, please scroll below it. Otherwise, click play!

First thing first, sign up on Botsociety (it’s free), create a new mockup and select “Google Home” in the choices below:

Design for Google Home: The basics

Then click the button “Start designing”. You will be brought to a new mockup state, that looks like this:

Design for Google Home: Start

Now the first thing that we want to do is to design the happy path. The Happy Path is the best user interaction possible, given our objective. It’s a good way to kick off for all the conversational interfaces, as it does not apply only when you design for Google Home.

1. Design for Google Home: The happy path

For this tutorial, we are going to build an “ItalianPizza” interaction; it will give you recipes and history for given pizzas. Interested users will also be able to get coupons and discounts from restaurants.

Our happy path, in this case, is a user that requires talking with Italian Pizza. He then asks for information about the “Margherita” pizza. He then accepts to receive discounts. Let’s design that!

Design for Google Home: The happy path

This is my happy path. While I design for Google Home, a lot of questions arise:

  • What is the personality of my bot?
  • Is the first question clear enough?
  • What is the best question possible at the end to reach my objective?

I may decide, for example, that I want a more funny, causal personality. Or a more concise, choppy one. This approach will also influence the remaining points. That’s up to your creativity!

Once the happy path is defined, I can start designing alternative paths that the user may take. Different paths may start from the very first moment of the interaction.

2. Design alternative paths

If you take a look at the first message, you can see that the user summons our Action by calling by name: “Ok Google! Let me talk with Italian Pizza”. Google allows another type of interaction too. The user may end up using your bot by asking Google a question that you declare to cover.

In order to add a new path, simply move your mouse over a message. A “Plus” button will appear: By clicking it, you will start adding a new path

Design for Google Home: The alternative path

Now you can write the new path in the green form:

A design for google

In this second path, the user takes advantage of the second possible way of interacting with your bot. It will say something like: “Tell me the history of Margherita”. Let’s add this message by clicking “Add”.

Try this design for Google Home

Now I’m looking at the second path. In order to get back to the Happy Path, I can click on the left arrow that appears when I over the message. We will do this later! I want to continue designing this path. Now my bot will say: “Ok you can talk with Italian Pizza”. And then the user will be brought to the main path, directly to the point where our bot talks about the Margherita pizza.

In order to do that, we can use the “Link to message” button:

Linking messages in a Google Home design

I can now select from the flowchart the message I want to link to:

A flowchart of a conversation in Google Home

Now I will link it back to the Margherita message. Great! We have just defined a simple, second path.

Once a message is linked, it will look like this in the preview:

The final design for Google Home

Now I will proceed to create other alternative paths. For example: What happens if the user asks information about something which is not a pizza? What happens if the user says “No” to the request for more information about the discount.

Once I’m satisfied with all the paths, I will user test my design to be sure my assumptions are correct. If you are curious, check out this tutorial about how to user test your design


Try Botsociety here! Please leave comments below if you have questions


Also published on Medium.

Comments


Vittorio Banfi

Co-founder and CEO botsociety.io

Related Posts

Tutorials

How to design a Facebook Carousel with Sketch

When designing a Messenger chatbot, one of the nicest message formats that you can send is a carousel. The carousel allows you to send multiple images, titles and multiple links for each element of a Read more…

Tutorials

How to create your first Slack bot mockup

In this tutorial, we are going to create a simple Slack bot mockup. Designing a Slack interaction before actually building it will help you save a lot of time. How? By previewing and prototyping your Read more…

Tutorials

How to design a Facebook Messenger mockup

In this brief tutorial, we will go through the basic steps of designing your first Facebook Messenger mockup. Designing this chatbot interaction is crucial to the success of your project. If you get it wrong, Read more…