First Aid Alert App & Responsive Website

Project Overview

 

The product:

I designed an app and responsive website to help anyone who might want to take certified first aid courses on the go or at home.

Project duration:

October 2021

The problem:

Certified First Aid courses are easy to come by but most of them aren’t free and they need an internet connection to complete. This makes it difficult for people who are busy or don’t have access to an internet connection to learn how to save lives.

The goal:

To make it possible for users to learn First Aid techniques and even get certified while on-the-go, whether it be during a commute on the train or in the space between shifts at work, they can learn and help protect their community.

My role:

UX Designer

Responsibilities:

User research, market research, wireframing, prototyping, and running usability studies.

 

Understanding the User

 

User research: Summary

I interviewed five potential users; one non-binary, two male-identifying, and two female-identifying from the ages of 25 - 75. I found that most users had participated in online courses before but that they found them difficult compared to in-person learning. And many of them would see the value in an online course if they could learn it without an internet connection while they were commuting or away from home.

 

Persona: Evelyne Johnson

Problem statement:

Evelyne Johnson is an elementary school teacher who needs to learn first aid for children and babies because she wants to be able to keep her students safe.

Persona: Noah Lapierre

Problem statement:

Noah Lapierre is a restaurant worker who needs to learn first aid for adults, children and babies during their commute because they want to help customers and coworkers if they get hurt at the restaurant.

 

Competitive audit

I researched some competitors in the first aid course space such as the American Red Cross, SaveaLife by NHCPS, National CPR Foundation, and First Aid for Free. SaveaLife was an indirect competitor while the rest were direct. Each one provided first aid courses online, but only one had free courses for certification and none of them provided certified courses without an internet connection.

 

Ideation

I conducted a Crazy Eights exercise to think up some ideas for the mobile app first. I wanted it to allow users to learn on-the-go. So I realized it needed embedded videos for the courses and clear course pages.

 

Starting the Design

 

Digital wireframes

I wanted to make sure the app could be used on-the-go and during an emergency. So I made sure to label the courses under life-threatening or non life threatening categories.

 

Low-fidelity prototype

App: Link

 

Usability study: parameters

Study type:

Moderated usability study

Participants:

5 participants

Location:

USA, remote

Length:

10-15 minutes

 

Usability study: findings

Many participants found it difficult to navigate to the quiz page and the home page, and most wanted a way to listen to the courses.

Getting to Quiz page

Most users had difficulty moving on to the Quiz page from the Course page

Getting to Home page

Many users had difficulty getting back to the home page from the Certificate page.

Audio functionality

Users wanted a way to listen to first aid courses on-the-go.

 

Refining the Design

 

Mockups

Because users wanted the ability to listen to the courses on-the-go, I added audio functionality. And because users had difficulty getting back to the home page, I changed the “Learn” label under the home icon to “Home”.

Because users found it difficult to move on to the quiz page from the course page, I added a “Quiz” label to the forward arrow icon in the footer.

 

High-fidelity prototype

App: Link

 

Accessibility considerations

I added audio-reading functionality for people with impaired sight and those who are on-the-go.

I made sure information on the page was high-contrast to help people with impaired sight read it more easily.

I created videos on each course page for those who have difficulty reading.

 

Responsive Design

 

Sitemap

My goals to the site were to make sure that there were more in-depth courses for certification for healthcare professionals and those who want to learn from home, but I wanted to keep the flow as simple and clean as on the app.

 

Responsive designs

I followed the progressive design process from the mobile sized site to the desktop site, making sure that the font increased in size as well as other assets.

Prototypes

Mobile

Tablet

Desktop

 

Going Forward

Takeaways

Impact:

This app and responsive website would help people learn first-aid techniques at home and on the go and even give healthcare professionals the ability to get certified. My hope is that it would help more people gain the power to help others in their community in an emergency.

What I learned:

Online courses can be difficult for many users to navigate and getting certificates online is often a frustrating process. People with little time on their hands or access to the internet need more support to learn between their daily tasks. This app seeks to fill in that gap.

Next steps

I’d like to conduct another usability study with more than 8 people to make sure that the app works well for the widest range of people, including some healthcare workers.

I would show this to more designer peers to get feedback about making the design more fresh and still simple.


 Let’s Connect!

Thank you for your time reviewing my work on the First Aid Alert app and responsive website!

If you’d like to see more or get in touch, my contact information is provided below.

Email: jeanniestivers7@gmail.com

Contact me