NOVA
NOVA is a conversational AI interface and mobile app designed to help users navigate through anxiety with guided mindfulness and breathing exercises.
✿ MOBILE UI DESIGN ✿ VISUAL DESIGN ✿ CONVERSATIONAL USER INTERFACE
Team
Mia Tang
Ricky Chen
Mihika Bansal
Timeline
6 weeks
My Role
Visual Identity
Mobile App Design
Concept Development
Problem Space
How might we create an approachable and calming mobile experience to de-escalate moments of stress and anxiety?
​
To engage with Nova in real-time, a live prototype is accessible on desktop.
​
​
Who is Nova?
Nova is a conversational user interface within a mobile app that guides user's through moments of anxiety through two core experiences: a visualization and breathing exercise. ​
​
Nova has eight interactive states (see below) to respond to user voice input,
​
Conversation Interface
When the user speaks into their mobile app, Nova will change states and respond based on user voice input.
Nova's Goals
✿
✿
✿
Nova acts as a presence that actively guides a user through a difficult moment. When interacting with Nova, the assistant will change into different states based on the user's voice input.
​
Overtime, Nova keeps a record of the user’s journey, helping track their progress with anxiety
​
Nova acts a mediator between the user and their therapist, sharing relevant user data
​
​
Landscape Visualization Exercise
Nova and the user work together to co-create a relaxing "safe space" landscape. Nova guides you through this sensory experience with ambient sound, calming visuals, and breathing exercises.
.png)
Tracking + Sharing Sessions
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.
Research
Competitive Analysis
To ground our CUI, we started by thoroughly exploring the existing user experience of two anxiety and stress relief apps: Mindshift and Calm Harm.
​
​
Identifying Mindshift Painpoints
✿
✿
Mindshift centers around educating their users about different symptoms of anxiety and is less focused on action-based
techniques for relieving anxiety.
There is a lot of redundant text at each stage of the experience which complicates and overwhelms the entire experience.
Identifying Calm Harm Painpoints
✿
✿
✿
Calm Harm presents too many options and tasks for users; very text heavy
Many of the activities to distract from self-harm 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.
Conclusion
Competitive Analysis
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.
​
We focused on using techniques such as Guided Breathing, Guided Visualizations, and Verbal Reassurance that Nova employs for the user.
Anxiety Relief Research
After our competitive analysis, we looked into various online medical resources to gather methods that are proven to effectively reduce stress and anxiety. We consolidated the most popular methods (see right) to leverage in our CUI.
Visual Identity
Nova's visual identity takes inspiration from 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 Nova to be beautiful, gentle, and soft, and utilized soft lavenders and blue tones, with pastel yellow accents.
​
Final Motion Matrix
To ensure that each motion state is visually distinct from each other, we organized our eight states onto a matrix. More emotional and intimate states (such as breathing and reassuring) are characterized by a warmer pink tone.
.png)
.png)
Visual Inspiration
Visual Inspiration
Visual Process Exploration
%20(2).png)
Refined Visual Exploration
Mobile User Experience
By mapping out our user flow, we were able to identify key touchpoints in the mobile app. For our live coded prototype, we chose to focus on the design of the visualization exercise.
.png)
Refined User Flow / Key Touchpoints
UI Design
A screenshot of one of many Figma pages while prototyping the screen design of our app! We explored with color, type, and created multiple "visualization" scenarios.
Conversation Screen Design
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.
Conversation Typesetting
We kept type design on the screen as simple as possible—with the text just fading in; a gentle yet effective animation to transcribe the conversation.
​
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.
Reflection
✿
✿
✿
✿
✿
How to identify opportunity spaces to effectively implement VUI intelligence.
​
How to incorporate VUI intelligence to create more intimate, emotional, and guided conversation.
​
How to craft a VUI script and user flow that reflects empathy and urgency when user is in crisis.
​
How to create a visual system of color, animation, and type that is consistent and appropriate to our VUI context.
​
How to balance feasibility in implementation when using computation as a creative medium.