Case Study for a First-Aid Website & App
Case Study for a First-Aid Website & App
Embedded Files
A responsive website to help young professionals certify in First-Aid, “Teacher”.
With an associated app to guide you in an emergency to give First-Aid, “Assistant”.
A responsive website to help young professionals certify in First-Aid, “Teacher”.
With an associated app to guide you in an emergency to give First-Aid, “Assistant”.
April 2022 - July 2022
April 2022 - July 2022
Project Overview
Project Overview
The Problem:
The Problem:
Young professionals need a way to become certified in many aspects of first-aid. Young adults also need access to first-aid assistance in an emergency.
The Goal:
The Goal:
Design a way to teach young adults first-aid, and give them access to help in an emergency.
My Role:
My Role:
Lead UX Designer & UX Researcher
Responsibilities:
Responsibilities:
Interviewed potential users and experts, competitive audit study and report, user testing, wireframing and prototyping.
Understanding the User
Understanding the User
User Research: Summary
User Research: Summary
I received a little first-aid training in the military, but nothing since then. I began by interviewing people who need first-aid certifications and health care professionals. It surprised me to learn that since the pandemic, a lot of first-aid education could be online. Then I was able to conduct a competitive audit of various first-aid apps. I found users would appreciate having access to an app in an emergency to assist them with first-aid. They would also like to be able to earn certifications online.
User Research: Pain Points
User Research: Pain Points
Difficulty
Difficulty
In-person training is difficult to schedule for working professionals
Limited Access
Limited Access
Access to information in an emergency is not always available or easy to find.
Time Consuming
Time Consuming
Time is of the essence in an emergency, struggling through a long list is not efficient.
Boring
Boring
Learning can be a lot of reading and not very exciting. Training should be more interactive and include video tutorials.
Persona: Phyllis Coleman
Persona: Phyllis Coleman
Problem Statement:
Phyllis is a teacher who needs to become certified in various first-aid techniques because her school needs to have enough staff certified.
Persona: Maria Bautista
Persona: Maria Bautista
Problem Statement:
Maria is a babysitter who needs quick access to first-aid information because she would like to be able to handle a minor emergency without calling 911.
Competitive Audit
Competitive Audit
Many first-aid apps are not very easy or quick to access the information you need. I envision a way to sort the long list of first-aid and point you in the right direction by answering some basic yes or no questions.
Starting the Design
Starting the Design
Paper Wireframes
Paper Wireframes
Trying to brainstorm the user flow idea. Looking for the cleanest and simplest way to get to the quick help in an emergency.
Digital Wireframes
Digital Wireframes
Depending on your answers to the questions you will be directed to the appropriate first-aid assistance faster than looking through a list.
Users may be in an emergency or not, so the ability to jump to the full list of assistance must still be available.
Low-Fidelity Prototype
Low-Fidelity Prototype
If a user is in a bleeding emergency, it should take less time to find the help they need. Then they can learn first-aid on their own time.
Usability Study: Findings
Usability Study: Findings
Users were confused by the concept at first. But after an explanation, they were all encouraging that it made sense.
The Emergency was confusing as the home page, and needed to be moved to its own page. It also needed an explanation and a trigger before it started.
The steps in an emergency needed a description, and needed to be clickable to go back and forth in the process.
If you are opening the app because you are in an actual emergency, you are asked if you called 911. If you say “No”, the phone begins calling 911. If you say “Yes” you move forward in the flow.
Refining the Design
Refining the Design
Mockups
Mockups
The emergency steps have been moved only if you say you are in an emergency and you have already called 911. A new home page description has also been added.
Users felt the the emergency assistance sections should be broken apart. This made the the emergency assistance much cleaner and easier to find what you are looking for quickly.
Style Guide
Style Guide
Standards defined for use of colors, fonts, buttons and icons.
High-Fidelity Prototype Mobile App
High-Fidelity Prototype Mobile App
Users are able to walk through the steps in an emergency to quickly get to the help they need. They are also able to learn first-aid in their free time.
High-Fidelity Prototype Mobile Website
High-Fidelity Prototype Mobile Website
The App works as the Assistant, but the website works as the Teacher, allowing you to take the quiz and earn a certificate. With a secondary focus on Donations.
High-Fidelity Prototype Desktop Website
High-Fidelity Prototype Desktop Website
The Desktop version of the site is how most users would be accessing the online learning. It will also be the easiest and most efficient way.
Accessibility Considerations
Accessibility Considerations
1. Using a Mobile First design approach ensures that smaller older devices are still able to view the content as it was intended.
2. All font and colors have been tested and adjusted in accordance with international color and contrast standards.
3. Menu and Category Icons include text labels to increase usability for screen readers.
Going Forward
Going Forward
Takeaways
Takeaways
Impact:
Impact:
I think the flow concept I created would be very helpful as first-aid assistance in an actual emergency, and could really help a lot of people if it were implemented.
"Everyone responds to a crisis situation differently, and you may not know what to do. I think it's pretty easy and simple"
What I learned:
What I learned:
In all honesty, the Red Cross First-Aid App is done really well and has a lot of very helpful information available for free. I encourage anyone who is reading this to download it, check it out, and keep it installed in case of emergencies.
Next Steps
Next Steps
1. There needs to be more extensive testing for the “Steps in an Emergency” to be implemented correctly. Professional Paramedics would be ideal to work with to further develop the concept.
2. Need to build out all of the remaining pages not apart of the user flow.
3. Expand the Style Guide into a Design System to improve the hand-off to developers.
Let's Connect!
Let's Connect!
Thank you for your time reviewing my work.
Thank you for your time reviewing my work.
Are you interested in a similar User Experience or Interface Design?
Are you interested in a similar User Experience or Interface Design?
Contact me today for a free quote: ddehnert @ gmail
Contact me today for a free quote: ddehnert @ gmail
Page updated
Google Sites
Report abuse