How VERSA Designs User Experiences for Voice with Adobe XD

Alexa, how many voice skills are available through the Alexa Skills store?

You might be surprised to learn that the answer is more than 100,000. Over the past few years, voice-based interfaces have taken off. People can play games, order pizza, hear the latest news, or even pay credit card balances just by talking to a voice assistant.

VERSA, a member of SoDA, the Digital Society, was one of the first agencies to recognize the potential of voice for design and technology. The digital voice experience agency got its start working on the launch for Amazon Alexa, and now focuses on creating experiences for voice and other emerging technologies.

“We have a mission to create experiences for a better life,” says Tom Glover, Strategy Director at VERSA. “We want to use technology to help solve problems in a unique way, both from a human level and a business level.”

Designing for voice interfaces requires a completely different way of thinking of design. How do you guide a user when there are no visual cues? What strategies do you need to create intuitive but personalized experiences? How do you make voice interfaces accessible to different types of users?

To help understand these audio experiences and explain concepts to designers, developers, and clients alike, VERSA has adopted Adobe XD into its design workflows. As the first UX/UI design platform to support voice prototyping, Adobe XD is uniquely positioned to help designers tackle voice experience design challenges.

Situational design for voice

When designing voice skills, VERSA must consider the many ways that people will interact with the voice assistant. People might phrase things slightly differently, skip past steps, or refer to previous statements. That’s why VERSA relies on the principles of situational design to design voice experiences built on flexible modules. Rather than designing strict menu trees, situational design uses context, such as previous user actions and time of day, to guide the experience.

For example, VERSA teamed up with the All Blacks, one of the best rugby teams in the world, to create a special Alexa experience for fans around the Rugby World Cup. If a user already played the week’s quiz, the All Blacks experience might challenge users to retake the quiz. During the World Cup, users are prompted to listen to a match recap, whereas before the World Cup starts, they might get asked if they want to hear team previews.

Streamlining prototyping and development

After developing a conversational flow for the Alexa skill, VERSA relies upon XD for fast prototyping. Working with the Alexa UI kit, designers can quickly pull Alexa Presentation Language (APL) templates, APL components, and other elements into XD to prototype the user experience.

“Adobe XD is streamlining both prototyping and development because we can test an experience really rapidly,” says Tom. “An experience that looks good on paper might not work out in practice. Before, we might have identified issues and planned tweaks during the build phase, but now we can use the Adobe XD prototypes to test it out before putting time and effort into development.”

In addition to testing workflows, working with XD helps VERSA polish dialogue to achieve more conversational experiences. The ability to quickly test voice triggers and speech playback on an actual device helps refine voice skills and pinpoint the right tone, language, and style.

“One big insight with voice design is that you can create a perfect sentence that sounds great in your head, but when you hear Alexa read it out loud, it can sound really stilted and unnatural,” says Tom. “I know a lot of our creative content writers have changed how they approach writing, even for regular content, because they gained such a good understanding of what works in conversation.”

VERSA can even test out different types of voices supported by the Amazon Polly text-to-speech service. Using different voices can change the personality of the voice skill, so being able to test out voice changes with XD can streamline voice design.

Understanding an emerging technology

Prototyping also helps those new to voice quickly grasp the possibilities of this rapidly emerging technology. Before starting work on a project, VERSA meets with clients to talk about their core goals for the voice skill and use cases around the skill. But since voice is still an emerging channel, few clients have experience working with voice skills. They can have difficulty imagining how all the elements fit together.

Using XD, VERSA can work alongside a client to help them understand and even test out how different use cases might work with voice on an actual device.

“Most clients are interested in voice technology, but they don’t really know how it works,” says Tom. “They don’t understand the power and potential of using a tool like Alexa. And at the same time, they also don’t understand the limitations of the platform. Using Adobe XD to build a prototype in front of them brings them up to speed a lot faster, so we really get an understanding of their use cases.”

“We’re excited to see how Adobe XD continues to develop,” adds Tom. “Being able to bring ideas to life so rapidly really helps us communicate and refine approaches so that we can create the best voice solutions for our clients.”