This project was created as part of the Google UX design bootcamp.

Timeline

June - July 2022

Role

Solo UI/UX Designer & UX Researcher

Responsibilities

  • Survey

  • Wireframes

  • Prototype

  • Usability Study

Tools

Goal

The goal was to design a CPR tool that will improve education on the topic of learning how to give CPR in emergency situations so that more people know what to do when someone is in cardiac arrest and to possibly save lives.

Why?

Cardiopulmonary Resuscitation (CPR) is an emergency procedure that can help save a person's life if their breathing or heart stops. If CPR is performed in the first few minutes of cardiac arrest, it can double or triple a person's chance of survival (source).

The Problem

Only about half of Americans - 54% according to a survey by the Cleveland Clinic (source) - say they know how to do CPR.

In fact, many people need a refresher course on how to perform CPR!

The Solution




An interactive tool that helps people learn how to give CPR with detailed information and pictures and also refreshes their memory on CPR knowledge with a quiz.

Design Thinking Process

For this project, I utilized the following design thinking process steps to take my CPR tool from idea to reality:

1) Empathize

Understanding the user

2) Define

Figuring out the problem

3) Ideate

Brainstorm solutions

4) Prototype

Creation and experimentation

5) Test

Refining the product

Survey



To get a feeling for my potential users, I conducted a survey via GoogleForms. Participants were 23 to 47 years old.

My main goal here was to understand if people already know how to perform CPR, which challenges they have faced while learning CPR, what they thought would be helpful in an interactive CPR tool and if they thought learning how to perform CPR is an essential thing everybody should know.

Insights




With the survey results, I found 3 main user pain points that I definitely wanted to address with my CPR tool:

Quotes

"Accidents happen more often thank you think. You can save lives with CPR."

"It is difficult to simply refresh what has been practiced since the learning
resources are often bound (e.g., limited by time)."

Personas




To create understanding and empathy with the end-users, I made two personas. They were used to summarize and communicate my research about the user that would interact with my product.

Crazy 8's




I wanted to generate a wide idea of solutions and in order to do so, I utilized the Crazy 8's method. Therefore, I did a quick iteration to come up with several ideas to address user pain points.

My focus was specifically on learning how to give CPR and simple CPR education features (e.g., quiz, CPR guide).

Paper Wireframes





To start with my designs, I followed the mobile-first philosophy and started by designing the mobile version of my product first and later adapt to larger screens.

It was important to me to start with the screens for mobile phones because I wanted to help the new billion users and I knew that more and more people use apps every day instead of actually browsing the internet.

The following shows my iteration of the home screen of my app.
My focus was on implementing an interactive tool to help in emergency situations, CPR tips and a "Learn CPR" section to quickly see where people can learn CPR.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Digital Wireframes




After ideating and drafting my first paper wireframes, I created initial designs for the HM ("Hearts Matter") app.

The resulting digital wireframes focused on delivering basic CPR steps to help users learn CPR. You can view the digital wireframe of the home page below.

Lo-Fi Prototype




The low-fidelity prototype connected the main user flow of viewing basic CPR steps and taking a CPR quiz to deepen the knowledge of how to give CPR to adults.

View the HM low-fidelity prototype here.

HM Lo-Fi Prototype.mov

Usability Testing





I conducted 2 rounds of usability studies with potential users and tested the lo-fi prototype first and then the hi-fi prototype in the second study.


For each usability study, users were given a scenario and asked to do the following tasks:

  • Find and select Learn CPR for adults

  • Read the CPR steps for adults and take the CPR quiz at the bottom of the screen to deepen your knowledge about how to perform CPR on adults

Findings

1st usability study:

  • Users were distracted by the "Learn CPR" section at the top and need a more intuitive way to access "Learn CPR" on the home screen.

  • Users were annoyed to have to press "Next" every time after submitting an answer to each question.

  • Users wished for a way to review all questions at the end of the quiz to have a better learning experience.

2nd usability study:

  • Users mentioned that the quiz feature wasn't fully interactive when they reached certain questions *

* After this feedback, I saw my mistake and made the quiz feature fully functional and interactive again

Heat Maps




While conducting data for my second usability study, I looked at resulting heat maps. This let me visualize my data even more and showed me on which elements my users clicked.

(Note: red depicts popular - hot - areas of the page, while blue depicts less popular - cold - areas)

These two heat maps let me see on which elements my users clicked within my second usability study.

They directly clicked on "Learn CPR now" and on "Learn more" under the CPR for adults section without any misclicks which let me believe that they directly saw the buttons and could complete my main user flow easily and effectively.

Design Changes





Based on these insights, I applied design changes to the following app sections.

1. Removed the filter options at the top and provided a clear "Learn CPR now" section.

2. Removed the "Next" button after submitting an answer in the quiz.

Instead of hitting "Next", users now were automatically redirected to the next question after
1.5 seconds to ensure an easier user flow.

3. Added a "Review Quiz" when users reach the quiz results screen.

Visual System





The visual system I created in Adobe XD allowed me to have a better overview over my components, typography, buttons and illustrations that I included in my CPR tool.

Hi-Fi Prototype




My high-fidelity prototype followed the same user flow as the low-fidelity prototype, including the above design changes.

It includes a fully interactive and functional CPR quiz - click here if you want to give it a try and view the finished prototype! :)

HM Hi-Fi Prototype.mov

Sitemap




When I finished my app designs, I started work on designing a responsive website.

I used the HM sitemap to guide the organizational structure of each screen's designs to make sure that the user experience is cohesive and consistent across devices.

Responsive Designs





Following the mobile-first philosophy and being done with the app, I designed screens for additional sizes to make my CPR tool responsive across the following devices:

  • Smart watch

  • Mobile phone (which I already designed)

  • Tablet

  • Desktop

Accessibility Considerations





To make my CPR tool besides being responsive also accessible:

  • I used clear labels for interactive elements that can be read by screen readers

  • All colors that were used follow WCAG guidelines

  • All text is visible and does not go below 12pts

Values




The HM CPR tool would be definitely valuable to users and potential businesses by being:

  • a tool to accompany local hospitals and training centers to educate people on CPR knowledge

  • useful in providing clear and detailed CPR facts, tips, and steps to make learning CPR more easy and fun

  • responsive across various devices (smart watch, mobile phone, tablet, desktop) which makes this CPR tool even more accessible to more people, including the new billion users who are getting online for the very first time

Future Steps

What I learned:

  • I learned how to create a fully functional and interactive quiz feature

  • I learned that creating responsive designs across a variety of devices is at first challenging but gets better over time

What I could have done better:

  • I could have implemented more questions for the CPR quiz to make it even better and more useful

  • Initially I wanted to include a lot more information in my prototype and I had a hard time in the beginning to focus on the main idea

Next Steps:

  • Conduct research on how successful the app is in reaching the goal to learn CPR

  • Add more educational resources for users to learn CPR

Thank you for reviewing my work
on the "HM" CPR tool!