Project Overview
CPR (Cardiopulmonary resuscitation) is life saving procedure that helps to save a person life during cardiac arrest, choking and breathing problems. LSP(Life saving procedure): CPR is a tool that helps adults learn how to perform CPR on a cardiac arrest victim in the event of a medical emergency.
Role
UX Researcher and UX Designer leading the app from conception to delivery.
Responsibilities
Conducting interviews, surveys, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
Globally, cardiac arrest claims more lives than influenza, pneumonia, auto accidents, HIV, firearms, and house fires combined. Among India's population, less than 3% people are aware about CPR and the steps to conduct it shown by a survey conducted. This is most crucial and basic procedure to save a life. The chances of survival of a cardiac arrest patient increase to double to triple if cardiopulmonary resuscitation (CPR) is performed on a person immediately.
According to the findings, people lack basic knowledge and understanding about CPR. People are unaware about how 5-6 minutes are very crucial after a person suffers and giving CPR can actually save a person from cardiac arrest. The challenge was to come up with a solution that makes people understand how important it is and make it easy for them to learn about CPR.
The goal was to design an app that educate and motivate adults in easy-to-understand manner about CPR and how to perform it during an emergency. An app that allows quick and easy way to learn about CPR by providing video demonstrations, safety tips, and more while motivating users by rewarding them.
Design Process
Empathize
In the first phase of design process, I empathetically understood the problem that needs to be solved by observing user's experiences and behavior by conducting interviews, surveys, and competitive analyses to discover users' goals, needs and pain points.
Before starting with the challenge, it was crucial to learn about the target audience and their needs which would be helpful to find a ideal solution.
Qualitative Research
Prepared interview questions, which were then used to conduct user interviews to understand the challenges they faced. I conducted user interviews in which participants were asked few open-ended questions in order to determine the user needs and pain points. I interviewed participants who have little to no knowledge about CPR and doctors.
Most of the participants know what is CPR but are not confident about how to perform in an emergency due to lack of proper knowledge. Participants want an easy and less-complicated way to learn about CPR.
The feedback received through research made it clear that users are willing to learn and help the victims in their surrounding if they have access to easy-to-understand tool to guide them.
Interview Questions:
Are you familiar with initial symptoms for sudden cardiac arrest?
What would you do to help a cardiac arrest victim in an event of emergency?
What do you know about CPR?
Do you ever had CPR training or certification?
Have you ever performed CPR during an event of emergency?
What was your experience using online apps like American Heart Association, Indian Heart Association to get information about CPR?
Key Findings
for someone who isn't tech-savvy, using an online app or website has been difficult to use due to abundance of content, misleading ads, medical terminology and complex navigation flow.
users find it difficult to manage seeking information about how to perform CPR when required and calling for an ambulance at the same time.
it is difficult for the users to get information when there is no internet connectivity.
users wish to get all CPR instructions in the language of their desired choice.
users want an easy and error-free experience while using the app.
Quantitative Research
I conducted an online survey using Google Forms to look for patterns and similarities in the possible needs of the users. I received responses from a total of 19 people including those with little knowledge, those who have knowledge but never performed and doctors.
Key Findings
According to the survey conducted,
89.5% participants agreed there is need for an app that helps you learn and also, assist you at time of emergency.
68.4% participants are familiar with the term CPR but about 57.9% participants are still unaware about the steps involved or how to conduct it.
89.5% participants are interested in using an app to call an ambulance and receive emergency assistance from a nearby CPR certified person or doctor.
Competitive Audit
Comparing the user experience and features of each of the competitors' app:
Medicode app
Indian Heart Association Society
American Heart Association
Define
The next phase in the design process is to define. It involves combining and analyzing the information I gathered throughout the empathize phase by conducting research, to define the main problem that needs to be solved.
Persona
After the user research, I created personas to keep my focus on who my users are and to better understand their goals and frustration areas.
Problem Statement:
How might we design an app that is quick, simple, and effective for users to use in an emergency?
Ideate
Now that I am aware of the goals and needs of the users, it's the time to come up with creative solutions to the defined problem, by creating information architecture, user flows, wireframes, and design mock-ups.
Crazy Eight
I sketched few designs based on my ideas on how can I solve user problems and make it easy for them to use and navigate through the website. The main focus was on how to make it easy-to-use and less-cluttered during emergency for the who isn't tech-savvy.
Userflow
After the crazy eight exercise, I proceeded to create a simple user flow. This describes how the user can take to complete the main flow. Creating this flow allowed me to think more on user's perspective and different options the user has while using the app.
Sitemaps
Before starting with wireframing, the main purpose to create the sitemap was to improve the overall navigation for the users and also keeping track of all screens that is to be included in the design.
Sketches, Wireframes, Design mockups
With an idea of all screens that is to be included in the design, I started sketching paper wireframes and iterated a few sketches for each screen.
I used the paper wireframes I had previously developed to guide my digital wireframe creation in Figma.
Home
Select demographic
Steps to perform CPR
Video demostration
I started with design mockups for the same digital wireframes I created earlier using design elements. Design mockups give a good idea of how the final product will appear, including all of the colors, typography, icons, images, and illustrations. Mockups also show how appealing the final product will be, while yet keeping it user-friendly and easy to understand.
Prototype
In the next phase in the design process is to make a clickable prototype to test with users in order to determine whether or not the solution is effective and usable for them.
The clickable prototype: Prototype
Test
In the final phase, the focus is on testing the prototype with the users by conducting usability testing to gather feedback and pinpoint any challenges, difficulties users have encountered.
Usability testing
I conducted unmoderated usability study using the high-fidelity prototype. The usability test was conducted to determine whether the design solves user needs and pain points that were identified during the research phase. Each participant has to complete the task and by reviewing the feedback I received, I can identify the major takeaways.
Parameters
Study type: Unmoderated usability study
Location: India, remote
Participants: 5 participants
Length: 20-25 minutes
Key Findings
users need a quick and easy way to recall about CPR during emergency.
users found that the homepage was crowded with a lot of unnecessary information.
there is need of a timer so that user can immediately see the time as you go through the steps.
users have trouble choosing a demographic from a drop-down menu in an emergency.
there must be an option for users to directly contact an ambulance from the app.
users would love receiving incentives/rewards for passing the quiz that would advance their knowledge.
Final Design Mockups
High-fidelity prototype
Based on the user feedback I gathered throughout the usability testing, I made changes to the design mockups and prototype.
Clickable Prototype: High Fidelity Prototype
Accessibility considerations
According to WCAG guidelines,
1.1.1 Non-Text Content:
Provided access to users who are vision impaired through adding alt text to images for screen readers that serves the equivalent purpose.
1.3.2 Meaningful Sequence:
The order in which sentences and paragraphs are presented by the app preserves continuity and does not change the meaning of the content.
2.4.1 Bypass Blocks
Providing links to each section making it is easy for the users to navigate through the app and can bypass blocks of content that are repeated on multiple pages.
Color
Colors used in the app were to convey information, call attention to an action, or ask for a response. Colors were chosen keeping in mind to avoid color blindness and maintain the color contrast ratio.
What I learned
Despite the fact that the problem I was attempting to solve was large, I discovered that following each phase of the design process and aligning with specific user needs helped me come up with solutions that were both realistic and useful.
I learnt that users come first. I discovered that other people's perspectives on using the product can differ from your own. Many times, the idea you are attempting to convey can be unclear to many users because their approach or the way they use the product are different. Therefore, conducting further usability research helped me to better understand the users, allowing me to iterate my designs while taking these factors into account.
Despite the fact that I designed a product to solve the given problem statement, there may still be opportunities and ways to enhance the user experience with fresh technology developments.
Next steps
Conduct a research on how successful the app has been in achieving users’ needs.
Providing a feature that will let the user know about a cardiac arrest victim in their nearby location. Thereby, the user can assist them by performing the steps of CPR.
Rewards for the user after completing the steps to perform CPR. Rewards for trained user who has performed CPR on a victim during emergency.
Added the feature that will let certified user know about the cardiac arrest victim in nearby location. On accepting the request, certified user can locate and help the victim.
