Best Practices for Voice UI Design and Prototyping in Adobe XD

Illustration: Justin Cheong.

One of the most exciting additions to Adobe XD to date — voice prototyping — has been unveiled in the October release, unveiled during Adobe MAX 2018’s keynote address in Los Angeles. It makes XD the first and only UX/UI platform to seamlessly connect screen and voice prototyping in one app.

The new feature includes voice triggers and speech playback, and combined with Auto-Animate, can be used to create high-fidelity prototypes for web, mobile, and voice-based devices that use the likes of Amazon Alexa or Google Assistant.

“Voice, as a form of interaction, is increasingly becoming a part of digital experiences across lots of different surfaces,” explained Mark Webster, director of product at Adobe, who focuses on voice integration for Adobe XD.

“Whether it’s voice search in a mobile app, speech playback as part of an in-car navigation system or retail kiosk, or a new app for a voice service, designers need access to the medium of voice, so they can design, prototype, and share their work. We decided to integrate voice with an easy, straightforward approach that feels natural within XD. If you can drag a wire and type some text, you can now work with voice.”

Workboard in Adobe XD that illustrates menu options for voice prototyping.

Setting a voice trigger in Adobe XD.

Applying Visual Design Principles to Voice UI

Voice services might feel entirely new, but the process of iterative design and prototyping that works for visual design still applies. In fact, using the same process you’d use for visual design is the key to effective voice experiences. Mark pointed out that there are some unique nuances to working with these services, but it’s helpful to stick to the basics.

“Start with something simple, interact with it, share it for feedback, and keep iterating,” he recommended. “In traditional visual design, we designers have a lot of UX/UI conventions to rely on. Hamburger menus, pull-down-to-refresh, and common patterns all help us create experiences that users will know how to use. Voice services are so new that we don’t yet have standards to work with. But the broader creative community is going to establish them, so we viewed it as our responsibility to empower designers with access to voice, so they can start figuring out what works best.”

An image illustrating the voice design workflow in Adobe XD's free UI kit for Amazon Alexa.

Design voice first with Adobe XD’s free UI kit for Amazon Alexa.

Focus on the user

Designing a voice-first user experience and building skills that are natural and delight users requires a slightly different mindset, but it always begins with a focus on the user and the problem they’re trying to solve.

“Think of the environment the user will be in, what context they’ll have going on, and what it is they’re trying to do,” Mark suggested. “With all interface design, we’re always aiming to reduce friction for the user. The cost of friction is especially high for voice-first user experiences and can get frustrating really quickly, so make sure you think about the best ways to keep things rolling as you create your experience.”

When you design, prototype, and share in order to test the voice experience, make sure you’re focused on solving the right problem. “You could spend a lot of time optimizing different ways to say the same thing,” Mark warned, “but your design and prototyping time is better spend creating a delightful experience.

We’ve asked Mark for some do’s and don’ts when using the new voice prototyping feature in Adobe XD:

The do’s

Remember the purpose of your prototype. At the beginning of the process, the designer will often be the one creating the demo of the prototype, so they don’t need to worry about making sure users know what to say. But if someone else will be interacting with it, you’ll need to make sure you’ve designed the flows to make sense.
A common workflow is to use a voice trigger to transition to a new artboard, then add a time trigger with speech playback on that artboard. This lets you use both speech and a visual response to your voice trigger.
If you want to add lots of different voice triggers to an artboard but don’t have many objects on there, you can create a bunch of small objects, for example red circles, that you can then add voice triggers to. If you hide those red circles in the layers panel so they’re no longer visible, the voice triggers will still work in preview!

The don’ts

There is often an impulse to add hints or comments to voice prototypes, so the user knows what to say. But make sure you’ve thought through how users will know what to say in the actual product experiences you’re creating.
Find the right time to optimize your voice experience in development, rather than in design and prototyping. You could spend a ton of time finessing the voice triggers, and adding additional ways to say the same thing, but at some point, it won’t do much to advance the voice design process, and it’s better to make those tweaks using the actual voice technology that will be implemented.