Five Design Tools for Voice UX

The number of products with a voice component grows daily – just look at the recent announcements of Google Home, the Amazon Echo Dot, and Samsung’s acquisition of Viv. Yet it’s hard to find examples of design tools and artifacts in the voice UX space.

Whenever we create a product or service, whether it’s screen- or voice-based, we aim for an exceptional user experience. We want to mock up ideas, vet them, and adjust before we commit to building, so we need tools and artifacts to support that effort.

Just because voice interaction is a relatively new technology doesn’t mean the fundamentals of user-centered design don’t apply.
– Kathryn Whitenton, The Most Important Design Principles of Voice UX


Voice UX tools used at Blink

Here are some of the tools and artifacts we’ve created during our time designing, evaluating, and developing voice UX.

01Text Scenarios

A staple in the UX toolbox, scenarios are great for any sort of conversational UI, too. They let us quickly flesh out the high level interaction between user and product.

Text Scenario

02Storyboards

Storyboards show the interaction in context, whether it’s in the kitchen, meeting room, or on the go.

Voice Ux Tools Storyboard
A one-panel storyboard showing a voice interaction in context.

03Videos

Videos add high-fidelity audio and visuals to the mix. They look and sound real, right down to the actual product voice used, though the entire dialog is scripted, with manually triggered responses using text-to-speech and the product voice module. (This same approach of serving canned phrases can be used effectively for Wizard-of-Oz style user testing.)

04Flow Maps

The conversational nature of voice UX makes for tangled flows. Unlike traditional, hierarchical phone tree dialogs, current mobile and ambient voice products are designed to be less scripted, so there’s a lot of branching and conditions that need to be represented for developers to build from.

Here’s a partial example from our Washington State Ferries Alexa skill:

Voice Ux Tools Flow Map
A flow map used on a voice UX project at Blink.

05Phrase Maps

Conversational UX also means dealing with the different ways in which people phrase their intent. For each user intent in the Flow Map, the Phrase Map identifies the phrasings or utterances the product will recognize.

Voice Ux Tools Phrase Map

And it’s easy to imagine a script that can then turn these human-readable phrasing specs into the machine-readable format for development:

Voice Ux Tools Phrase Script

Conclusion

At its core, interaction design is dialog design: the dialog between a person and technology, whether it’s mediated by a screen or a voice. We need design skills and artifacts to ensure we create great voice experiences, things that people will be able to use and want to keep using once the infatuation with the new technology has worn off.

Similar Articles