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!
