Voice and Visual UI Design for Multi-modal Mobile Applications
Xtone
The Project
Xtone was a start-up creating multi-modal (speech and visual) mobile applications. Their goal as a company was to create a framework to allow companies to include Siri-like capabilities in their own apps. The envisioned a future where many mobile apps included both visual and conversational user interfaces. I directed conversation design for Xtone, and also did visual design work as needed on numerous apps for news, banking and medical apps.
The Work
One of the key projects for Xtone was a partnership with USA today to add voice capabilities to their news app. The USA today app gave readers the ability to read USA Today content on their mobile devices. They partnered with Xtone to deliver a subset of this news content in an audio format, through an interface that could be controlled by voice or touch.
Tools included Axure, Audacity, Visio
The Process
Define Requirements
The first step in the project was to work with the USA Today team to define the project requirements. Since this was a new type of capability for them, creating the requirements was an iterative process.
Write Sample Dialogs
Once the requirements had been defined, I created a set of sample dialogs to begin to sketch out the conversational experience.
Develop Interface Wireframes
Because the voice capabilities were being integrated into an existing app, we needed to design a set of controls that gave users access to voice, and integrated well with the existing app UI. We started with wireframes to explore different ways of integrating voice into the app.
Create UX Storyboards
As the voice and visual UIs became more refined, I created storyboards to define all aspects of the UX design.
Create Callflows
To accompany the storyboards, I created call flows to document the conversational UX.
Write Design Specification
When the design was complete, I created a detailed design specification to document both the visual and voice user interface. This specification was used by the developers to create the app.
Create Interactive Prototype
To support the design specification I used Axure to create an interactive prototype of the app.