Voice Design app

I was asked to create a new interface and voice enable it. The point of this challenge was to see how well I can integrate voice into my design.

 

Product Overview

Revolutionary voice-controlled and A.I. enhanced alarm clock that acts as your personal assistant. 
No more buttons, it so much easier to talk !

 

Some research first

Before I can consider designing for voice I needed to learn and understand a little bit about the under lying technology. Design is constrained by the limits of the technology, and the technology here has a few fairly significant limits.To do so, I did online research, read a lot of articles, looked at different voice interfaces.

 

Some Of My Design Questions

Voice interaction is still evolving but providing confirmation to the user is becoming a pretty regular pattern. Here are some questions that I came up with for my design:

- how can the user activate the voice recognition?
- how to show the user that his input was taken?
- how make the interactions conversational?

 

My Design Process

Based on my new voice design knowledge and with my questions in mind, I started to sketch rough wireframes (above).

 

Version 1

 

Then I created a first version (pictures above) of high fidelity prototypes with Illustrator. After reviewing my design, I made some few changes, specially in the button treatments and conversational aspect. I decided to make the speak button a floating action in the bottom right. The advantage of that is to keep the mic on screen at all times and move it up when cancel button is present.That way the user would be able to access the mic at anytime if needed and it would easier to access for the user (pictures below).

 

version 2

 

My design thinking

Here Iā€™m going to walk you quickly through 2 screens and explain what are the functionalities. The one on the left is when the app is in charge  and then the one on the rightwhen the user is speaking.