This project was created as part of the Google UX design bootcamp.
Embedded Files
Timeline
Timeline
June - July 2022
Role
Role
Solo UI/UX Designer & UX Researcher
Responsibilities
Responsibilities
Survey
Wireframes
Prototype
Usability Study
Tools
Tools
Goal
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?
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).
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
The Problem
Only about half of Americans - 54% according to a survey by the Cleveland Clinic (source) - say they know how to do CPR.
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
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.
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
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
1) Empathize
Understanding the user
2) Define
2) Define
Figuring out the problem
3) Ideate
3) Ideate
Brainstorm solutions
4) Prototype
4) Prototype
Creation and experimentation
5) Test
5) Test
Refining the product
Survey
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
Insights
With the survey results, I found 3 main user pain points that I definitely wanted to address with my CPR tool:
Quotes
Quotes
"Accidents happen more often thank you think. You can save lives with CPR."
"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)."
"It is difficult to simply refresh what has been practiced since the learning
resources are often bound (e.g., limited by time)."
Personas
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
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
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
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
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.movUsability Testing
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
Findings
1st usability study:
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:
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
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
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.
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.
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.
3. Added a "Review Quiz" when users reach the quiz results screen.
Visual System
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
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
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
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
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
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
Future Steps
What I learned:
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:
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:
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!
Thank you for reviewing my work
on the "HM" CPR tool!
Page updated
Google Sites
Report abuse