Experience Design
Nova
Computational Design Thinking
7 Weeks | Fall 2021
Brief
Recent advancements in speech recognition technologies have yielded intelligent products like Amazon Alexa and Google Home, and have also made numerous existing products conversational. Today, we can interact conversationally with our laptops, smartphones, watches, kitchen appliances, and vehicles using our own words. Beyond the transactional interactions using speech, there are distinct personalities that define each virtual assistant.
​
Design and conceive a multimodal system for a VUI (voice user interface) with an appropriate personality, considering Branding and User Experience.
Tools:
-
Figma
-
Adobe AfterEffects
-
p5.js
Skills:
-
UI/UX Design
-
User Research
-
Interaction Design
-
Animation
-
p5js
Team:
-
Mia Tang
-
Ricky Chen
-
Maggie Ma
My Role: UI & UX designer
The Outcome
Nova is a conversation AI interface designed to help users navigate their anxiety through guided, interactive mindfulness exercises. To engage with Nova in real-time, a live prototype is accessible on a laptop.
​
Design Goals​
-
Nova acts as a presence that actively guides a user through a difficult moment.
-
Over time, Nova keeps a record of the user’s journey, helping track their progress with anxiety.
-
Nova acts as a mediator between the user and their therapist, sharing relevant user data.
User Flow
Nova Visual Identity
Our VUI's final visual identity takes inspiration from calming references to our natural world: the moon, water, and landscapes. The gradient is a soft linear that is reminiscent of a soothing ocean landscape. Against the darker navy background, we incorporated a glow and halo effect that radiates from the VUI; we wanted it to be beautiful, celestial, and gentle. To further emphasize the reference to the moon, we named our VUI Nova!
.png)
Final Conversation Interface
To complete the mobile experience, we prototyped our features and screens. The user goes through 2 main interactions - a conversational exercise and breathing exercise. Our prototype features one visualization, but we also mocked up 4 other potential visualization exercises.
After the user concludes their conversation with Nova, they have the option to send a transcript of the conversation to their therapist. The user can review all past conversations with Nova by scrolling through the calendar feature. Days the user asked Nova for help are indicated in a lighter purple circle.
Students High-Fiving
Output: Buzzes & Lights up
Input: Students squeezing Buddi
Final Experience Prototype
You can interact with a live prototype of Nova here. Below is a video demo of the prototype. Additionally, we prototyped a breathing exercise that acts as an edge case in case the user is not able to complete the visualization exercise. If Nova senses that the user is getting overwhelmed, Nova will take them through a breathing exercise to ground themselves again.
The Process
Competitive Analysis
Beginning this project, our group was interested in exploring topics related to wellness. We started by analyzing existing wellness apps and programs, as this is a currently highly saturated market. We explored many existing experiences like Headspace, Balance, etc.
​
To ground our VUI, we started by thoroughly exploring the existing user experience of two apps: Mindshift and Calm Harm, to see if there were opportunities to implement a VUI.
Mindshift
Mindshift is a free self-help anxiety relief app that helps users reduce worry, stress, and panic by following CBT evidence-based strategies.
Pain Points
-
Mindshift centers around educating its users about different symptoms of anxiety and are less focused on action-based techniques for relieving anxiety
-
There is a lot of text at each stage of the experience which complicates the entire experience. A user experiencing anxiety would not want to be overwhelmed with the number of options presented.
-
While there is an opportunity to fit a VUI into the existing experience, it would be more helpful as a guide through the app, rather than a guide through the anxiety the user is experiencing
Calm Harm
Calm Harm is a free app-based in DBT that provides tasks to help you resist or manage the urge to self-harm.
Pain Points
-
Calm Harm presents too many options and tasks for users, likely at those moments the user will not want to have to read through so many potential tasks
-
Many of the tasks were not accessible and required materials like "bubble wrap" that the user might not have on hand at that moment.
-
The VUI use would once again be helpful for navigating the app rather than being an active guide through the moment of anxiety.
​
Overall, we felt as though basing our VUI within an existing experience would limit the capabilities of our VUI. However, this research did help us understand a gap in the existing mindfulness app experiences and competition.
Research on Anxiety
No other mindfulness app experience provides a personalized back & forth voice conversation with a user experiencing anxiety as well as a method to share sessions directly to therapists. After our competitive analysis, we decided we wanted to make a VUI that would actively guide the user through moments of anxiety with research exercises.
Visual Identity Explorations
Inspiration
Because our VUI is focused on anxiety relief, we wanted our visual identity to be approachable, soft, and calming. We considered both abstract (amorphous shapes, gradients, blobs, linework) and concrete (lava lamps, landscapes, a VUI character) methods of representation. We decided to go in a more abstract representation for our VUI because the nature of emotions, feelings, thoughts is non-pictorial, ambiguous, and imaginary. We thought that we could experiment with the fluidity and physicality of the colors and shapes; is there a defined shape for our VUI? Is it contained within a circle, or does it fill the entire mobile screen?
.png)
%20(1).png)
Sketching & Explorations
Individually, we sketched color and form explorations of how our VUI would react to voice and transition between states. Because our form and colors are so amorphous, it was difficult to distinguish between some state changes.
​
In our explorations, we considered shape and size of the overall form, and the different colors of different states and how that would transition. We experimented with concentric circles, radial vs. linear gradients, layered shapes, etc. We decided to confine our VUI to a concrete circle shape with fluid and dynamic color movement inside. We experimented with more gradient styles, and thought about what colors can emulate and respond to certain emotions (ex. warmer colors for the reassuring state).
%20(2).png)
%20(3).png)
Screen Design Explorations
Exploration
As we began designing the mobile screens for our VUI, we explored placement, scale, typesetting, and background color. We decided on the dark background because of how vibrant Nova's gradients look against it. We created many explorations for how the real-time text would appear on the screen. We considered rectangle boxes to distinguish between Nova and the user, but didn't want the conversation to feel like a text message chat.
​
After rethinking our visuals, we concluded that keeping the screen as simple as possible with the text just appearing would still be an effective animation to transcribe the conversation.
