THROUGH A CHILD'S EYES

TYPE

Team Project

ROLE

Design Lead

TOOLS

Figma, Unity, ElevenLabs

TIMELINE

10 weeks, shipped Dec 2023

TEAM

2 designers 2 developers

Designing a product that communicates mindfulness in a way whimsical and playful enough to stick in children's hyperactive minds.

MindCompass VR Demo

OVERVIEW

THE CHALLENGE

Children struggled to sit still, parents struggled to teach.

We set out to make a parenting tool, inspired by the hard work we'd seen parents around us put into raising us. After many interviews, school and house tours, and experiments, two things were clear: children struggled to sit still, and parents didn't know how to teach them in a way that they'd listen.

THE SOLUTION

A VR meditation game guided by an anthropomorphic Panda.

We launched MindCompass, a children's mindfulness app for the Meta Quest. The app borrows from game design principles to drive engagement from children, and employs an anthropomorphic Panda to guide them through different meditation activities in virtual worlds.

THE IMPACT

Won Stanford's design expo, inducted into XR incubator.

Our MindCompass demo won Stanford's annual student design expo organized by the Computer Science department, and we were inducted into Stanford's annual XR incubator program on the basis of it. We reached a global audience and received an acquisition offer from a global palliative care nonprofit organisation.

THE PROCESS

1

foundational research

2

our final product

3

design details

THE DISCOVERY

RESEARCH METHODS (n = 15)

Semi-structured interviews

Home and location tours

Contextual inquiry

Experience prototyping

We started broad to learn about the biggest problems in childcare and childhood, and then used iterative research to narrow down our solution from there.

Through multiple studies, we learned that teaching young children mindfulness was both crucial and difficult. Separately, we were inspired by observing the tactics of experienced parents and teachers, who often had games and tricks up their sleeve to make lessons stick.

Could games be the pathway to teaching children mindfulness?

Research observation at school - children's toys and learning materials
Research observation at school - children engaging with educational toys

Toys and games were a crucial part of learning for children, as we observed in our interviews and location tours.

THE GENERATIONAL CREATIVITY GAP

Gamification seemed like a cool idea, so I designed a prototype to dig deeper. I recruited a parent and asked her to design a game to teach her child, to see how the process would work.

The observations were unexpected. Our participant got extremely flummoxed at the gamification task. Then, unprompted, her daughter grabbed the pen from her mom's hand and started drawing out an idea of her own.

I saw this pattern repeat in secondary research findings. I started to call this the "generational creativity gap:" Parents recognized games' effectiveness but felt paralyzed creating them. Children exist in an enhanced creative state that parents can't easily reach.

Creativity gap research observation
Creativity gap research observation

The restless child took over at the gamification task from our test participant, her mother, who had only a fraction of her child's creative energy.

Since parents couldn't meet kids at their creative level, we decided to build something that could.

This became the seed of MindCompass—a product that communicates mindfulness in a way whimsical and playful enough to stick in children's hyperactive minds.

1

foundational research

2

our final product

3

design details

MindCompass is a VR meditation experience designed for children on Meta Quest 3 headset. It incorporates gamification and an anthropomorphic Panda avatar to guide children through meditation, in a way that truly engages.

THE DEMO

2-minute walkthrough of MindCompass VR meditation experience

1

foundational research

2

our final product

3

design details

MODALITY AND CONSTRAINTS

Due to the immersive nature of a VR application, we found it to be the best modality to bring mindfulness to children, especially given the proven benefits of VR meditation apps over other screen-based apps1.

We acknowledged the constraints: lack of accessibility, affordability limiting scalability. But we predicted that hardware will soon advance to affordable VR headsets in every home, and decided to prototype an experience that makes a positive impact in that future.

Constraint

How we addressed it

Eye strain concerns

Designed experiences under a few minutes to minimize fatigue

Accessibility for deaf/HoH children

Implemented voice AND text cues for every action

Children who can't read well

Voice narration as primary guidance

VR concept sketches showing user flow and interface design

Low-fi sketches helped us articulate our ideas to the group to discuss tradeoffs. This is the sketch I constructed to showcase my idea for MindCompass VR, the concept that we eventually shipped.

CHARACTER DESIGN

We chose an anthropomorphic panda as our main avatar based on research on virtual animals in immersive experiences2. Studies have shown that furry, animal-like avatars in immersive experiences improve feelings of connection and presence. The soft, friendly appearance of our panda guide helps create a safe, non-threatening environment for mindfulness practice.

Pando, our MindCompass avatar

VISUAL LANGUAGE

We opted to use color to serve aesthetic as well as signalling purposes. Purple indicates interactive controls the child can tap, while pink draws attention to guidance and feedback. This distinction reduces cognitive load, as kids learn to recognize what's tappable without reading labels.

Color system and UI components for MindCompass

Using bright pink and purple accents helped us clearly delineate different action types

FINAL TOUCHES

We applied a heuristic evaluation to our med-fi prototype before coding it in Unity, as a low-cost way to add refinements such as robust error handling and ensure consistency. Heuristic evaluation is a process by which a design team can evaluate their own designs through comparing it against a list of design heuristics prepared by Jakob Nielsen3. We tag-teamed this process — while our co-design lead made the initial Figma mockup, I was in charge of applying design changes in accordance with the Nielsen heuristics.

Onboarding step design
Meditate configuration screen design

Two heuristic-driven changes: simpler onboarding copy and clearer error cues.

THE LAUNCH

I designed the narration of the meditation experience to create an immersive storytelling experience as well as designing a voice on ElevenLabs to bring our anthropomorphic Panda to life. We handed off designs to our developer who built out the experience on Unity using the ShapesXR plugin to leverage our Figma designs.

During the development phase, I was the designer on-call to make last minute design changes to ensure engineering feasibility such as editing the script to make it a shorter length, editing out any gestures or emotions that would not be feasible to implement given our timeline, and more.

MindCompass team at the CS 147 design expo

Our team at Stanford's 2023 UX Design Expo, where we won the Grand Prize and were awarded by Stanford CS Professor James Landay.

It was incredible working in such a hands-on team and having ownership of every aspect of the product development process. My main contributions were in articulating our main vision through analyzing our research data in creative ways, sketching out the VR concept based on which our app was designed, adding refinements to our final prototype based on a Nielsen heuristics evaluation, as well as designing the voice and narration of the game's main avatars, Captain Compass and Pando the Panda.

We went on to be inducted into Stanford 2024 XR Incubator class, where we iterated further, built a network, learned about business, and received an acquisition offer from a global palliative care startup.

References

[1]

Ma, J., Zhao, D., Xu, N., & Yang, J. (2022). The effectiveness of immersive virtual reality (VR) based mindfulness training on improvement mental-health in adults: A narrative systematic review. Explore, 19(3), 310-318.

View Paper →
[2]

Norouzi, N., Bruder, G., Erickson, A., Kim, K., Bailenson, J., Wisniewski, P., Hughes, C., & Welch, G. (2021). Virtual animals as diegetic attention guidance mechanisms in 360-degree experiences. IEEE Transactions on Visualization and Computer Graphics, 27(11), 4321-4331.

View Paper →
[3]

Nielsen, J. (1994). 10 usability heuristics for user interface design. Nielsen Norman Group.

View Article →