Ricky Chen
Work
Experiments
Information
Résumé

  Nova 💬 is a conversational AI interface designed to help users navigate through their anxiety with guided, interactive mindfulness exercises.

Timeline —
1.5 Months
Role —
Mobile UI Design
Visual System
Concept Development
For —
People experiencing anxiety attacks
With —
Mihika Bansal, Maggie Ma, and Mia Tang‍
PROJECT INDEX
Section Quick Jump
01. Main App Features
02. Background & Problem Context
03. Design Challenge & Solutions
04. User Testing & Insights
05. Even More Features & Fun Stuff

OVERVIEW
Meet NovaNova 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 desktop.

MY ROLE
UX + Visual Designer 🙋🏻For this conceptual exploration, I focused on developing the UX flow of the assistant as well as the various interface screens and assets for mobile. I also collaboratively built and refined the visual identity and color + type system of Nova.

01. Meet Nova
What are the main features and identity of this voice assistant?

01. Field Guide
The Field Guide provides comprehensive text and zoomable, gigapan images on the collection of 150 common freshwater macroinvertebrates found in Eastern North America.

Nova's States & Interactions
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.

Co-creating a Landscape with Nova
Nova's main feature is to guide the user through a visualization landscape. As the user provides inputs on what they want to see, Nova abstractly creates the calm, safe space for them.

02. ID Key
The ID Key allows users to identify unknown insects with key diagnostic features for the Order levels also and find them in our collection.

Reviewing & Sharing Session Data
Overtime, Nova keeps a transcript record of the user’s journey, helping track their progress with anxiety. Nova also acts a mediator between the user and their therapist, sharing relevant data when desired.

Communication through Motion
Nova visually communicates with the user through 8 different states. Its form and movement were designed to offer a calming and meditative experience for the user during the conversation.

03. Flashcard Practice
The Flashcard Practice has various modes that allow both novice and expert users to review, learn, and identify common freshwater macroinvertebrates like a pro.

02. Voice Assistant Research
How did we come into this problem space and understand the design implications?

BACKGROUND CONTEXT
What even are Macroinvertebrates?Before joining this project, I also had no idea what macroinvertebrates were. And this project is also quite scientifically heavy, which required me to go through the personal learning process of being an extreme novice to a somewhat, maybe mini expert.

To give more contextual information, macroinvertebrates are small aquatic animals and the aquatic larval stages of insects. In scientific research, macroinvertebrate identification is critical in providing high-quality data for water quality monitoring of local streams, lakes, and other ground water resources.

Our work is interested in how we can develop innovative educational tools around macroinvertebrate education to help the process of learning to see, seeing to learn.

challenge
Designing a Multimodal Voice User InterfaceOur challenge was to create a multi modal voice assistant that would explore how conversational AI could understand and interact with complex human behaviors and needs. In thinking about existing problem spaces, we decided to scope in on an assistant focused on the area of mindfulness.

PROBLEM CONTEXTWebsite Layout Breaking on Mobile
Macroinvertebrates.org generates around 2,000 monthly users. 20% of them access the site on a mobile device, which is not optimized for. at all. This makes it difficult to take advantage of our most important feature, the zoomable high-res gigpan images.


THREE MAIN GOALSA Robust, Mobile App that is..1. Easily accessible even without wifi in outdoor settings
2. Engaging for the user with interactive learning experiences through mobile interactions and gestures
3. Viewed as a tool that is scientifically reliable for experts, yet approachable for new learners.

COMPETITIVE ANALYSISAnalyzing Existing Mindfulness Apps and Programs
To ground our voice user interface, we started by thoroughly exploring the existing user experience of two apps: Mindshift and Calm Harm. We also referenced a few other mindfulness applications like Headspace and Balance.

COMPETITIVE ANALYSIS & PAINPOINTSMindshift
Mindshift is a free self-help anxiety relief app that helps users reduce worry, stress, and panic by following CBT evidence-based strategies.
1. While Mindshift centers around educating their users about different symptoms of anxiety, there is less focused on action-based techniques for relieving anxiety.

2. There is a lot of text at each stage of the use which complicates the entire experience. A user experiencing anxiety would not want to be overwhelmed with the number of options presented on this app.

COMPETITIVE ANALYSIS & pain pointsCalm Harm
Calm Harm is a free app based in DBT that provides tasks to help you resist or manage the urge to self-harm.

‍1. 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.
‍
2. Many of the tasks were not accessible and required materials like "bubble wrap" that the user might not have on hand at that moment.

RESEARCHAnxiety Coping Techniques
After our competitive analysis, we decided that the voice user interface would actively be guiding the user through moments of anxiety. We researched a variety of scientifically proven exercises to calm the mind.

We decided to focus on Breathing, Guided Visualizations, and Verbal Reassurance as the different techniques Nova employs for the user.

03. Visual Identity & Explorations
How did we design an assistant identity that felt appropriate for the context?

APP FEATURE 1The Field Guide is designed with pages that scale across the Order, Family, and Genus taxonomy levels. The Field Guide, initially worked on by Alice Fang and Estelle Jiang, is both a reference and learning material with 93 Families within 9 Orders that can be found and learned about.


‍
DESIGN CHALLENGE 🚨
Different Knowledge Levels
A very important aspect of this app is that we want this to be reliable for experts but also approachable for novices. Although heavily focused on in the Field Guide, this is a design challenge that also drives much of the design decisions throughout the other app features.

Visual + DESIGN SYSTEMBuilding an Identity for NovaNova's final visual identity takes inspiration from calming references to our natural world: the moon, water, and landscapes. We used abstracted gradients to create an identity that felt soothing, gentle, and present. To further emphasize the reference to the moon, we named the assistant Nova.

MOTION STATES
Gentle and Soothing Movements
The motion of Nova continues to play off the gentle and soothing identity that we came up with its final visuals. To visually communicate with the user, we created eight different motion states that feel as it is someone slowly guiding the user through difficult times step by step.

explorationsFinding Inspiration from the Natural WorldBecause 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 for a more abstract representation because the nature of emotions, feelings, and thoughts is non-pictorial, ambiguous, and imaginary.

SKETCHINGAn Amorphous BlobIndividually, we sketched color and form explorations of how Nova 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 with our initial sketches.‍

explorationsColor & Form
In our explorations, we also 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 Nova 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).

SOLUTION 💡Rich and Diverse Content
A combination of text, photographs, annotated illustrations, and interactive media are used to make the scientific content more digestible as well as to improve perceptual skills. We are finding ways of incorporating more visual information through color and iconography.

SOLUTION💡A Visual, Seamless Environment
Compared to other field guides, the Macroinvertebrates.org collection is unique for its zoomable, gigapan image technology. This creates a visual environment where users can move seamlessly from full panoramic views of macroinvertebrates to extremely close-ups.

Usually they are way too small to be able to see their body features in detail. PocketMacros helps resolve this with fast finger zooming interactions.

04. Interface Design & Exploration
What are the main experiences and user flows when engaging with Nova?

USER TESTING
Listening to both Novice and Expert Users
To really build an application that would be used and appreciated by our target demographics, we worked closely and user tested with macroinvertebrate volunteers, teachers, entomologists, relevant organizations, and other stakeholders. Round 1 of user testing was done by Alice and Estelle. Karis and I took over and led rounds 2 to 4.

OVERVIEW
The Mobile ExperienceTo complete the mobile experience, we prototyped other features and screens. 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 also review all past conversations with Nova by scrolling through the session calendar. Here, days when the user interacted with Nova are indicated in a lighter purple circle.

OVERVIEWOther Visualization LandscapesAs a fun addition to our visualization feature, we also mocked up other landscapes and environments users can potentially create with Nova.

user flowUser FlowWe created a user flow to indicate the main touch points a user would have with Nova. Purple-filled boxes indicate the user's actions and stroke-only show how Nova would respond to that specific interaction.

METHODAffinity Diagram MappingTo begin analysis on our user testing data, we relied a lot on affinity diagram mapping as a way to organize and cluster different types of information. We used this method in several ways.

1. To organize how often a certain issue is coming up
2. The type of users who are saying spec
3. The priority and need of those changes.

Since my main focus was on the ID Key and Flashcard section, we clustered the data into a few main findings about these two modes.

overviewMany IterationsThroughout the process, we made many iterations of the UI screens to play with hierarchy of information, placement and scale of Nova, and how text would be treated to provide a fluid conversational experience for the user.

explorationPlacement and Scale of NovaAs we began designing the mobile screens for Nova, we explored placement, scale, typesetting, and background color. We decided on the dark background because of how vibrant Nova's gradients look against it.

TYPE SETTINGConversational Type-SettingWe 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.

ID KEY FINDING 1 💡Lack of User ConfidenceWhen going through the ID Key, many of our users lost track of where they were in the key. This validated our solution of adding in a flat map mode to help users understand where they are whenever needed. We also found that 100% of our novice users hesitated at the second question, one of the most difficult parts to identity. These issues lead to low confidence and accuracy about the final result that our users received.

DESIGN IMPLICATIONS


1. Add a map view and breadcrumb feature to allow users to better trace their steps
‍
2. Reorder more difficult questions to be at the later parts
‍
3. For more. easily mistaken IDs, add suggestions and caution indicators to prevent misidentification

ID KEY FINDING 2 💡Lack of Clarity in InformationAs visual reference, we have many example images that zoom into the specific body part being asked. However, even with these, many of our users had difficult understanding what part of the image they should be focused on. Also, the language of the ID Key felt like a quiz to some users.

DESIGN IMPLICATIONS

1. On the example images, incorporate more highlights and arrows to better indicate the body part that is being asked
‍
2. Change the language of the question copy so that it is clear this is to help with identifying an insect.

ID KEY FINDING 3 💡Lack of Clarity in Interaction100% of our users failed to recognize that the example images are horizontally scrollable. Although we cut the images off, it was not clear enough especially with the scroll bar only appearing after one starts scrolling. Also, the certain buttons did not feel clickable due to being grey. Users only clicked on them when being prompted during the testing.

DESIGN IMPLICATIONS

1. Restructure the line of images to better indicate that horizontal scrolling is possible.

2. Use blue as an action color to increase visibility to these buttons and to maintain consistency to our design system

FLASHCARD FINDING 1 💡Lack of Clarity in InformationBoth experts and novices stated that they were confused by the back of the flashcards sometimes not changing due to the Order image and title being used again. Although the smaller Family section is different for each card, it was quite difficult to notice as it was located at the bottom of the screen.

DESIGN IMPLICATIONS

1. Bring slightly more emphasis to the Family level information but still keep the Order level information to be the main focus for novice users.

2. Rethink about the convention of the taxonomy hierarchy so that it feels scientifically appropriate.

FLASHCARD FINDING 2 💡Lack of Clarity in InteractionUsers were confused about whether the bookmark feature was for marking the front or back as it appeared on both sides. Also, the cards do not automatically flip back when moving to the next question, which resulted in users seeing the answer when going through the cards again. For older users, the various interactions on the cards were not as clear to them.

DESIGN IMPLICATIONS

1. Make it clear that bookmarking affects a singular card, and not the whole Order level

2. Automatically flip the card back after swiping next

3. Create tool tips on the different interfaces for first time use

NAVIGATIONMenu & Search
There is a lot of complexity within the app, so we created the Menu feature that would give our users more contextual information on the app and to find more micro resources and features to aid different learning goals.

A search function was also built in as a quick way to navigate and jump around the Field Guide for more expert users. This would show recent searches and find search matches at the Order and Family level.

OTHER TOOLSGlossary & Macro Collection
Ever since we user-tested this app, we’ve been receiving feedback that the complexity is still a little too much for beginners. In thinking about how to better support these users, we built a glossary feature to help novices brush up different vocabulary and concepts.
‍
Lastly, because of all the nested pages within the Field Guide, there is currently no way to view the full collection of insects in one place. We built MacroCollection as a way for users to index through all the insects so they can quickly see everything that the collection has to offer.

other workBuilding a Suite of Tools & Resources
Even though we were able to create and launch a full companion app to the original parent resource, we wanted to further expand the Macro universe by building a few more tools and resources. Ultimately, we see these different pieces coming together to form a kit that can be used for different educational seminars, workshops, and events.

Promotional Rack Cards
4x6" rack cards were created to promote the the new mobile app and its main features. This was given to research centers like Stroud to be given away to visitors.

Quick Start Guides For the launch event at Stroud, we also created quick start guides to help familiarize users with the main features of the app through annotated diagrams. These were printed out at the 11x17" size.

MacroCardsBuilding of the branding system that we created for PocketMacros, we also created a set of 52 introductory flashcards that have illustrations and scannable QR codes that are directly linked to the app.

Illustration StickersJust for fun, we made our illustrations for MacroCards into small stickers. These were passed out during the launch event.

3-D Prints & Laser Cut EtchingsThis summer, we also played with 3-D printing and laser cutting to create these etching boards that students can use to color out insects. These are to create engaging fun ways of seeing these creatures for younger learners.

Reflection and Key Learnings

This was a crazy summer. Not only did I deepen my skills in so many different disciplines such as Entomology, interface design, branding, researching, and launching an app, but I also developed an extremely great and special friendship with my partner, Karis. 💙

👾 Using Computation as a Creative Medium
How to identify opportunity spaces to effectively implement VUI intelligence.

🧠 Designing with VUI Intelligence in Mind
dwdad

← Collectiva
Covaid →