PROJECT VISION
CHALLENGES
- Eliminate complex EMS tutorial
- Design a cohesive interface for familar and unfamiliar users
- Create a minimalistic UI while keeping tutorials as the focus
- Provide a seamless & linear user flow between platforms
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.
Meet the Users
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.
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.
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.
Iterations
These were the main findings uncovered by the usability study:
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.
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.
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.
