Visualizing emotions, commands, and computer processing from an audio command
With a huge uptick in digital products utilizing conversational virtual assistants, designers have the responsibility to start thinking about how audio feedback is accompanied with visual aids. Along with two classmates, Mason Shor and Serina Liu, I explored how to create a satisfying and helpful virtual assistant experience using meaningful visual and audio queues.
Exploring with nine CUI Emotion States
Beginning with basic shapes and generic virtual assistant emotions and commands (ie. ‘success’ and ‘playful’), I individually created 3 second animations to communicate emotions visually. These early iterations helped form a baseline understanding of how emotion can be visually understood and experienced. This iterative process was done three times by adding a layer of complexity to each version, from two white circles interacting with one another, to dynamic shapes that used color and movement more elaborately.
Creating Meaning and Context through Branding
With the iterative exploration into motion and commands, our team set out to put these emotions and commands to a specific brand. We were challenged to anticipate how our chosen brand would use and visualize voice commands in a virtual assistant experience. We chose Tesla as it begins to uncover how virtual assistants might behave more intelligently when one is behind the wheel. Tesla cars, being fully controlled by the instructions of a computer, also provide an interesting dynamic as a voice command can essentially control anything on and inside the car.
We began by first understanding the functions and needs of users when using a virtual assistant while driving. This was done by secondary research and digging into how conversational UI is already at work in the automotive industry. Moving into affinitizing users’ needs, we broke down commands into specific categories. These categories were mechanical, comfort, navigation, communication, and organization.
This process helped guide how we moved forward with the visual communication of the virtual assistant.
Using brand guidelines and ‘personality’, I began designing the visual specifics of the virtual assistant. Then with the designed virtual assistant, we used our affinitized categories to create five specific animations paired with audio queues.
Communicating Through Narrative
The final step was forming a narrative around the virtual assistant. In order to bring the story and needs to life, we created a sample product video. This video aimed to tell a story about the contexts in which the virtual assistant would be used and the needs that the virtual assistant .
5 Motion States and Example Commands
