Design Thinking on Voice UX
--
I come up with a Voice UX approach after studying conversational UI for a month. I share it in a case study with plenty examples.
As a product designer who’s thrilled with the rise of voice-driven experience design, I couldn’t help myself or stop my impulse to design an Alexa skill any more.
Two weeks ago, I designed an Amazon skill for Laundroom, a cross-platform service that helps college students with completing laundry duty. I initiated the Laundroom project back in 2016. Visit here to see a snapshot of the Laundroom mobile app and the Laundroom watch app that I designed.
To move from interface design to interfaceless design, I have read a lot and spent time thinking about conversational design from a design thinking perspective. In this article, I would like to share the VUI (short for “Voice User Interface”) design approach that I created after studying Amazon’s voice design guideline and other blogs (special thanks to Capital One @Capital One Labs, Natasha Rajakariar Natasha Rajakariar)about designing for Alexa skills.
If you are curious about my VUI design process, or if you are looking to design a Alexa skill yourself in the near future, this article can help you get prepared, save time, and hopefully, kickstart your Alexa VUI project right away.
TL;DR
In VUI design, designers need to think more like engineers. We need to consider the intents, the utterances, and the slots when we design an Alexa skill conversation. I put together three key resources to help you wrap your mind around Alexa Skill design:
If you have time for one link, read “Design Your Voice Interaction” by Amazon.
If you have time for one more link, read “Introduction to Alexa Skill” by Amazon.
If you don’t like reading, you can watch this online webinar by Amazon.
Finished? Okay, here you go, my VUI design process.
Fergie’s VUI Design Process
I have practiced many design methodologies and process, including the design sprint by Google Ventures, Contextual Design methodology by Karen Holtzblatt and Hugh Beyer, and other design process used internally in Global 500 companies. Having practiced all these processes, and combining the voice experience design process recommend by Amazon Alexa Design, I created with this four-step voice experience design process that I found quite thorough:
Let me introduce what are the four steps in detail, and how this approach works.
Step 1: Identify Value
Before we get really high about a Alexa skill idea, it’s important to ask couple core questions:
- Is this voice interaction necessary?
- Is it better than interface interaction?
- Does the use scenario you imagine actually exist?
- Will the voice interface become the primary interface in your use scenario?
I suggest to proceed if and only if your answers to the questions above are all yes.
Similar to how we validate the existence of a problem in any traditional UX method, we need to validate the need for voice interface as well. I remember when I designed for a watch app, I made sure it’t not mini mobile app, or a mobile app moved to a device with a smaller screen. It exists to provide additional value that a mobile app does not provide. Alexa skill is not a “faceless” version of any of the software or mobile apps you designed before. Think carefully about what features you want to include in an Alexa skill. A certain amount of user research would be really helpful in assisting answering your questions.
Step 2: Compile Conversation
After determining what task(s) we’d like Alexa to assist with, we need to consider the essential information flow to complete these jobs-to-be-done. What is the minimal information exchanged (MIE) that will get the job done? What are the key decisions that users need to make? What response will Alexa give corresponding to these decisions?
Think about this step as building information architecture (IA)for interfaceless design. The major difference between IA in interface design and IA in interfaceless design is that IA for interfaceless design is unidirectional, meaning that users can’t go back to the last step in a conversation flow. Remember that users cannot simply hit “return” or tap “cancel“ without continuing to talk. It’s also important to keep in mind that users cannot interrupt Alexa while Alexa is talking. We need to find a way to loop the conversation back to allow human errors and mistakes.
Step 3: Explore Possibilities
After establishing the information architecture, it’s time to do our brainstorming around conversations.
Consider this step as a brainstorming session in voice interaction design. Our goal is to do our best to exhaust possibilities for users to express their intents. This can be really complicated as users might make incomplete or overwhelming commands that Alexa does not understand. Users might also try to express multiple intents in one setting. It’s up to the designers to design Alexa’s responses when these uncommon situations occur.
Step 4: Model Interactions
Instead of demonstrating interactions using linked hotspots, designers need to build VUI flow with Alexa’s language. That means, we will use intents, utterances and slops.
Let’s take a look at what all these are.
In pure, plain English:
Intent = The JTBD (Jobs-to-be-done), what users want to do
Utterance = all the things that users say to communicate that intent
Slot = what Alexa reads to understand a corresponding intent
(@screenmedia wrote a great article explaining these terms. Read on if you need more examples.)
VUI designers will think like engineers at this last step. We will connect what users want to do, the actual language that was spoken, and what users want to do as part of that intent to build an interaction model. I find it efficient to build an interaction model script first to show how intents, utterance and slots are connected.
Curious to see how the code looks like? I created an example (not an engineer, just to give you a sense) and made it pretty so you can read (or not):
You reach the bottom!
This is the four-step VUI design process that takes into account the VUI guideline created by Amazon and my original UX process.
If you wonder how this was applied to Laundroom, please visit here.
More sharing is coming
After I completed the Alexa project, I want to spend time and to put together a set of google document/sheet templates that I designed and used in this project. This will not only help me with my future VUI projects, but also help anyone who wants to kick start their Alexa skill project immediately. These templates include Google folder structure I used to document the whole Voice UX project, Google sheet templates that I used to document scripts at different stages of the process, and the tools that I used to build and demonstrate this conversational design.
If you think this is a good idea and you are looking forward to see me sharing my detailed work flow, please give this article a thumbs-up.
I will share it when it’s ready in my next article in this Alexa Skill series. I promise :)
Please do leave comments below if you are also designing for voice UI, or if you have other learning that you would like to share with me and other readers. Your suggestions are always welcomed!
Thank you very much for reading and supporting!
I hope my two cents benefit you. If you find this article helpful, you ♥ it and spread this idea. Please stay attuned and follow me if you are interested in knowing what I observe, experience and learn in my life as a product designer.
Find me on Linkedin.
