AHA Hands-Only CPR
Virtual Reality Experience
My role
UI/UX Designer / Art Director
Project type
Interactive VR training
Personality
Reliable, innovative, engaging
Creative Director
Armando Loredo
Lead Developer
Chris Crowell
What i did
Defined user flows, wireframes, and interaction patterns
Built design system
Conducted headset testing to validate clarity and usability
Collaborated with stakeholders and developers to translate CPR training into VR
Art directed 3D artists and animators
Overview
This virtual reality (VR) application, developed in partnership with the American Heart Association (AHA), is designed to teach critical lifesaving skills, including Hands-Only CPR and the proper use of Automated External Defibrillators (AED). The experience incorporates hand-tracking technology to guide users on proper hand placement and positioning, while offering real-time feedback on compression depth, technique, and rhythm, ensuring the correct beats per minute during CPR.
Client needs
Problem
Traditional CPR and AED training was conducted exclusively in person, which posed challenges in accessibility, particularly after COVID-19. These sessions were not only time-consuming but also lacked the tools needed to measure critical performance metrics, such as the depth and rhythm of CPR compressions, reducing the effectiveness of the training.
Solution
Our VR application provides a highly immersive and flexible learning experience, allowing users to train from the comfort of their own homes. “Learn Mode” ensures users understand the proper techniques, while “Practice Mode” offers real-time feedback and performance evaluation, helping users improve their skills. By combining convenience, accessibility, and precise performance tracking, the app delivers an effective and scalable alternative to traditional in-person training methods.
Research & Strategy
Here are some of the client-provided user stories that shaped our understanding of user needs. Each story helped us identify pain points and informed the UX strategy that guided the structure and feature design of the virtual showroom experience.
✅ As a learner, I want to learn CPR in a way that feels real and hands-on, so I can remember it when it matters.
💡 Key Insight
Users retain more when the learning experience feels authentic and occurs in real life environments.
🧠 UX Strategy
Use hand tracking, real-time compression feedback, and and real-life environments to simulate emergencies.
✅ As a CPR instructor, I want more inclusive training visuals that reflect the diverse people we serve.
💡 Key Insight
Representation builds comfort and trust in health training materials.
🧠 UX Strategy
Let users choose CPR manikins with various skin tones and avatars to mirror real-world diversity.
✅ As a learner, I want to know immediately if I’m doing something wrong so I can improve on the spot.
💡 Key Insight
Immediate feedback accelerates skill development and increases retention.
🧠 UX Strategy
Implement a floating gauge with live metrics on rhythm, depth, and positioning in both training and practice modes.
✅ In a real-life situation, I want to learn how to use an AED.
💡 Key Insight
Confidence with AED use comes from step-by-step, hands-on practice.
🧠 UX Strategy
Provide interactive AED scenarios with realistic prompts, device handling, and checklist-based evaluation.
Low-fidelity wireframe / storyboards
Closeup gray boxes
Design System
Lub Dub
AHA Red
#C10E21
Deep Red
#990000
White
#FFFFFF
Gray
#636466
Black
#000000
Component library
Key Features
01. Hub
Upon entering the virtual space, users are welcomed into an AHA lobby, the Hub for the experience. A virtual dashboard offers controls to switch between English and Spanish languages, select “Learn Mode” or “Practice Mode,” and turn a Closed Caption feature on and off. The “Learn Mode” helps teach the user the recommended steps for Hands-Only CPR and using AED devices. Once users have gone through the “Learn Mode,” they can enter the “Practice Mode,” where they are scored on their performance.
02. Manikin selection
In “Learn Mode,” participants can choose from various CPR manikins, each representing various skin tones. This was really important to AHA because people of color are underrepresented in CPR training materials.
03. Location options
Users will be able to choose from three different environments (Gym, Library, and Courtyard) to enable users to learn and practice in different real life situations.
04. Music selection
Users can make their selection from a list of music that plays at 100 to 120 compressions per minute. The beats in the music helps them perform the CPR more more accurately. The music also contributes to the overall immersive quality of VR training.
05. CPR & AED instructions
Users are demonstrated with step by step instructions on how to to perform CPR and use the AED.
06. Hands-Only CPR practice
In Learn Mode, users practice Hands-Only CPR on a manikin, while Practice Mode tests their skills on a virtual person in a realistic environment. The experience uses hand tracking for proper hand placement and features a dynamic floating gauge for real-time feedback on compression depth, technique, and rhythm, ensuring effective CPR training.
07. Performance evaluation
The training module evaluates Hands-Only CPR proficiency using a scoring system. Users are assessed on safety, victim evaluation, and actions like calling for help and performing CPR, with pass/fail checkpoints. At the end, participants receive a performance breakdown, with a perfect score of 100.
What I Learned
Designing for VR taught me the importance of continuously testing in the actual medium—in this case, the Quest headset. It’s easy to get caught up in 2D screen design, but real user interaction happens in 3D space. Elements that feel polished on a flat monitor can behave differently when experienced in immersive environments. Frequent in-headset testing helped validate scale, placement, clarity, and interaction flow—ensuring that the final experience felt intuitive, responsive, and true to life.
Available on the Meta App Labs Store
Download the VR experience here on the Meta Store – https://www.meta.com/experiences/7017680038281740/
To learn more about the American Heart Association and Hands-Only CPR, visit – https://www.heart.org/en/nation-of-lifesavers
