Create a Voice Prototype with Adobe XD

Voice technology is going very fast and job positions like Voice UI Designer are starting to be requested everywhere. Thanks to Adobe XD we can now test voice prototypes on a Google Home or Amazon Alexa Device.

Starting

To start we choose a theme for our Google Action or Amazon skill (the procedure is the same, the only change is the Adobe XD plugin that we are going to use). I chose to do a Simpsons Trivia voice prototype, I selected some pictures of Simpsons characters and wrote a list with few true or false questions.

Don’t ask me why but I found that the size of these artboards (5000x1920) works the best in the cards for Google Action. So for each artboard insert a simple png of the Simpson Character and then I give a name thinking how to use these images.

The flow

I’m making this voice prototype as easy as possible, also because Adobe XD It isn’t a mature tool yet for creating complex voice prototypes. So let’s keep it really easy and here is the flow:

  • Start: This is for breaking the ice with our users, our Google Assistant will welcome them and ask if they want to play with a simple Yes or No question. ( E.g “Welcome to the Simpson Trivia, are you ready to play?”)
  • Questions: As mentioned before it's a true or false trivia, so we should keep our questions syntax as easy as possible ( E.g “Lisa’s favorite instrument it’s a trumpet, true or false?”)
  • Again: The user answered wrongly, we ask if they want to start the game again with a simple Yes or No question. (E.g Doh! It’s wrong, do you want to try again?)
  • Win: The user won, let’s congratulated him. (E.g “Congrats, you are a real Simpsons fan!”)
  • End: This is what they get if they answer No to Start and Again, we just say bye in a good manner…(E.g “ Ok, eat my shorts!)

Prototyping

Let’s start from our welcome screen, we will start with a speech playback triggered by the timer set to 0s. (Without it is impossible to create a voice prototype)

So now we need to activate our Voice Assistant Mic in our prototype. For this purpose we need to use the Voice trigger, setting one on Yes that directs on the first question and one to No that directs to “End” with Bart…

We should do the same with the True and False questions. If it’s correct send the user to the next question, if it’s wrong send users to ‘Again’.

You can insert all the questions you want, but for practical reasons I'm just doing 3 questions only, after I linked everything the final result is this:

If you want you can download the final Adobe XD source file here, so you can skip the steps mentioned above… have fun!

Testing

In order to test our voice prototypes with an home assistant device we should download the Adobe XD plugins for Google Assistant preview or Alexa preview.
We are using Google Home device for this process, but is the same with Alexa. Go in prototype mode > select the starting artboard > press Alt + CMD + P or click on that tiny Lego brick icon in the bottom left corner. Then click on your “Start” artboard then click on the plugin.

Check if the plugin detected all the artboards,then click Continue. Now It’s time to set an Invocation name for our Google Action. In this case I will use ‘’The Simpson Trivia” end then click on Export.

Now if every thing it’s alright you should link you Adobe XD account to your Google Assistant device just asking ‘’ Hey Google, talk to Adobe XD.” (your Google account mail needs to be the same of the Adobe one).

The Adobe XD action will open (yes your voice prototype is hosted by Adobe, don’t worry I will create soon a guide for deploying this prototype with the Google Actions Console.)

Now you can text or pronounce the invocation words you choose before, for me are “The Simpson Trivia” and start to play! I’m using the Google Assistant app on my iPhone to show you some screens but it works also with my Google Home. Hope you enjoy this article, please also join our new community of Voice Designers on Facebook!

Follow us also on:

InstagramTwitterBehance DribbbleWebsite

--

--

--

Product Designer & obsessed with @figmadesign

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Four Ideals that Built RS21

Closing the gap between Artists & Collectors

Skype Virtual Backgrounds: Get The Best 300

Case Study: Becquerel Brand

FILM & WRITING: The Seven Step Process

We’ve Put Together a Massive List of Over 200 Free UX Books

Design Powerful & Impactful “Coming Soon” Pages

Project Work: Elaboration

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
uxbly

uxbly

Product Designer & obsessed with @figmadesign

More from Medium

How to ace your designing by Typography?

Free Tech Leads from managing documentation

Choose India As Your Next Destination for Best Offshore Development Services

HOW WE MADE BIKE RENTAL BUSINESS WEBSITE!