Polished mockups of First-Aid app.
First-Aid app
An app designed to help people to train and test their knowledge on first-aid or emergency situations
Project overview
Everyone in their life has experienced a situation which more or less would have required a basic knowledge of First-aid or at least - a simple action plan. In this project I was trying to design solutions that will help users gain basic knowledge about first-aid and emergency situations.
The problem I faced was that most people tend to separate the training process (such as quizzes, or even practical courses) from real-life events.
I tried to research ways I could create an engaging way to practice first-aid and emergency situation knowledge, and how I can bring it closer to real-life situations.
With this project I learned that people wish to learn without learning 🤔. I created an experience where users won't feel like they are actually learning.
My role:
UX/UI designer leading the app and responsive website design from conception to delivery
October 2022 to February 2023
Adobe XD / Adobe Illustrator
- Conducting interviews
- Paper and digital wireframes
- Low and high-fidelity prototyping
- Conducting usability studies
- Accounting for accessibility
- Iterating on designs
- Determining information architecture
- Responsive design.
This project is a fictitious scenario, completed as part of Google UX Professional Certificate
Two paper wireframes, three digital wireframes, ad two high-fidelity mockups are showing the transformation of the First-Aid app
Understanding the user
I conducted user interviews to understand what are the main pain points when talking about first-aid and emergency situations. It all sorted out to two types of users.
A person with short hair is smiling. (Vector image)
"I guess I assumed that there always would be someone around"
Says Alfred

User type 1
They live in a safe part of the planet. Usually they do not trust themselves in such situations and get lost, because they are confident that professional help will arrive quickly.
A person with medium hair is smiling. (Vector image)
"In case of a fracture, take two tires and wrap them with a tourniquet. When you walk down the street, you don't have one! It is unclear how to replace all this stuff."
Says Alina

User type 2
They live in a country with war. They perceive any emergency situation as life or death situation and feel the need to know at least something about first-aid help. Usually they rely on themselves and believe that they could save lives knowing basics of first-aid.
Surveys and User Interviews
Users think and act differently depending on their environment
After surveys and user interviews I discovered that "how people act" depends on their environment, and the influences were:
- Location;
- Social situation in country;
- Previous experiences connected to first-aid or emergency situations;
- Previous education in first-aid or emergencies.
Synthesized Research Data, Low-Fidelity Wireframes
The app needs simple, fast, and straightforward user experience.
Ideating and drafting iterations of paper wireframes helped me to create initial digital designs for four screens:
"Techniques" screen where users can learn first-aid help;
"Quizzes" screen where users can practice their knowledge;
"Home" screen is where users can keep up with their personal results after quizzes and search for practical courses;
And "Help me" screen was created to help users to get help in possible emergency situation.
Usability Study, User Testing, and Prototype
Users are blocked and feel lost during first-aid and emergency situations. 
Conducting usability study revealed that users usually are frustrated during emergency events, but they still can perform simple actions, (such as find a glass of water, or give someone a piece of cloth), or they can follow an action plan.
Besides, users were concerned about the usefulness of such an app, that's why I decided to focus user flow on sporadic learning encouraged by push notifications.
I used a prototype created in Adobe XD to test all findings.
Users want information by portions and step-by-step instructions
User testing helped me to understand that users are not willing to learn every day, and don't see it useful. Users only would use such an app if something would happen, and there is no other way of providing help.
New user flow should keep users engaged to the learning process, and give information by portions.
For squares on a piece of paper hand written. First square- receive notifications push, second square - read/make test, third square - close the app, fourth square - wait a couple of days.
Affinity diagram, sitemap, high-fidelity prototype.
Refining the design
High-Fidelity Design and Prototype, Accessibility
Go straight to the point
During the usability study of low-fidelity prototype users felt overwhelmed by too much information, and most of them suggested that they would like to go straight to the point.
I used an affinity diagram to generate insights, and then applied changes such as simplifying the home screen, and then just left the most popular emergency situation topics.
Consider Accessibility
It was important to consider accessibility in this app to ensure simple structure, color contrast according to all the rules of WCAG, and legible typography.

"I think it is better to know something, than nothing at all."
Says Tanya
On the left - wireframe with highlighted section of "Techniques". On the right - polished mockup with "Techniques" screen.
O the left - polished mockup with notification. On the right - polished mockup of test question with three possible answers.
Connect the app to real-life first-aid or emergency situations
Users do not want to learn every day, and they will not! I decided to add push notifications as a sporadic element which will connect an app to real-life situations.
"If you complete quizzes and three months have gone by, how will you know if you remember everything?"
Says Arnold​​​​​​​
"Today we have access to lots of information on the internet, and most of the time we rely on it, but at the right moment we don´t know the necessary minimum."
Says Alina
First-Aid is an app designed to help people to train and test their knowledge on first-aid or emergency situations. 
I discovered how important it is to consider the location, social situation, and previous user experience and education related to first aid and emergency events. Due to this I wanted to create a simple educational experience for them.
In the future, this project could help users learn more about first aid through the app when they have no human assistance to help resolve the situation, so that they will be prepared.

You may also like

Back to Top