Amazon Music + Alexa Integration
After the huge success of Amazon Echo and Alexa voice services, the next frontier was multimodal integration. In 2018 Amazon Music geared up to integrate the Alexa service into their mobile apps and I was the lead UX designer on the project. Our integration was received quite successfully, even impacting the design of the Alexa integration of other apps—Most notably the Amazon Shopping app and the Alexa app.
TLDR;
Readings & research • Storyboarding voice flows • Task flows and VUI intent mapping • Animation & tone • Usability improvement • Project dashboard
READINGS & RESEARCH
Our senior VUI designer recommended to me Designing Across Senses and Designing Voice User Interfaces. These books set a foundation (and a passion) for VUIs & multimodal experiences for me. I met with the Alexa team to review the primary research they had conducted on their own Alexa integration with the Amazon Shopping app.
01
STORYBOARDING
Storyboarding multimodal design was a critical step as I reviewed designs with other teams. I drew out several storyboards for each of the basic golden flows (the correct path we want the user to embark on). Early reviews with stakeholders addressed certain technology limitation.
02
TASK FLOWS & INTENT MAPPING
Alexa understands a variety of different types of requests. I categorized the types of VUI intents to simplify UX patterns accordingly. For example, any playback related requests fell under the above flow. There were six total categories I mapped out: Playback, Search, Action, Navigation, and Multi-turn. I developed the multimodal UX flow design for Amazon Music as seen above, prior to this we had none.
03
ANIMATION & TONE
Above you can see—and most importantly: hear—Nina Nesbitt using the integration. Since this experience was largely intended to be hands-free, the user would need clear animations and tonal notifications. I worked with developers to pick the right tones from Alexa’s library, and I also leveraged the blue animating bar from Amazon Shopping’s Alexa integration.
04
USABILITY IMPROVEMENT
During the beta we tested the usability of the design, and consistent feedback we got back was that the amount of hints on screen were too many, and that the view would close before they were able to read them all. This prompted me to update the design to only have one hint on screen, which tested much better. After a few months of usage, we saw that customers who used Alexa also used the app more.
05
CROSS TEAM IMPACT
Our integration was received quite successfully, even impacting the design of the Alexa integration of other apps—Most notably the Amazon Shopping app and the Alexa app. By showing the screen underneath even when the assistant was active, the updated design keeps the customer in their context. Additionally, a more minimal hint system allows us to educate customers without being overbearing.