Hero overlay

This hero is built with a flex layout, aligned and justified so that the content will always be centered horizontally and vertically. To change this section’s background, select the “Hero Overlay” then scroll to the background section of the Style panel and replace the image. You can also adjust the opacity of the overlay’s black background for better contrast.

Button text
In-app illustrations and images sourced from Vecteezy.com and Unsplash.com

Reviving the CPR Training App

UX Research, Conceptualization, and Design
Project Overview
This project seeks to make CPR and first aid training accessible to all users, regardless of their ability or previous knowledge.
My Contributions
These designs were created as part of the Google UX Design Certification program. I worked on every part of this project, from conceptualization and user research, wireframes, prototypes, usability studies, and designs.
User Research
A study by Cleveland Clinic reports that only about 54% of Americans say they know CPR. By my own research, this seems to be partially because some people don’t have access to classes, some people used to know and forgot, and some people have just never been told about the importance of knowing CPR if you’re ever in an emergency.
Our users
Even before interviewing my participants, I had an assumption that came to be true: our two main user groups would likely be "people who don't know CPR," and "people who know CPR." Data from the user research interviews was synthesized into two personas that summarize these two main user groups.
Ideation - crazy 8's
Paper Sketches
low-fidelity designs
organized wireframes
uCPR was designed with a mobile-first philosophy, so the dedicated mobile app was wireframed first.
Click here to view the uCPR app wireframes.

Later on, a responsive website was created as a supplement to the uCPR app.
Click below to view the website wireframes:
MobileTabletDesktop
Simple, easy to Read Screens
The uCPR app's main goal is to make it easy for all users to learn about CPR and get guidance in emergencies. Bold colors, large text, and descriptive icons are used to guide the user through the steps.
Accessibility Settings
To increase usability for a diverse set of users, uCPR is equipped with a wide variety of settings. Users can change the language, colors, voice capability, and data permissions for the app. Additionally, users can also customize their home screen to rearrange, add, or delete widgets and make the home screen work best for their needs.
Design Solutions
Tempo Mode
Users can select Tempo Mode to activate a pulsating tempo guide that beats in time with the recommended rate for CPR chest compressions. Pressing the button will start a trio of cues: visual (spinning circle), audible (beeps/clicks), and tactile (phone vibration).
Corporate Transparency and Engagement
While users can still access key emergency and lesson information on uCPR's website, the site has additional information that gives users context on where the company came from, and gives them opportunities to engage with the company itself through donations and volunteering.
Download Page
Another unique page to the responsive website is a page that gives users links to all of the platforms where they can download the dedicated app. Currently, the Fitbit and Apple Watch prototypes are still being worked on.
responsive website
HIGH FIDELITY PROTOTYPEs
To try out the full uCPR app prototype for yourself, click here.
‍
To try the responsive website prototypes, click the links below:
MobileTabletDesktop
FULL case study
To view this project in more detail, view the entire case study here: Link to Case Study

Want to work together?

If you like what you see and want to work together, get in touch!

rebecca.cardianle@outlook.com(310) 528-6727View My Resume
Powered by Webflow
FacebookTwitterInstagram