Ontario, Canada       paul@uncubeddesigns.com
PROJECT: My First Aid app & responsive website
ROLE: Branding, UX Design, UX Researcher
DURATION: Decemeber 2022 (2 weeks)

PROJECT VISION

My First Aid is a Toronto based organization focused on teaching people the basics of common life saving techniques as well as offering certificate programs for users who wish to become certified.

CHALLENGES

  1. Eliminate complex EMS tutorial
  2. Design a cohesive interface for familar and unfamiliar users
  3. Create a minimalistic UI while keeping tutorials as the focus
  4. Provide a seamless & linear user flow between platforms

Kickoff

Only 35% of civilians say they know how to react in an emergency situation before EMS arrive on the scene. The strategy for My First Aid is to offer tutorials on what to do before an ambulance arrives which could possibly save a life.

Our goal was to design an app for users who want to learn basic life saving techniques but don’t have time to take a formal class. As well as offer certification courses to those wanting a hands-on lesson by trained professionals.
What is the product and who is it for?
What do our primary users need most?
What is the primary device according to users?
What challenges could we face moving forward?
Who do we see as our biggest competitors?
What resources should we review to familiarize ourselves?
Usability research was conducted to determine how easy and informative this app is for users.

Unmoderated research was conducted where participants were given tasks to perform remotely and details their findings, thoughts, and processes. We assumed some aspects would be difficult and some would be easy. We were pleased with our results amongst participants.
first aid affinity map
Affinity Map

Meet the Users

Persona 1: Lattice
“I think it’s important for everyone to know basic life saving techniques”
Name: Lattice Bouche
Age: 24
Education: University Student
Hometown: Toronto
Family: 3 sisters, 2 parents
Occupation: P/T server

Goals
– Be prepared for emergency situations
– Having the knowledge last for my whole life
– Have an app on my phone to reference

Frustrations
– Not easy to find anywhere to learn CPR
– All CPR courses conflict with schedule

University student looking to find a course which can teach her the basics of CPR to be well prepared incase of future emergencies but can’t find a course that accommodates her schedule.
Persona 2: Leslie
“Having kids makes me worry I won’t know what to do if tragedy strikes”
Name: Leslie Ching
Age: 32
Education: U of T, MBA
Hometown: Toronto
Family: husband, 2 kids
Occupation: Program Manager

Goals
– Finding a website where I can learn CPR
– Being able to transfer my knowledge and teach my family the basics of CPR

Frustrations
– Can’t easily find online courses

A mother of 2, looking to find an online course where she can learn CPR and possibly get certified online. Cannot do classes due to being the only parent home during in-class sessions. Wants to be able to share her findings via link and lessons.

Competitive Audit

We looked at several direct and indirect competitors and this provided direction on gaps and opportunities to address with the My First Aid App.

The majority of the competitors had similar weaknesses in layout, design and accessibility. However some proved to have strong content but limited options available. These are the opportunities we’ve noticed.
  • Online tutorials
  • Offer certificate courses online
  • Provide shareable and printable assets

Preparing the Journey

We constructed a user flow of what a basic start to finish journey looks like while seeking a tutorial and registering for a course. This helps us in understanding ways users can interact with the app, as well as allowing us to see navigation through user goals.

Digital Wireframe

After ideating and drafting some paper wireframes, I created the initial designs for the My First Aid app. These designs focused on delivering personalized guidance to users to choose online tutorials.
To prepare for usability testing, I created a lo-fi prototype that connected user flow of viewing a tutorial as well as registering for a certification course.
View the Lo-Fi app here
first aid affinity map

Iterations

These were the main findings uncovered by the usability study:

  • People wanted a search function to easily find what tutorial they wanted
  • Participants wanted icons instead of images to represent categories
  • People wanted to have the use of the call function on mobile devices while in the app to call 9-1-1

Mockups 1

Based on the insights from the usability study, I applied design changes like a prominent search bar and large icons for each tutorial.

Mockups 2

Additional design changes were made. The certification courses went from a grid view to a map view to enhance user flow.

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the lo-fi prototype, including design changes made after the usability study.

View the Hi-Fi app here
first aid affinity map

Responsive Design

The designs for screen variation include mobile, tablet, and desktop. I optimized designs to fit specific user needs of each device and screen size.

first aid affinity map

Style Guide

Combining vivid colors to create My First Aid’s signature palette came from wanting to express to users just how friendly learning emergency services can be. The negative space allows a calm and spacious feel to the app which welcomes the user to click freely. AODA compliance with high contrast, labels for interactive elements and an initial focu on the home screen with personalized recommendations to help defind primary tasks for user actions.

First Aid style guide

Takeaways

Users shared that the app made learning seem like something they can actually do and help save a life while waiting for ambulance to arrive. One quote said “I finally feel like I am prepared to handle a situation to administer CPR if someone is in trouble.”

Even though the problem I was trying to solve was a big one with a lot of responsibility, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.

Next Step 01

Conduct research on how successful the app is in reaching the goal to easily learn CPR

Next Step 02

Add more educational resources for users to learn about life saving techniques

Next Step 03

Provide incentives and rewards to users for successfully learning certificate courses
Thank you for reviewing the My First Aid case study.
For more in-depth analysis you can view the process deck below.

Web UI / UX

We strive to create sites with that WOW factor, making them functional for you and your end users.

Print

Complete and comprehensive ability to print both digitally and offset for large sizes and quantities to small, customized runs.

Branding

Full range of services for creating a brand. Naming, logo design, corporate identity, full graphic design.

Contact Us

    What are you interested in:

    Logo

    Business Stationery

    Website

    Website Hosting

    Website Hosting

    Brief description of project (required)