HelpCPR Training For Social Good

UX/UI Case Study

Project 02

Project completion date June, 2023

The goal of HelpCPR website and app is to offer users an easy and reliable platform to learn CPR skills. Through the app, users can explore different CPR learning methods, making it simple to choose and practice the technique that suits them best. Users can access CPR instructions with just a few taps on their devices and track their progress as they become more confident in their life-saving skills.

*Note: This project is based on a fictional brand.


Project overview

The problem

The goal

My role


Many individuals lack the necessary skills to provide assistance during emergencies, leaving them feeling helpless and unable to respond effectively in critical situations.

Design a user-friendly CPR learning app. By providing accessible and easy-to-follow lessons, tutorials, and practice scenarios, individuals can empower the skills and knowledge needed to confidently assist during emergencies.

User research
UX/UI Designer

Design process






User Research
User Interview
Capitative Analyst

User Personas
Empathy Map
User Journey

User Flow
Information Architecture

Hi-Fi Design

Future Concept

Empathize stage

In order to make HelpCPR the best it could be, I first did some research. I conducted surveys and interviews to better understand what the users needed. From this, I learned that some people don't have much time, some find it hard to remember CPR steps, and people have different ways they like to learn. With this knowledge, I designed HelpCPR to meet the needs of our users in the most effective way.


User pain points

Users find it difficult to find the time to commit to traditional CPR training courses.


Remembering steps


Cost constraints

Competitive audit

I conducted a competitive audit in order to understand how my competitors address challenges in teaching CPR. By analyzing their strengths and weaknesses, I gained valuable insights to improve the CPR app. This helped me find opportunities to create an app that stands out, meets various user needs, and provides an effective and user-friendly CPR training experience.

Remembering the proper CPR steps can be overwhelming for users, making them uncertain about how to respond during emergencies.

Not everyone likes traditional CPR classes, which makes it difficult for some to stay interested and motivated to learn.

Traditional CPR courses can be expensive, making it challenging for budget-conscious individuals to afford the necessary training.

Define stage


After conducting research, I created personas for the app. These personas represent the different types of people who will be using the app. They helped me understand their unique problems, goals, and what they expect from the app. This understanding guides me. in creating a user experience that meets their needs and provides solutions to their specific challenges.

Persona #1, Emma

Problem statement:

Emma, a biology-loving college student, wants an easy-to-access CPR app to gain a solid understanding of CPR steps, enhance her healthcare knowledge, and be prepared for emergencies, all while balancing her social life and school.

Persona #2, Adam

Problem statement:

Adam is a hard working construction worker, needs a convenient and user-friendly CPR platform to refresh his skills so he can be ready for any emergencies he may encounter.

User journey map

Next, I made a user journey map to plan a smooth experience for our users. It shows their goals and the steps they take, along with their feelings along the way. This helps me find any problems and make sure they have a great experience using our app.

Persona #1, Emma

Goal: Learn the CPR steps with a busy schedule.

Sketches and wireframes

Paper wireframes

Before creating digital wireframes, I used paper wireframes to quickly and efficiently record ideas. This method helped me establish the design structure early on and decide what elements would be included in the final version. It allowed me to organize information, determine the flow and relationships between pages, and create a clear hierarchy for the app.

Lo-fi wireframe

And more...

Usability study

I conducted a trial of the CPR training app's initial version with 5 participants, under the remote guidance of a UX designer. By setting clear goals, encouraging candid input, and using open-ended questions, I gained valuable insights. These findings will drive enhancements for an improved user experience.

Take aways

After the usability testing, I used an affinity map to analyze the observations. I grouped the notes based on each participant's feedback to see their individual thoughts. Then, I looked for patterns and similarities among the feedback and grouped the notes accordingly.

This helped me identify areas for improvement in the prototype. The affinity map allowed me to make sense of the data and draw meaningful insights from the testing observations.


design recommendations

  • Users expressed a desire to add an option to change the language

  • Users suggested adding videos and pictures for a more appealing interface

  • Users suggested to add a button to call 911 through the app

  • Language Preference Option: Provide users with the ability to switch to their preferred language. It's best to place this option where it's easy to find, like at the top of the page or in the menu.

  • Visual Enhancements with Videos and Pictures: Make the app more engaging and user-friendly by including videos and pictures. These visuals will help users grasp the lessons better and make the app more appealing.

  • Emergency 911 Button: Add a button on the app's homepage that allows users to call 911 conveniently during emergencies. This feature ensures quick access to help when needed.


Based on the insights gathered from the usability testing, I have made several revisions to the design.

The initial design made it hard for users to grasp CPR theory. Using insights from the usability study, I improved the app's theory section. Now, users can learn with images and videos, making it simpler and more effective.



Visual design

As I proceed to the visual design phase, I keep the user's needs in mind and ensure that the design is easy to use and accessible. I apply design principles such as gestalt, contrast, and hierarchy to create a clear and organized layout. I also pay attention to typography, layout, and color choices to maintain consistency throughout the design. By following these principles, I aim to make the design visually appealing and user-friendly.


Design system:

Hi-fi wireframe:

After establishing the new branding , I proceeded to create the visual design for the important pages of the website. I used the wireframes and insights gathered from the usability study as a foundation for this process. By combining the visual elements and user feedback, I aimed to create a cohesive and engaging visual experience for the app users.

And more...

High-fidelity prototype:

You can interact with the prototype right on the screen by clicking or tapping on the elements.
It lets you navigate through the screens and experience the user interface like a real product. Enjoy exploring!

You can also view the prototype by clicking here


Users shared a positive feedback stating, "The user-friendly interface and intuitive navigation of the CPR app make it easy to learn the essential resources and enhance their CPR skills effectively." This feedback indicates that the designs have a positive impact on the user experience and is align with the goal of empowering users to learn CPR easily.

Empathy mapping

This process was done to define the target audience with more clarity and understand what they need. Empathy mapping helped me see how they think and feel about things. This way, I can design the app to fit their needs and make them happy.


Crazy Eights

To address the gaps identified in user pain points, I conducted a quick ideation exercise to generate potential ideas and solutions. This exercise allowed me to brainstorm creative approaches to meet user needs.

Responsive designs


With the app design complete, I started working on designing the responsive design. I used the HelpCPR sitemap to guide me with the organizational structure of each screens design to ensure a consistent experience across devices

Responsive designs:





I learned that by carefully going through each design step and understanding user needs, I was able to create practical and beneficial solutions for the CPR app, addressing a significant problem effectively.

What I learned