If you’re like nearly 20 percent of all Americans, you probably own a smart speaker. Research from earlier this year says that one in five adults have access to a smart speaker today. That’s a pretty fast adoption rate, as Amazon’s Echo was only announced in 2014.
With all this excitement surrounding these voice-controlled devices, and with Adobe XD becoming the first UX/UI design platform to support voice prototyping, the time seems right to introduce a UI kit that addresses the brave, new frontier of voice UI. This is the Amazon Alexa UI Kit from Adobe experience designer Susse Sønderby, which supports a voice-first approach to UI design. It will make it easy for designers to create voice prototypes right inside of XD, with voice triggers and speech responses.
Susse’s journey to this point, of becoming the lead designer for XD voice integration, first started with a moment of revelation.
“When I first interacted with the Amazon Echo Show that launched last year, I really felt the power of voice and screen design coming together. For me, bringing voice to a visual design tool like XD made perfect sense because this was a way for us to meet designers in the tools they master so well, so they can do what they do best – design good experiences,” she said.
Here’s how to get started with the Amazon Alexa UI Kit:
- Step 1: Get the latest software. Make certain you have the latest version of Adobe XD.
- Step 2: Download the Amazon Alexa VUI Kit for Adobe XD.
- Step 3: Explore the prototype. This VUI kit allows you to use components from the Alexa Presentation Language (APL), along with APL colors and fonts that help you create authentic experiences for Echo Spot, Echo Show, and Fire TV. You’ll also be able to access Alexa Presentation Language templates.
The power of voice prototyping for XD users
Designers that want to stay ahead of their competitors need to add designing for voice into their repertoire. With Amazon smart speakers leading in market share by a great margin over their nearest competitor, Google Home and Google Assistant, now is a great time for designers to get familiar with the process of designing for devices like Amazon Echo and Dot. Adobe XD’s Amazon Alexa UI Kit will help you do that.
An example of the fonts available in the Amazon Alexa UI Kit.The first step is to have a basis for building an Alexa Skill (think of it as the equivalent of an app, but instead for voice), which this UI kit will give you. Here is a list of some of the Skills already available, straight from Amazon.
“The Amazon Alexa Kit is a starting point for a designer building their first Alexa Skill for any one of Amazon’s devices. It has all the necessary building blocks and templates to get started, all of which reflects APL (Amazon’s new front-end development language),” said Susse.
APL stands for Alexa Presentation Language, recently released by the company. APL is a design language that allows designers to create interactive voice experiences that are integrated right into a device’s visual interface.
With this kit, designers can jump straightaway into the latest version of XD to create multimodal interfaces that have prototyping support for voice triggers, speech playback, and responses, all using templates from the kit. Multimodal refers to the combination of voice, touch, graphics, text, images, video and audio in a single, seamless UI.
A new UI kit for a new design landscape
Never before has there been an app that allows designers to prototype for voice. Until now, designers who wanted to address voice in prototyping had to rely on good, old-fashioned storyboards or flowcharts and some imagination. Think of VUI as a quickly emerging field within experience design.
From Susse’s point of view, there are many reasons why it should be much easier for designers to integrate voice into their UIs. A lot of that has to do with the users designers should be thinking of when creating and building products.
“When I got my first Amazon Echo in 2015, I saw the potential of an interface that spatially, visually and cognitively was able to liberate users, and for me that means freeing up space for other things. Voice is an interface where we are able to reach users that screen-based interfaces haven’t been able to accommodate before, such as visually impaired users, kids who haven’t yet learned to read or write, or users with mobility impairment,” she said.
With the growing interest in smart speakers, there is more demand in the marketplace for this technology and therefore designers who can support it.
A rendering of a voice user interaction demo in Amazon Alexa.“As VUI naturally begins to integrate more fully into new devices that also have visual components—like the new Amazon Echo Spot and Amazon Show—designers have the opportunity to create a new level of rich experience,” explained Susse. “We’ve created this VUI prototyping kit to give you the building blocks to create your own.”
Best practices for using the Amazon Alexa Voice UI Kit
For designers to get the most out of XD’s new voice-prototyping feature, they have to know how to get the most out of this UI kit. This VUI kit empowers designers by giving them the best starting point when venturing into voice-enabled design in XD, because the kit includes APL.
According to Susse, this kit addresses Amazon’s most popular voice-enabled device and market-share leader, the Amazon Echo.
“We have put together an Amazon Alexa UI kit that includes components and templates for four of the Amazon Echo screens: Echo Spot, Echo Show 1st gen, Echo Show 2nd gen, and Fire TV,” she said.
The kit features:
- APL Colors and Fonts
- APL Components
- APL Templates
What designers are doing with APL is building interactive voice experiences that include graphics, slideshows, images, and videos that can be customized for different devices. Based on user statistics, customers are gravitating more toward voice because it’s easy and natural, and APL’s resources and tools make it simple for designers to transmit voice-first experiences to screens.
“The UI kit is made of building blocks and templates that reflect Amazon’s new visual language, APL. Any designer who is designing skills for an Echo Spot, Echo Show, or a Fire TV can use this kit as a starting point,” Susse noted. “And because these are all devices that combine a screen and voice design, designers can design for both in XD. The kit also has a small sample project that’s hooked up, for anyone just getting started with voice design.”
The Amazon Alexa UI Kit allows you to build Skills that are:
- Rich – Voice-first, interactive experiences including text, video, slideshows, and graphics. Synch on-screen text with spoken voice, and support voice and touch/remote controls.
- Flexible – Control over on-screen UX by defining placement of visual elements on the screen. Reuse designs to ensure a consistent brand and visual experience across a range of Skills.
- Adaptable – Personalize experiences to reach customers anywhere, thanks to various Alexa screens. Tailor the UX to the unique qualities of each Alexa device.
- Ease of Use – Get started immediately with this kit and APL by using Amazon’s supplied sample APL documents, which can be customized by designers and work smoothly across a range of different devices.
How VUI can impact design in the future
Despite voice’s continued growth, the majority of users are still most comfortable using touch and visual interactions on their devices. Because of these user behaviors, many designers don’t yet recognize how the combination of voice and visual elements can take their UX to another level. This is changing, and we’re hoping the introduction of voice prototyping in Adobe XD will help move the dial.
As it stands, there is a lot of potential for designers to harness the power of voice and do great things with it.
“I can’t wait to see some of the amazingly skilled designers out there getting their hands on this voice and screen design combined,” she said.
The applications for voice are many, and voice UIs have the power to solve many common, everyday problems or limitations impacting their current devices.
“You can provide customers with complementary information that’s easily glanceable from across the room, or you can use the screen to enrich your voice-first experience and reduce friction for customers. For example, you can offer visual cues for confirmation or show lists of items during a content search experience,” said Susse.
Conclusion
If you’ve ever wanted to dive straight into designing for voice, there’s no better path than this kit. Thanks to its compatibility with XD and array of APL templates and fonts, you can get started immediately.
More than a kit, however, it represents the brave, new world that design is very quickly moving toward, where voice will be used to create UIs that are more user-friendly and popular than ever.
“I have spoken to a lot of organizations getting started with designing voice interfaces, and I hope that their design teams will build something much better than we could think of,” said Susse. “The best is yet to come.”