Vivaid

Each year, thousands of lives could be saved if more bystanders felt confident performing CPR. Yet many adults feel they lack consistent CPR training and struggle to recall the steps when it matters.

Challenge
to design a cross-platform mobile app that helps adults learn and retain CPR skills, with a focus on accessibility and real-world usability.

Parameters
Duration: 3 weeks, part-time
My Role: Lead UX designer
Tools: Figma, Miro, Google Slides, Google Sheets

Solution
A platform that is accessible, simple, and easy to revisit regularly, while providing informative and trustworthy CPR learning.

Research

Research goal

  1. What is the user's need for quick and safe access to CPR knowledge and instructions?

  2. How accessible is the information about CPR today, and how could it improve?

  3. What frustrations do the users have when searching for information about CPR and lifesaving?

  4. How do users want to refresh and retain this knowledge over time?

Interviews

To answer my research goals, I conducted targeted user interviews and synthesized findings into clear user needs and pain points:

“When finding information about CPR, I would search the internet and find many different websites. I don’t know if the information is updated or not, or if the source is reliable.”

“I don’t feel confident in my knowledge of basic CPR and how to act or be of help if faced with a life-threatening situation.

“I have CPR training once a year, but I forget what I learned in between the training.”

Personas

A black-and-white portrait of a 61-year-old woman with shoulder-length dark hair, smiling slightly. She is wearing earrings and a patterned top. The background is blurred greenery.

Daija

“I want to help in an emergency, but I’m afraid I’ll mess something up or do more harm than good.”

Daija is a 61-year-old anthropologist who lives with her husband. She and her husband stay active by exercising and going on walks. Danija has mild arthritis, which affects her hand mobility and speed. She prefers apps with clear instructions and finds it difficult to read text with low contrast because of reduced vision.

Goals

  • Feel empowered and confident to help in a crisis.

  • Have one trusted, easy-to-use source for CPR knowledge.

  • Be able to refresh skills regularly without having to sign up for a full class every time.

Frustrations

  • Confused by inconsistent information from Google searches.

  • Has attended CPR training, but forgets techniques and ratios a few months later.

  • Worries that her arthritis and reduced vision might prevent her from being effective in an emergency.

A smiling young man interacts with a laptop, sitting at a table in a room with a brick wall and shelves in the background.

Mateo

“I want to help—but most CPR training videos don’t include sign language or captions I can actually rely on.”

Mateo is a 34-year-old coordinator who lives with his wife and 1 child. Mateo has had hearing loss since the age of 12 and is fluent in ASL (American Sign Language) and lip-reading. Mateo uses an iPhone with accessibility features like haptic feedback and visual alerts, and prefers apps with full captioning, ASL support, or strong visual guides.

Goals

  • Be able to confidently perform CPR without relying on audio.

  • Learn at his own pace with visual cues, not just written instructions.

  • Find trusted CPR info in one place, rather than having to vet websites or decode unclear captions.

Frustrations

  • Wants to help in emergencies but lacks real-time guidance he can follow nonverbally.

  • Attended CPR training at work, but information wasn’t fully accessible—interpreters were rushed or absent.

  • Struggles to retain what he learned due to poor visual materials.

Learn more about my research process

Defining user needs
Competitive audit report
Emphazise with users

Ideate

Storyboard

Notes with hand-drawn illustrations and handwriting, including a woman smiling with a speech bubble that says, "I now feel more confident that I'll know what to do in serious situation," and a person with a speech bubble saying, "Hey, time to sharpen your AR skills." The notes are pinned to a surface with a blue pen on top.

I created a storyboard to illustrate how users might interact with the CPR app in real life. Storyboarding helps me step into the user’s shoes and map out key moments, emotions, and decisions before jumping into wireframes or prototypes.

2 Notices ad on phone and thinks: “I had training once, but I wouldn’t know what to do if something happened.”

Line drawing of a hand holding a smartphone displaying an ad asking for CPR donations.

User flow

Flowchart showing steps for setting a reminder in an app, including opening the app, navigating menus, choosing reminder details, confirming, and setting notifications.

Sitemap

An emergency response app homepage featuring options like 'Find nearest', 'Add missing', 'Call now', 'Share location', with sections for 'Learning' including CPR guides, 'My Profile' with progress and modules, 'Information' on emergency numbers and saving lives, and 'Settings' for language, accessibility, notifications, and privacy.

Paper wireframes

Collection of four hand-drawn mobile app interface sketches related to emergency medical services, including AED locator, CPR instructions, quiz, and user progress screens.

Digital wireframes

Mobile app interface focused on learning CPR and first aid, with sections for training modules, progress tracking, and updates.
Mobile app screen showing a step-by-step guide for CPR and AED use, with video tutorials, quizzes, and navigation menu at the bottom.
Mobile app screen displaying emergency information, with options for AED map, emergency call, and various health-related resources.

Low-fidelity prototype

A smartphone screen showing a CPR training app with progress tracking, modules, weekly challenge, and navigation icons at the bottom.
Mobile app screen displaying emergency response training options, including CPR for adults and children, AED use, choking, bleeding, and drowning, with progress tracking and navigation menu.
A line drawing of a woman sitting on a couch, looking at her phone, with her legs crossed.

1 The user sits on the couch in the living room, scrolling on their phone.

Line drawing of hands holding a smartphone displaying a CPR training video.

3 The user downloads the app and starts learning.

Drawing of a hand holding a smartphone, with the screen displaying 'CPR' at the top and a button labeled 'Weekly reminder.'

4 Sets weekly reminder notification, and chooses the time and date.

A woman doing laundry with a speech bubble that says, 'Hey! time to refresh your CPR skills.'

5 One week later, the user gets a notification with a reminder to refresh CPR knowledge.

A woman smiling while looking at her phone, with a speech bubble that says 'I now feel more confident that I’ll know what to do in a serious situation'.

6 The user takes a 60-second quiz and gets positive feedback.

Flowchart of a learning app interface showing steps and options for starting a CPR learning course, with circles and rectangles labeled with navigation and learning steps.

Testing

Usability study

I conducted a usability study to test the main user experience of my low-fidelity prototype and identify usability issues, particularly for users with hearing loss, reduced vision, or limited digital literacy.

I wanted to understand the specific challenges users face in the process of finding content, completing a weekly quiz, and setting a weekly reminder. I also had the users provide general feedback on their experience.

Research study plan

Synthesizing data

I identified patterns and themes in my data, and translated my themes into insights I can apply to my designs.

Finding insights

Refine

Insight 1 

The buttons for modules and quizzes need to have bigger contrast while hovering/pressing.

Mobile app interface showing section headers including "My progress" and "Updates" with placeholders for quizzes, completed music, and recent updates, featuring icons of geometric shapes like a triangle, square, and circle.
Instructional interface for CPR training showing icons for adult and child CPR, bleeding, and drowning, with videos for adult and child CPR, and a quiz section to test knowledge.

Action: I changed the contrast of the text and the background in the cards while hovered by making the background color lighter. I checked the contrast to be within accessibility standards using Web content accessibility guidelines (WCAG).

Insight 2 

The homepage and the learning page should be combined so that there are fewer pages in the menu for simpler navigation

Mobile app interface for CPR training with options for adult and child CPR, AED use, bleeding, drowning, and choking emergencies, featuring videos and quizzes on CPR and choking response, with navigation icons at the bottom.
Mobile app interface for CPR training, featuring buttons for CPR adult, CPR child, AED use, chocking, bleed, and drowning, with sections for progress updates and information.
Mobile app screen showing a step-by-step guide for using an AED, including sections for CPR for adults and children, AED use, choking, bleeding, and drowning, with video tutorials and quiz options at the bottom.

Action: I combined the learn- and home page, making “learn” the first page the user sees. I did this with the main purpose of the app in mind: to enable users to quickly and easily learn CPR without needing to search for information.

Insight 3 

There needs to be a shortcut to set a weekly reminder that the user can easily find.

Mobile app interface for CPR training with options for adult and child CPR, AED use, bleeding, drowning, choking, videos, quizzes, and reminders.

Action: To support ease of use, I included a visible prompt and an accessible button, allowing users to quickly navigate to settings and set a reminder.

Insight 4 

The header buttons need to be less distracting while still being emphasized.

Mobile app screen for Vivaid with emergency response options including CPR for adult and child, AED use, bleed, drowning, and choking. It also displays videos on adult and child CPR.
Mobile app screen with options for learning CPR and emergency medical procedures, including CPR adult, CPR child, AED use, choking, bleed, and drowning training.

Action: I made the buttons smaller and placed them together on the other side of the logo. This way, the buttons blend in more with the rest of the content, still being easy to spot by the user wherever they find themselves in the app.

Prototype

Mobile app interface for CPR training with options for adult, child, AED, bleed, drowning, and choking emergencies, video tutorials, and a quiz section.

Find the nearest defibrillator in the AED map, and a direct call button to the emergency number.

A mobile app screen showing CPR training options, including videos and quizzes, with icons for adult and child CPR, AED use, bleeding, drowning, and choking, and navigation buttons at the bottom.

Additional information about lifesaving, recent CPR updates and guidelines, and how to get certified with practical CPR training courses.

Mobile app interface for CPR training and emergency response, featuring options for adult and child CPR, AED use, bleeding, drowning, choking, video tutorials, and a quiz.

Learn CPR with modules and quizzes. Keep track of your learning progress.

Mobile app screen showing AED and emergency procedures, with icons for CPR for adults and children, AED use, bleeding, drowning, and choking, featuring videos and a quiz section for CPR training.

Adjust accessibility settings and set notifications for the knowledge refresher quiz.

Looking back

This project challenged me to think beyond basic functionality and truly consider what makes a learning tool accessible, reassuring, and empowering—especially in high-stakes, time-sensitive situations.

Using the design thinking process, I kept returning to the real lives and needs of users like my personas, Daija and Mateo.

For Daija, that meant clear, voice-supported instructions, easy-to-read text, intuitive directions and thoughtful color contrast to accommodate her technological level and reduced vision.

For Mateo, it meant designing a fully visual learning experience, complete with captions, videos, and strong visual cues, so that he could confidently learn emergency CPR without relying on sound.

While this project was completed in just two weeks, it deepened my understanding of how inclusive design can have life-saving impact. Through rounds of user research, usability testing, and continuous refinement, I created a high-fidelity prototype that not only teaches CPR but also supports users with diverse physical and sensory abilities.

What’s next?

Given more time, I would continue to expand this project in a few key directions to make the app even more inclusive, practical, and life-ready:

  1. Real-time practice mode

  2. More inclusive language support - including ASL/IS interpretation

  3. Offline functionality

  4. Integration with local emergency services

If you have thoughts, questions, or feedback on this case study, I’d love to hear from you!

Contact me