Project Overview
First Aid Mobile App
The First Aid app and responsive website give information on first aid.
The Project:
First Aid provides information to anyone seeking more information about first aid. Whether they know it already and just want to relearn some things or for those that never used it before. First aid's primary target users include young students and adults who are concerned with needing more information about first aid to help reduce injuries.
Duration: 4 Weeks
The Problem: Many users want more knowledge about first aid and how to use it in case of an emergency.
The Goal: Design an app that will improve information on first aid and help people gain the knowledge to use it when needed.
Project Overview
My Role: UX designer leading the app and responsive website design from conception to delivery.
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.
Understanding the user
User Research: Summary
While I was in the process of making this website, I conducted numerous interviews to try and understand the users when it came to first aid. After my research, I found that users wanted resources to help aid them in the cause of a first aid issue that may happen. I used data on first aid to developing my interview questions, which were then used to conduct user interviews. Most interview participants reported they knew some form of first aid for example cleaning a small cut and applying a band-aid but some never used first aid before. The feedback I received from my research helped me mold my website into what it is now.
Personas
.png)
![Google UX Design Certificate - Persona [Dan].png](https://static.wixstatic.com/media/ed3196_139b97c9e00d4c4db8a26c4d8e391beb~mv2.png/v1/fill/w_60,h_34,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BDan%5D.png)
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Food Saver app. These designs focus on delivering personalized guidance to users to help manage their food.
Low Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an item about to expire and using it in a recipe.
Usability study: findings
I conducted two rounds of my Usability Study. The finds from the first round were conducted to help create the wireframes for the First Aid app and website. The findings from the second round helped create the high-fidelity prototype design and showed what needed to be fixed. These were the main findings uncovered by the usability study:
Round
1
●Users want more selections to choose from when clicking on bleeding section.
●Users found the blue background difficult to look at.
Round
2
●User found the new user flow easier to navigate.
●Users found had no option to go backwards
●Text too small on bleeding page.
Refining the design
Mockups
Based on the insights from the usability studies, I applied design changes like changing the buttons to have them cast a shadow below each button and I also went with making a logo for the app.
High Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, but there we design changes made after the usability study.
Accessibility considerations
1
Made sure to add photos to sections of first aid for those that may have a hard time read.
2
My focus was to make the website and app as simple to use for anyone in case of an emergency.
Responsive Design
Final Product
Click here to view the final prototype for mobile. Click
here to view the final prototype
for mobile. These are prototypes and not usable apps.