Time to start designing!


Once I assessed our user personas, I was able to begin brainstorming how different

users may navigate through the app using low-fidelity wireframes.

EmergingHealth

First-Aid guidance, in your pocket.

Where

Atlanta, GA

Mobile App

What

Portfolio Project

Why

Role

Designer, Researcher

Health & Fitness

Category

April 2024

When

Why I made this project

Why I made this project

I wanted to build an app that allows people of many different

backgrounds and lifestyles access to first-aid training and

information when they need it and make it convenient to learn.

I wanted to build an app that allows people of many different backgrounds and lifestyles access to first-aid training and information when they need it and make it convenient to learn.

Market Research

The claim

Given the significant number of emergencies requiring immediate first aid, the lack of widespread first aid knowledge, and the rapid proliferation of mobile technology, there is a clear and pressing need for a comprehensive first aid app. This app would empower individuals to provide timely and effective first aid, potentially saving lives and reducing the burden on emergency services.

Given the significant number of emergencies requiring immediate first aid, the lack of widespread first aid knowledge, and the rapid proliferation of mobile technology, there is a clear and pressing need for a comprehensive first aid app. This app would empower individuals to provide timely and effective first aid, potentially saving lives and reducing the burden on emergency services.

The problem

Many people lack quick access to reliable first aid information and often forget their training in high-stress situations. With delays in emergency service response times and fragmented resources, there is an urgent
need for an accessible, user-friendly app that offers accurate, real-time,
and personalized first aid guidance.

Many people lack quick access to reliable first aid information and often forget their training in high-stress situations. With delays in emergency service response times and fragmented resources, there is an urgent need for an accessible, user-friendly app that offers accurate, real-time, and personalized first aid guidance.

Many people lack quick access to reliable first aid information and often forget their training in high-stress situations. With delays in emergency service response times and fragmented resources, there is an urgent need for an accessible, user-friendly app that offers accurate, real-time, and personalized first aid guidance.

First Aid:

American Red Cross

First Aid -

Emergency App

iFirstAid

Competitive Analysis

Competitive Analysis

I analyzed the 3 most popular apps in the space and explored both - the depth
of content and negative reviews to find patters in which the product could find success in the market.

I analyzed the 3 most popular apps in the space and explored both - the depth of content and negative reviews to find patters in which the product could find success in the market.

Commons insights

Commons insights

The good:


These apps are able to give simple explanations about common First

Aid techniques in one collective place on the mobile devices of it’s users.

The good:


These apps are able to give simple explanations about common first-aid techniques in one collective place on the mobile dvices of it’s users.

The bad:


There are common insights in the reviews highlighting user frustration with one app lacking searchable aid.


Other users share poor experience with online connectivity in urgent situations and an absence of video learning for visual oriented learners.

The bad:


There are common insights in the reviews highlighting user frustration with one app lacking searchable aid.


Other users share poor experience with online connectivity in urgent situations and an absence of video learning for visual oriented learners.

“It’s helpful if you’re in a place where 911 can easily be called and help can arrive but... What happens if you’re camping in the wilderness or are far away from any hospitals...? Give us more knowledge.”

“It would be nice if there was a video about how to help someone that is choking.”

“Good luck quickly finding what you need in an urgent situation. You HAVE to scroll through categories and topics to find what you need. I want a search button that helps me find what I need ASAP.”

Who is this product for?

The following three personas represent just a few of our potential users and show how this product can help people of different lifestyles and backgrounds.

John Anderson

Outdoor Enthusiast

Goals

To be prepared in the event of an unexpected injury during any outdoor excursions

To gain access to first aid information quickly and easily

Frustrations

Most first aid apps don’t have the option for downloads

Poor connection to the app when limited on cell service

Age: 28

Location: Portland, Oregon

Background: John works in finance and is an avid hiker and camper who loves spending time in nature in his free time. He enjoys exploring remote trails and camping in the wilderness. He's passionate about and values all things related to the great outdoors.

Age: 28


Location: Portland, Oregon


Background: John works in finance and is an avid hiker and camper who loves spending time in nature in his free time. He enjoys exploring remote trails and camping in the wilderness. He's passionate about and values all things related to the great outdoors.

Age: 28


Location: Portland, Oregon


Background: John works in finance and is an avid hiker and camper who loves spending time in nature in his free time. He enjoys exploring remote trails and camping in the wilderness. He's passionate about and values all things related to the great outdoors.

Goals

To educate her employees on first aid in the workplace

To prioritize safety and prompt action in case of emergencies

Frustrations

Her workplace does not have any programs in place to educate staff on workplace safety and first aid

Finding credible training available to groups in the area

Maria Rodriguez

Office Manager

Age: 35


Location: Dallas, Texas


 Background: Maria works in a busy office environment where she was recently promoted. She oversees day-to-day operations and manages a small team of employees. She's proactive about workplace procedures and prefers having a plan for whatever may arise.

Sarah Johnson

Mother to a Newborn

Goals

To be prepared to administer first aid to her child in the even of an emergency

To learn more about potential risks in the household involving children that she may have otherwise not have known about

Frustrations

Has little time in her busy schedule at home to step away and learn first aid training

Most first aid apps focus on adults and have little information on children

Age: 32


Location: Atlanta, Georgia


Background: Sarah recently became a mother to a newborn baby girl. This is her first child. She spends most of her time keeping the home in order, caring for her baby at home and occasionally ventures out for errands.

Time to start designing!


Once I assessed our user personas, I was

able to begin brainstorming how different

users may navigate through the app using

low-fidelity wireframes.

User Flow

For this portion of the case study, I chose to highlight a simple but effectively useful task for one of our persona’s in particular.


Remember Sarah Johnson? She’s a mother to a newborn baby girl and she would like to learn more about how she can help her child in the event of a medical emergency.


She would like to watch videos (preferably) as she can pause and come back to the same spot, in case she gets pulled away.


She would also like the option of saving them, in the event she knows she’ll have to come back to it later when she has more free time.

Classes

Files

Search

Home

High-Fidelity UI Design

Once the initial flow was complete, I started by creating a couple of the main screens of the app. I started by defining the fonts and colors.

Color Palette

Primary

Blue

#01326B

Accent

Salmon

#F87777

Neutral

White

#F0F2EF

Text

Black

#161811

Font

Merriweather (Logo), Merriweather Sans

Regular, Bold, ExtraBold

Merriweather - AaBbCcDdEeFfGgHh

Merriweather Sans - AaBbCcDdEeFfGgHh

Components

After choosing the colors and fonts, I was able to create a few simple components to aid in navigation and visual hierarchy.

Primary Navigation (Bar)

Primary Navigation (Bar)

Classes

Files

Search

Home

The navigation bar was designed to be minimal and simplistic. The main

icons and text are the primary color for consistency in the overall design,

and the accent color was chosen to highlight where in the app the user

was if applicable to the main components of the navigation bar.

The navigation bar was designed to be minimal and simplistic. The main icons and text are the primary color

for consistency in the overall design and the accent color

was chosen to highlight where in the app the user was if applicable to the main components of the navigation bar.

Secondary Navigation (Top)

EmergingHealth

There are two main parts of the secondary navigation. The hamburger menu and the brand name / logo.

There are two main parts of the secondary navigation.

The hamburger menu and the brand name / logo.

A hamburger menu component was added to provide additional navigation options that provide helpful guidance in more specific navigation throughout

the app. The information included under the menu also serves as an avenue of showcasing what more the app can offer in its entirety.

A hamburger menu component was added to provide additional navigation options that provide helpful gui-

dance in more specific navigation throughout the app.

The information included under the menu also serves as

an avenue of showcasing what more the app can offer in

its entirety.

The logo is present at the top among all screens to simply let the users know what app they are in and provide brand visibility at all times.

The logo is present at the top among all screens to simply

let the users know what app they are in and provide brand visibility at all times.

UI Screens

These are some of the high-fidelity mock ups for the later stages of the project.

Usability

While constraints on this project were tight with limited resources, I was able present scrollable prototype screens to a few potential users from the previous social media survey listed earlier in this case study. Out of 18 participants, I chose

3 users who replied they didn’t feel confident in their ability to provide first aid to themselves or someone around them.

While constraints on this project were tight with limited resources, I was able present scrollable prototype screens to a few potential users from the previous social media survey listed earlier in this case study. Out of 18 participants, I chose 3 users who replied they didn’t feel confident in their ability to provide first aid to themselves or someone around them.

User Response

Prompt #1: How intuitive do you find the app's user interface?

User #3: "The user interface is very intuitive. The icons and labels are clear, and the navigation is straightforward. Even in a high-stress situation, I can easily find what I need without getting overwhelmed."

Prompt #2: How does the app's design contribute to your confidence in handling first aid situations?

User #1: "The design is clean and professional, which gives me confidence that the information is reliable. The color-coded sections help me quickly identify different types of first aid scenarios, and the app's overall layout makes it easy to follow the instructions without confusion."

Prompt #3: How does the app's educational content impact your preparedness for first aid situations?

User #2: "The educational content is a great addition. The articles and videos on common first aid procedures and preventative measures have really improved my knowledge. I feel much more prepared and confident in my ability to handle various first aid situations because of the detailed, easy-to-understand information provided."

Results

The users appeared to have confidence in the apps overall design and satisfied with the content and it’s detail. They found it easy to navigate and had little criticism for where the project is at in its current form.

Project Summary

During the project, I was able to evaluate the current app market and get in touch with potential users in order to gain insights into the people around me. With a deep sense of empathy and extroverted curiosity, I was able to put myself in the shoes of our user personas and create a product that speaks to their wants and needs.

Key Takeaway

In my UX journey, this project helped me see that empathy alone will only take you so far and that learning more is the key to a deeper insight into creating a product that is undeniably needed.


In this case, a significant amount of Americans do not know how to handle first aid situations. However, people are busy. People want to learn on the go and the market is incredibly slim. Not only that, but the market lacks personality and signs of life, in its current state. This app could add a quality to one’s life and potentially save one as well.

If you have any questions regarding to this project, feel free to contact me directly.

Thank you!