Design Process.
Emergency Equip
The project
In this project, I explored what it would look like to have a first aid learning app meant for young adults.
The Problem.
The majority of young adults have no medical training, so they often don’t understand the medical terminology that other first aid apps use.
Potential users also wanted the ability to learn the information they wanted on their own time.
My Role
Lead UX Designer
Timeframe
August 1, 2022- August 10, 2022
Responsibilities
User research, wireframing, user testing, high and low fidelity design, and prototyping
The Research.
At this project stage, I started creating user stories and journey maps. The goal at this stage is to empathize with the users and imagine how the personas would utilize the app I am designing and the first aid apps that are already available.
“Here I learned that it is useless to recreate an app that already exists. So the goal is to find what is missing from existing apps that would help the user.”
Findings.
The main thing I found while empathising with the users is that first aid learning apps are written with a large amount of medical terminology. This can be hard to understand and learn for someone with no medical background.
Because of this, I decided that Emergency Equip should not use any medical terminology, instead it should use plain english.
Wireframes.
With the research findings in mind, I started with paper Wireframes. I did multiple versions of each slide and chose the best elements of each. Once each digital element was identified I created digital wireframes of each slide.
“The fun begins when the design starts being brought to life. Wireframes are the first stage of this process.”
Low-Fidelity Prototype & Usability Research.
1
User Flow
Finding the start of the course was difficult for users.
2
Navigation
3
Users wanted a way to move forward and backward throughout the lesson.
Abruptness
Some users wanted a more polished ending to the class instead of the abrupt end screen.
Findings.
Using the low-fidelity prototype, a usability study needed to be conducted. 5 young adult users were selected for a moderated study.
Mockups.
This project consisted of a dedicated mobile app as well as a responsive website.
Mobile App.
Before finalizing the Mockups I addressed the findings of my User Research. I added larger buttons for the back arrows in the lessons as well as large continue & next buttons to navigate the site. This app shows what it would look like for someone who has already started a course and wishes to continue.
“At this stage I learned that the writing did not have to be technical, but understandable.”
Responsive Website.
Mobile.
As with many mobile sites scrolling will be a part of this one. I liked the idea of keeping the pages mainly to a single column. In user testing it was found that many users want to use the numbers at the top of the lesson to automatically scroll to the next part of the lesson.
After fully completing the mobile version I adapted it to create a tablet version of the website. On this size I decided to add carousels to condense the information on the larger screen size- taking a tiered approach rather than the single column.
Tablet.
“At this point I learned that using the progressive enhancement method helped me prioritize the important aspects of the design.”
Desktop.
This was the last size to create mockups for. Here I focused on trying to utilize all the space that the desktop size had to offer. Putting together this size was easier than the others because the layout was already established.
