PROBLEM
Drivers complete so many tasks as they get from point A to point B, from adjusting the temperature, changing the radio station, too entering a destination. All these tasks mean drivers are distracted, which can lead to accidents.
MYROLE
Lead Designer responsible for visual direction.
Guiding one Visual Designer and one Prototyper.
Interaction Design collaboration with HMI Designer.
Present to Senior Management for feedback and approvals.
Guiding one Visual Designer and one Prototyper.
Interaction Design collaboration with HMI Designer.
Present to Senior Management for feedback and approvals.
Tools: Sketch, Photoshop, After Effects
RESEARCH
During the research phase, we looked at our competitor's voice systems, current voice technology, and collaborated with our User Research team to gain insights into Mercedes-Benz drivers use of voice systems.
This research presented the challenges of designing a more natural communication between the car and the driver.
INTERACTIONMODEL
The previous generation started with pushing a button to activate the voice system. To make this a more natural communication, we wanted to start the voice system with more human interaction, voice. We coined the term, "Hey Mercedes."
WIREFRAMES
Not only are audible cues important when interacting with the car, but visual cues also have importance as well. Sometimes the ambient noise of a drive can be very loud, or maybe a conversation is taking place. As I generate solutions through wireframes, creating visual affordances in a voice system became integral.
STORYBOARDS
Creating storyboards during this process allowed us to showcase the natural conversation in the voice system. By doing this, we were able to visualize the system states better. After designing the rest of the use cases, we realized we needed to explore a unique visualization that not only stands out but provide a face for the interaction.
MOODBOARDS
Part of the Mercedes-Benz design philosophy is to increase the desire for emotive, authentic experiences, and paring-down to the essentials. We started by researching sound visualizations and found these fantastic pieces.
VISUALDESIGN
To create the face for the voice interaction we needed a strong visual to tell the user, it’s listening, thinking, and doing. By utilizing the visualization of a sound wave and particles, we were able to create an organic element that told a story.
CODINGDESIGN
To see this in motion, our Prototyper used a coding software called Processing. This allowed us to visualize the element better. We designed multiple iterations for the Listening and Processing states.
DESIGNINGSTATES
Putting the final visual touches on the UI shows the importance of visualizing states in the system. Timeout states give the user a chance to complete the task while providing visual cues to assist.
PROTOTYPE
I created high fidelity prototypes in After Effects to show motion and animation. This type of prototype was crucial for presenting to Senior Management.
FINALOUTCOME
The Mercedes-Benz Voice Assistant was built and shipped with the new MBUX infotainment system, arriving in 2018 car models. The Voice Assistant has been widely praised winning awards at the European CES and tech blogs like The Verge.
LESSONSLEARNED
Not only can I now design for voice interaction but, I can confidently jump into any project that I have little experience with.
Confidence and clarity are vital in presenting projects to people whose first language is not English.