User experience designer
Case Study:
App & Responsive Website for Learning How to Give The First Aid
This project was completed in a Google UX Certificate Course
Project Overview
The problem
Only 20% of Ukrainians know whom to give first aid to. This is a really low amount. According to several studies, if people knew how to give first aid, the percentage of accident survivors would increase.
The goal
Create an app that makes it easy for people to learn first aid so that they enjoy the learning process and explain that everyone can learn first aid.
My role
UX designer leading the app and responsive website design from conception to final look.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The product
First Aid is a cross-platform resource that helps people learn how to give first aid. This is something that everyone should know because we are not able to predict what can happen. The main target users of first aid are people at the age of 16 to 40 who know how important first aid is and who need to be sure that they can help others or themselves in any accidents.
Project duration
October 2021- November 2021
Understanding the user
I chose this topic for this project because I know how important it is to be able to help someone in an emergency or what not to do in such situations. From my secondary research, I find out that in general, only 40-50 percent know how to provide first aid. If you look in more detail, then in each country the percentages will be different: in Ukraine 25-30%, in the USA about 50%.
That is why the goal of this project is:
Create an app that makes it easy for people to learn first aid so that they enjoy the learning process and explain that everyone can learn first aid.
With that in mind, I moved on to another secondary study and started work on questions for the primary user research. I wanted to know how people can now learn first aid, and what type of learning process people prefer. As a result, I found some competitors (which will be presented at the audit of competitors) and a possible solution to how can I solve this problem differently.
Then I conducted 7 interviews with different people (age 18-60, different professions, hobbies, etc.) these were offline and online conversations, the duration was about 40-60 minutes.
During our conversations, I asked them:
-
If they know how to provide first aid?
-
Where did they learn this?
-
If they don't know, would they like to know?
-
How do they prefer to learn such a new subject?
-
What can prevent them from learning how to give first aid?
-
What do they think about online learning platforms (for example, for learning foreign languages)?
Persona & problem statement
I analyzed all the information I received from the researchers and created two persons who show this result. This helped me see the big picture better and find new things that can help me improve the user experience.
Surprisingly, many mothers look into the First Aid Information because their children often get injured. And they want to be able to help them before they go to the doctor or realize that certain situations are urgent and you need to go to the doctor.
There are also many young people who want to help others or be ready to emergency situation. They understand that such knowledge is useful and important.
The main problem in both situations is time! Because we all have a lot of things to do every day, so going to courses is inconvenient for many. Also in general the information about first aid is not clear and sometimes it is just a long instruction without any photos or videos. Also, when you urgently need information, you don't know where to find it, because all the information on the Internet is not structured, and if you are in a situation without the Internet, what should you do?
Alice
Alice is a busy adult and has a daughter who needs the opportunity to learn first aid easy and flexible because her daughter often has injuries or wounds.
Roman
Roman is a young student who likes to spend his free time activity and who needs an easy way to learn first aid because he wants to be ready for any emergency situations and be able to help.
Competitive Audit
Competitor audit is another great tool that helped me better understand the needs of users and what I can offer them. Thanks to this audit, I also found something that I can use in my design, and reading people's reviews, it was great to get feedback here and get more information from real users.
The main feature is that all these are applications, and the information in them is structured, but more like a good instruction or reference book. Only one application has the ability to test our knowledge.
The ability to gain knowledge in a format such as an application for learning languages is the main advantage of my application. Since users are accustomed to using such a structure and in a game format, it will seem that you will easily remember new information, and at any time you can check your knowledge.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on the solution that allows users to learn first aid easly and funny.
It is the funniest part of the design process for me because you can create here ANYTHING YOU WANT! And then you analyze your ideas and choose the best for users!
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the First aid app. These designs focused on finding needed first aid courses and topics and the learning process.
All courses are presented on the home screen
Easy access to app features from global navigation
Users can choose any topic they want to study in each category and study it in any order
Usability study
It's time to do some usability research to make sure I'm on the right track. It was a great experience that gave me a lot of information and feedback that helped me improve the product.
For testing, I prepared a low-fidelity prototype, which you can see here. I used a 5-participant unmoderated usability study because I wanted to test whether my idea of using the same structure as in a language learning app was correct. Because I thought such a structure is common and even for new users, it should be easy to use (at an intuitive level).
5 Participants
-
Participants are all people who visit the gallery and are interested in art
-
Two males, three females
-
The age of participants is from 18 to 60 years
Research questions
-
How long does it take for a user to find a course and complete it?
-
What can we learn from the user flow or the steps users take to find a course?
-
What can we learn from the user flow or the steps users take to learn topic?
-
Are there parts of the user flow where users get stuck?
-
Are there additional features that users would like to see in the app?
-
Do users find the app easy or difficult to use?
Methodology
-
25 of minutes
-
Ukraine, remote
-
Unmoderated usability study
-
Users were asked to find a course and complete it on a low-fidelity prototype
Key Performance Indicators (KPI)
-
Time on task
-
Conversion rates
-
Drop-off rates
-
System Usability Scale
1.Navigation
Some people were a little confused about navigation(problem with understanding icons on the bottom panel, text header placement ), this area should be improved.
2. Status "Learned"
People want to be able to mark the lesson “learned” because they want to identify which topics are passed.
Refining the design
Mockups
Additional design changes included adding an option to “Save in the collection” to the “Saved” page, and providing a clearer way to indicate the learning process status.
Based on usability research, I made design changes, such as redesigning the Home icon to Courses. And added the "Saved" category to the bottom panel. This will help users navigate the application quickly and easily.
Accessibility considerations
1. Screen readers
Clear labels for interactive elements that can be read by screen readers.
2. IA
The initial focus of the home screen on available courses help define the primary task or action for the user.
Refined designs
High-fidelity prototype
The high-fidelity prototype included the design changes made after the usability study.
View the First Aid high-fidelity prototype
Responsive Design
Since this was a project where I also needed to prepare the web version of the mobile app, I started this part after I finished the high fidelity prototype of the app.
First I created a sitemap and then I started working on the design of the responsive site.
I decided to start working on the mobile version first, because now people use their mobile phone more often than a laptop or computer.
Also, in this case, I wanted to create a design that loads quickly, doesn't use a lot of data, and is convenient for people to use through a web browser.
Sitemap
I used the First Aid sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.
Desktop
Mobile
Tablet
Mobile version
Tablet version
Desktop version
Going forward
Takeaways
Impact
Users reported that the app allows them to provide first aid in a simple and clear way.
One quote from colleagues' feedback reads: “I couldn't imagine that learning a subject as complex and important as first aid could be simple and clear.”
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helping me come up with solutions that were both feasible and useful.
Next steps
1. Research
Conduct research on how successful the app is in reaching the goal to educate to give the first aid.
2. Features
Add additional educational resources for users to learn about first aid (quiz)