InstaAid - First aid learning app for young adults
The problem:
The problem is the lack of accessible and engaging resources for young adults to learn first aid. The existing resources may be outdated, unengaging, or not explicitly tailored to the needs and preferences of young adults.
The goal:
The goal is to bridge this gap by providing a user-friendly and interactive platform that offers comprehensive first-aid education in a format that resonates with young adults. By doing so, you are empowering young adults to acquire vital life-saving skills and build their confidence in responding to emergencies effectively.
Project duration:
February 2022 to March 2023.
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, and iterating on designs.
Understanding the user
-
User research
-
Personas
-
Problem statements
-
Competitive audit
User research: summary
I researched first-aid learning to develop interview questions, which were then used to conduct user interviews. Most interview participants reported interest and saw the importance of learning first aid. The feedback received through research made it very clear that users would be open and willing to learn first aid if they had access to an easy-to-use tool to help them.
Persona: Sarah
Problem Statement:
Sarah is a busy student who wants to learn first aid because she is verily interested in healthcare and likes to help others.
Persona: John
.jpg)
Problem Statement:
John is a busy young adult who wants to learn first aid because he wants to be prepared for any situation that can occur at any time and place.
Competitive audit
An audit of a few competitors’ products provided direction on gaps and opportunities to address with the InstaAid app.
Click to view the full competitive audit and audit report.
Starting the design
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the InstaAid app. These designs focused on creating an intuitive experience for the user.
Here I included the user's ability to track how frequently they are learning on the app to keep the user motivated and give the user that gamification feel to encourage engagement further.
1024_1.jpg)
Here is a section that displays the user's recent activity so users can continue their learning as quickly as possible as it is displayed on the home screen, and I would be one of the first things they will see.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing and learning a first aid course
Usability study: paramerters
Study type:
Unmoderated usability study
Participants:
5 participants
Location:
United Kingdom, remote
Participants:
5 participants
Usability study: findings
1
Colour and Image
User wants images or colour to further differentiate each of the courses
2
Course
Overview
user was unsure which course to choose and wanted a page to explain what the course is about and to maybe include reviews
3
Excercises
users wanted to practice what they have learned
Refining the design
-
Mockups
-
High-fidelity prototype
-
Accessibility
-
Responsive design
Mockups
I made a few changes since the low fidelity prototype such as having two tabs where users can check courses they have completed and course in progress.
Furthermore I have added different images for different courses to make the more easily identifiable to the user.
Before usability studies
After usability studies
.png)
Mockups
Based on the insights from the usability studies, I applied design changes like adding video transcript as an accessibility feature.
I also added a mark as completed button instead so users can let the app know when hey have completed a lesson that results in a tick along the left hand side so user know what lessons' they has completed.
Before usability studies
After usability studies
Key mockups
High-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing, learning and practicing a first-aid course.
View the InstaAid
Accessibility considerations
1
Responsive Design: Ensure that the app is responsive and adapts to different screen sizes
2
Clear and Readable Text: Use legible fonts, appropriate font sizes, and sufficient color contrast between text and background to enhance readability.
3
Captions and Transcripts: Include closed captions for videos and provide transcripts for audio content.
Responsive web design
The designs for screen size variation included mobile and desktop. I optimized the designs to fit the specific user needs of each device and screen size.
Mobile
Desktop
Going forward
-
Takeaways
-
Next Steps
Takeaways
Impact:
learning first aid equips young adults with practical life skills that can be valuable in various situations. users are happy with the flexibility to learn whether at home, in school, or in the community, they will have the knowledge and confidence to provide immediate assistance in emergency situations.
What I learned:
Through this project, I gained valuable insights into the process of solving complex problems. Despite the magnitude of the challenge at hand, I discovered that by carefully navigating each stage of the design process and prioritizing the needs of the users, I was able to develop practical and meaningful solutions.
Next steps
1
To develop the app further with more features, such as the forum page to allow users to share their experience and create a community
2
Research more ideas to allow users to practice first-aid even further.