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.

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.

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.