Paper Wireframe for the homepage

This is my final project for the Google UX Certificate

A Website where an individual can learn how to do Hands-Only CPR

My Role

UX Designer, UX Researcher, UX Writer, Visual Designer, Motion Designer

Project Duration

May 2024- June 2024

The Problem

Not many US Americans know how to conduct CPR or don't feel confident enough to do so

Target Users

Elderly Individuals, those who have elderly loved ones, or those who have loved ones with health issues

User Pain Points

Users don't know how to or don't feel confident in conducting CPR. Users don't conduct CPR on strangers out of fear of injuring the individual

The Goal

Create a way for the average person to quickly learn hands-only CPR

As someone who is CPR and AED certified, I felt empowered when I first learned how to conduct CPR in my course lesson. I wanted to give that same empowerment to others as one of the most reasons people avoid CPR is that people don't feel confident in their abilities.

Digital Wireframe and Lo-Fi Prototype Version 1

Three personas were created (Amalia, Misty, and Thomas) to represent the groups of people who want to learn CPR. Several Internet sources were found to see what kind of users would most benefit from CPR and which group of people is most likely to encounter Cardiac Arrest. According to the research, it is individuals 55 and older. I conducted a competitive audit on the American Heart Association and The Red Cross and noticed that they mostly focus on CPR certifications. Thus, this is the concept I originally decided to go for. For the homepage, I was inspired by the American Heart Association (AHA) and the Red Cross for the layout of the homepage.

Originally, this app was going to be where the user can set up an appointment to take a CPR and AED Certification course. Similar to the AHA and the Red Cross in their mobile websites. A red, white, and black color palette was chosen due to its prevalence and recognition in the medical industry.

I conducted a study for 5 Anonymous participants for both rounds 1 and 2 via Google Forms. Round 1 and 2 participants were family members and friends. The most prevalent critique was that it would have been better to make an app that leans more into the theme of teaching hands-only CPR instead of signing up for a course. So, I had to start from scratch.

Lo-Fi Wireframe and Prototype, Version 2

The website was rebuilt after reconsidering the accessibility of the app. The app changed from being about registering for a CPR and AED certification course to an app that will teach users who will teach them hands-only CPR without having to pay for a course. I kept the red and white color palette as it is a prevalent color for medical services; however, I removed black since it would no longer fit with the rest of the color palette due to the intensity of its hue.

Hi-Fi Prototype, Version 2

I used the layouts from my previous hand-drawn wireframes to create the homepages, image and text/video and text pages, and so on. I added three additional categories as CPR is conducted differently depending on the age and condition of the person. I kept certain elements of the previous version, such as the text step-by-step and video (w/ transcript) for visual learners or those with hearing impairments, in case the viewer doesn’t have time to read. (high-stress situation, multitasking, etc.)

Final Mockup and Linear Prototype for 6-inch phones

Figma Link