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

The don’ts

Voice is one of the most exciting challenges for UX designers. Give it a whirl with the latest Adobe XD update, and remember, even though it may feel totally different, the process is pretty much the same. Keep it simple, focus on the user, and design, prototype, share and iterate.

Further reading

For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.