Designing and Prototyping with Voice in Adobe XD

A Slide Announcing Voice in Adobe XD
A graphic announcing voice features in the newest version of Adobe XD during the Adobe MAX 2018 conference keynote.

This morning, during the keynote address for Adobe’s MAX 2018 conference, I demoed the latest enhancements to our Adobe XD design tool for UX/UI designers. One of these enhancements is something that I’m particularly excited about—and also personally proud of. That’s the new ability to design, prototype and share with voice as a medium.

Let’s say you’re designing a product that has a voice search feature built into it, perhaps something similar to Spotify’s mobile app. Now, in addition to being able to design and prototype the visual layout, you can also define the actual voice inputs and outputs for that assistant. That means you can just type in the exact phrase that you want the app to listen for—XD will actually listen for you to utter the text that you enter and, when it hears it, will advance the prototype. And it also means that you can type in the actual responses you want to hear back from the app—this latest version of XD includes the powerful Amazon Polly text-to-speech service right in the app. It’s ridiculously easy to build these voice interactions; the video below demonstrates this in action.

The upshot is that Adobe XD is now the only design tool that allows you to create realistic voice prototypes that emulate any voice-activated system or voice assistant. Even better, because this is integrated into XD alongside the app’s more “traditional” design tools, it becomes incredibly easy to revise and refine your voice designs very, very quickly. That ability to iterate has been the missing link in voice as a medium. Even as Amazon Alexa, Google Assistant, Siri and other voice assistants have taken off like wildfire, designers working in voice have been stymied by the nearly complete lack of voice tools oriented around the design process. All that changes today.

The launch of these voice features is especially satisfying for me for two reasons. First, I’m a big believer in the idea that voice is well on its way to becoming an integral part of experience design. This just seems like a foregone conclusion to me. Smart speaker growth is already torrid, and voice assistants are becoming a natural way for a new generation of users to interact with technology. What’s really exciting about this is that voice as a medium is still so young. There are lots of challenges still to be resolved with voice, and it’s designers who are best suited to forge these new solutions.

I’m especially proud of voice in XD because I was able to play a role in making this all happen. Early in 2017, I was introduced to Mark Webster, who was then the founder and CEO of Sayspring, a startup building a design-oriented voice prototyping tool. As soon as Mark demonstrated Sayspring to me, a light bulb went off in my head—I recognized immediately that what he and his team were building was something every designer should have in his or her toolbox.

Readers of this blog may remember that later that year I published an extensive interview with Mark about the challenges of designing for voice. That interview was my way of evangelizing the importance of a design-oriented approach to voice. This was intended for the design community at large, but it was also not so subtly intended for an audience within the halls of Adobe as well. I started lobbying my colleagues to consider voice as a new medium that Adobe XD should address, and pointed to the interview as a kind of primer on the concept.

Then, in October of last year, Mark joined us at Adobe’s MAX 2017 conference in Las Vegas, where we found time for him to sit down for a private meeting with Paul Gubbay, Adobe’s vice-president for design and web products, Andrew Shorten, senior director of product management for Adobe XD, and me. Mark demoed Sayspring, showed us how to build a voice prototype in minutes, spoke commands to an Echo device and we heard it respond. Immediately Paul and Andrew saw the potential that I had seen. That kicked off a series of discussions that eventually led to Adobe acquiring Sayspring in April of this year. Mark and his team then moved into Adobe’s New York offices (not far from my desk, actually), rolled up their sleeves and began working like mad to build the voice features shipping in today’s release.

This whole journey has made for one of the most interesting years of my career. Working on Adobe XD was already an invigorating challenge, but to get to play a small role in bringing a whole new kind of design and prototyping to millions of designers, that has been truly amazing. For me, it all reflects the rich possibilities that exist at Adobe. Not just the ability to move at scale and to make strategically unique acquisitions like we did with Sayspring, but also the willingness to look ahead and anticipate changes in the very nature of design. Voice was already one of those transformative technologies on a path to wide acceptance, but it’s also very much one of these media that will be catalyzed in wholly new ways with the participation of designers. I can’t wait to see what happens next.

+