ROLE
UX/UI Designer (Individual project)
DURATION
July 2021 - August 2021
OVERVIEW
AidFirst is a dedicated mobile app and responsive website that helps educate users on the various basics of first aid. It also allows people to quickly look-up various first aid situations and how to treat them.
THE PROBLEM
Most people don’t know the basics of first aid and what to do in a situation that calls for it
THE GOAL
Design a user experience to help people learn about first aid
THE SOLUTION
My main focus throughout this entire project was to make the flow of the entire user experience as easy and smooth as possible for the user. I didn’t want to overwhelm them with too much content since it could be a lot to take in to begin with. I started this project with the mindset of designing a dedicated app first. I figured that doing so made the most sense since users would be able to access this content without the need for an online connection and it would be readily available as an app whenever someone needed quick answers to certain first aid situations.
With that in mind, I had to start doing some research on the topic itself in order to understand how I want the overall layout to look and feel.
After some time, I finally designed my first set of digital wireframes for this project, which then turned into my lo-fi prototype.
Link to lo-fi dedicated mobile app prototype in Adobe XDAfter getting some feedback during user testing, I noticed that some users felt that there was too much information when getting to the last part of the basics page (“The DRSABCD Action Plan”). I decided to go back and do some research to try and condense the content into a more manageable and clear format.
I soon realized that some content in the DRSABCD Action Plan was already being covered in other pages.
The insights identified during the usability studies were:
BASICS PAGE
Users were a little confused about the structure of the "Basics" page
911 SPEED DIAL
Users would like to have easy access to dial 911 in case of emergency
NEARBY HOSPITALS
Users wanted to have an easy way of finding nearby hospitals
After my research, I ended up re-iterating on some of my digital wireframes, completely removing the DRSABCD Action Plan, and switching it to the ABCs of First Aid:
After all the iterations and feedback, I laid out the mapping of the app.
I then started working on my hi-fi mockups. I had such an amazing time working on this part of the project. I really wanted the app to be vibrant without being excessive. Keeping in mind that the main focus of the app was the content and providing information to users, I still wanted the app to be visually appealing to the user and easy to navigate.
From these mockups came my hi-fi prototype:
Link to hi-fi dedicated mobile app prototype in Adobe XDThroughout this project, I learned more about XD’s Auto-Animate feature and really want to utilize that to push the visiuals of the app.
Once my dedicated app was complete, I switched gears and started designing the responsive desktop and mobile website. I wanted the experience to be familiar to users across all platforms, so I only made some minor visual adjustments to the mobile version of the site and changed the layout to fit the desktop version a little better.
I also made sure that all content for the desktop version of the site was above-the-fold in order to minimize unnecessary scrolling and ensure that all the content is readily available to the user.
Link to hi-fi desktop website prototype in Adobe XD
Link to hi-fi mobile website prototype in Adobe XDTAKEAWAYS
IMPACT
People will be able to easily and quickly look-up first aid basics and get educated on first aid practices
WHAT I LEARNED
Other than learning more about first aid, I got to dive deep into XD’s world of Auto-Animate and learned a lot during the course of the project
NEXT STEPS
Create a tablet version of the dedicated app and responsive website.
Expand on the “Quick Help” section to provide more information for other types of situations
Back to projects
