CPR Simplified is a tool that helps people ages 15-30 learn how to perform CPR. CPR Simplified aims to inform users the importance of CPR and the step-by-step process of performing CPR.
Embedded Files
Project Overview
P R O B L E M
Some people are unfamiliar with how to perform CPR.
G O A L
Design a website and an app to help people realize the importance of CPR and how to perform CPR.
R O L E
UX Designer designing a website and app from conception to delivery.
R E S P O N S I B I L I T I E S
Conducting user interviews, paper and digital wireframing, low-fidelity and high-fidelity prototyping, conducting usability studies, and iterating on designs.
Understanding the User
U S E R R E S E A R C H
Summary: Conducted interviews to understand the users I'm designing for and their needs. A primary user group identified through research was young adults who want to be prepared in emergencies.
P A I N P O I N T S
Difficult to Understand
Some people thought that the learning materials for CPR is difficult to understand.
Emergency Situations
People want to be of help during emergency cases, but are not familiar with how to perform CPR.
Awareness & Confidence
Some people are aware of CPR and its importance but do not know how to perform it. People who’ve learned CPR are also not confident enough to perform CPR.
P E R S O N A S
Fatima is a proactive teaching assistant who needs a way to learn how to do CPR effectively on the web because she wants to be prepared at all times.
Eric is a biker who goes on group rides who needs to easily access information to learn CPR because he wants to be prepared for any accidents.
Starting the Design
P A P E R W I R E F R A M E S
Initial wireframes were sketched out on paper to see which combination or layout would make the most sense.
D I G I T A L W I R E F R A M E S
Hand-to-Hand CPR: Some people are not comfortable with giving mouth to mouth CPR, so an option to learn hand-to-hand is available.
Quizzes: Users can freshen up their knowledge on CPR by taking the quiz every now and then.
L O W - F I D E L I T Y P R O T O T Y P E
The low-fidelity prototype shows the primary user flow of going through the learning material and taking a quiz.
U S A B I L I T Y S T U D Y
A usability study was conducted on the low-fidelity website prototype to find out if the flow is easy to follow and works for the users.
Findings
Some users are confused on how to change into different CPR recipients
Users have pointed out that they are want to go to the previous step on the CPR process.
Some users are also confused how to change into a different type of CPR.
Refining the Design
H I G H - F I D E L I T Y M O C K U P S
All of the findings from the usability were important changes on the ‘Learning CPR’ page. Early designs had important details on the topic of CPR, however, it did not have enough to help users navigate seamlessly.
Additional navigation buttons were added to help users navigate easily through the lesson. Supporting details were also added to further help users understand how to go about the CPR process and the page.
H I G H - F I D E L I T Y P R O T O T Y P E
Findings from the usability study were implemented on the high-fidelity prototype.
Mobile Design
U S E C A S E
During the interviews with potential users, I’ve realized that people would access this information in different scenarios. People who really want to set aside a time to learn it, would prefer the web. People who foresee that they might use it in emergency situations, would prefer mobile.
K E Y D I F F E R E N C E S
Mobile
No need for internet connection.
Real-time CPR guide - meant to be used when you’re in an emergency
Web
More relaxed learning experience
Quizzes so users are able to test themselves whenever they want to refresh their memory.
P R O T O T Y P E S
The following are the prototypes for the mobile version of CPR Simplified.
Going Forward
T A K E A W A Y S
1 During empathizing stage, I should have expanded the interviewee pool. I believe this tool can be improved to serve a global audience. It can have features such as:
Language translations
Different layouts for languages in different reading directions
Automatic updating of emergency assistance numbers
2 A separate usability study for the mobile would be beneficial, because they both have different use cases. A usability study for the web design is not applicable for the designs for mobile.
N E X T S T E P S
Content Review
The CPR process needs to be reviewed by those in the medical field. This is to make sure that the content is updated and factually correct.
Mobile App
Work more on the mobile app design and experience. Since the use case is different, it needs the same (if not more) amount of iteration and usability testing.
Email me at margavancena@gmail.com / Connect on LinkedIn
Margaret Avancena. Made with ❤️ on Google Sites!
Page updated
Google Sites
Report abuse