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.

Co-creating a Landscape with Nova.png
Ending a Session + Sharing session Screens (3).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.

Maggie Mindshift UX Map.png
Mia & Ricky.png

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. 

Initial Research - Anxiety Relief.png

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.

Visual System - Inspiration & Reasoning (2).png
Visual System - Inspiration & Reasoning (4).png

Visual Inspiration

Visual System - Inspiration & Reasoning (2).png
Visual System - Inspiration & Reasoning (4).png

Visual Inspiration

Visual Process Exploration 

Visual System (Process) (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.

User Flow.png
User Flow (1).png

Refined User Flow / Key Touchpoints

Screen Shot 2021-10-31 at 7.19.00 PM.png

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.

Frame 15.png

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.

Frame 16.png

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.