Google UX Design Professional Certificate: third exercise
The idea
What would you do if the person standing next to you at the bus stop suddenly lost consciousness? Would you know how to behave in such situation?
People don't know.
The emergency call is usually the first step. However, sometimes it is not professional help that saves lives, but help that comes first, at the right time, exactly in the minute when it is not too late.
First aid is not only about saving lives - it is also about providing support, ensuring mental comfort, sometimes the simplest wound dressing. Little gestures make a big difference.
My idea was to create an app that would guide the user step by step so that even an inexperienced person could help. The app will contain information on both supporting the life of the injured and instructions on how to deal with broken bones, panic attacks or burns.
Project overview​​​​​​​
The problem:
“The Red Cross says fewer than five percent of people in Australia are trained in first aid, one of the lowest rates in the world.”
(SBS news, 2017)
Research shows that people cannot provide first aid and do not know how to behave when someone needs help. Most often, it is simply due to lack of knowledge, and therefore stress, that instead of helping - we will do more harm. At the same time, the data suggest that even incorrect but immediate first aid increases person's survival chances by 80%*!
The goal:
Design an app that would be a first aid guide, both in emergency situations, such as a heart attack, or in non-life-threatening situations, such as a sprained ankle.
Project duration:
November - December 2021
My role:
+ UX researcher
+ UX designer
+ UI designer

I was responsible for the product from early concept to the final delivery.
Process
01 + Empathise
research, personas
02 + Define
problem statement
03 + Ideate
competitive audit, goal statement
04 +  Prototype
user flow, low-fidelity + high-fidelity prototype, design elements
05 + Test
usability study
01 + Empathise
Research:
I interviewed six participants, three women and three men, people aged 27-55. They all came from big cities (300k+). I wanted the group of participants to include active people exposed to injuries.
I asked them questions not only about the app, but also about first aid in general. Most of the participants replied that they do not always know what to do when someone needs help. They had no problem finding a solution for burns or twisted ankles, but bites or bleeding were more problematic.
All study participants stated that they would love to use an app with first aid instructions as long as it provides enough information in a clear manner.
Personas:
The group of participants is represented by two personas: Jack and Kristine. Jack needs an app to give him first aid tips whenever he's away from civilization. Kristine is looking for a website that will allow her to enroll her office employees in a first aid course.
02 + Define
Problem statement / Jack:

Jack is a person who enjoys camping and bushwalking, who needs a first aid app that will provide a first aid guidance and does not require internet access because he wants to know how to help his friends if they encounter an unforeseen accident while on a trip off-grid.
Problem statement / Kristine:

Kristine is a a responsible office manager who needs a website that offers first aid courses to enroll employees because she cares about the safety of office employees and wants them to learn how to give first aid.
03 + Ideate
Goal statement:
Create an app that will be a guide on first aid. The app should guide you through the first aid process, step by step. The application should contain all the most valuable tips for various injuries, such as bites and burns, as well as detailed instructions on how to proceed with the CPR process. The product should have a built-in button that would allow user to call for help from the application. The app should work without internet access.
Competitive audit:
An audit of several competitors showed that first aid apps exist, but I was unable to find any that present the information in a compressed form with the appropriate illustrations. The products I found were more of a self-study textbook. None of the apps were suitable for use in an emergency, when there is no time to read or jump between instructional videos. Moreover, none of the competitor's apps met the basic accessibility requirements.
There is a lot of room for improvement there.
04 + Prototype I
User flow:
Go through the first aid flow assuming that the person is unconscious and not breathing.
Digital wireframes:
The next step was to make wireframe sketches.

The most important elements in the wireframes were:
+ call for help button always visible
+ high transparency and visibility
+ large font size
+ easy access to the most important categories
05 + Test
Usability study:
Research questions:

+ Would users know how to search for specific categories?
+ What other information should the app contain? What other useful features should be included?
+ Are there parts of the user flow where users get stuck?
+ Would users use it in real life?
Participants:

+ six participants: three women, three men
+ 27-55 years old
+ live in big cities (300k +)
+ active people exposed to injuries
Methodology:

+ unmoderated usability studies; remote
Participants were asked to find a way to give first aid to a person who is unconscious and not breathing; the next task was to give first aid to a friend who sprained his ankle during a mountain trek. The participants were then asked to find a way to call for help using the app, and then to help the person stung by the wasp. The question of the greatest importance was the usefulness of the product in real life. Would participants use such an app? Why?
findings:

1. The CPR section is too complicated, it should be broken down into more detailed screens;
2. Users should be able to operate the app by voice, especially when both hands are busy providing first aid;
3. App navigation buttons should appear on each screen to allow users to navigate both forward and back to previous screens;
4. The app should also use voice commands so that the user does not have to read the instructions on the screen.
Iterating on design:
1.
Based on the results of the usability tests, the CPR section has been split into smaller, more detailed screens. Originally, all steps were contained on one screen - test participants had trouble reading and quickly following such detailed instructions.
2.
The next changes were to add the voice commands. It can be useful in situations where the helper has both hands full or, for various reasons, is unable to read the text on the screen. I added a button with which the user can turn on or off the voice guidance.

The "go back" (arrow left) button has also been added to allow users to easily navigate through application screens.
+ 04 + Prototype II
High-fidelity prototype:​​​​​​​
Mockups:​​​​​​​
Design elements:​​​​​​​
+ Website
Responsive website:
After completing the work on the app, I started designing the website. The website should provide users with information on first aid courses and also offer the option of registering for the course.
When designing, I had to take into account that the website should be responsive and work properly on all devices. The user should have the same experience using the desktop version as well as the mobile or tablet version.
desktop:
mobile:
tablet:

Conclusion

If the app existed in real life and if it could save at least one person’s life, I would consider it a success.
All usability studies users replied that they would be happy to install such an app on their mobile device - this shows that there is still room for non-profit apps whose purpose is simply to help.​​​​​​​
In the process of creating the app, I learned a lot about first aid. I realized that sometimes small gestures can make a big difference and even save someone's life. The research that I conducted during the design process resulted
in one more, less obvious conclusion - people want to help but too often they don’t know how! The very process of creating the first aid app allowed me to deepen my understanding of the accessibility issues and information delivery. This project required me to be "open-minded" and to look at difficult situations with an analytical eye.
The illustrations on the app screens are based on the video created by Royal Life Saving Society - Australia.
I used images from unsplash and mockups from freepik (user17882893).
Whenever in doubt about the colours accessibility, I used the colour contrast checker.

Spread love, help each other! :)​​​​​​​
↑Back to Top