Framing the Project
The goal:
Clarify and update information relating to CPR for different ages, and present the user with tools to practice both in-person and virtually.
The product:
CPR Assist is an app designed to help people learn the basics of CPR for different age groups, and connect for in-person certifications.
Project duration:
June 2022 - 3 Weeks
Responsibilities:
User research, Wireframing, Prototyping, User testing
Understanding the User
-
All of UX design starts with the user in mind, using data-driven insights to create genuine value for Users
-
Personas help UX designers to better empathize with their users. These help to view user journeys in a new light and identify pain points.
-
Once a problem is identified, it must be clearly stated in a way that allows for multiple solutions
-
Generally the best way to build a project like this is to understand what is already available to people. Several apps with CPR as their main theme were assessed to understand what benefits the application would be able to offer people who use these. It was decided that because of the life or death nature of CPR, that preemptive education would be the most impactful and would fit best within the scope of the project.
User Research: Summary
To lay initial groundwork, we analyzed a number of other CPR training apps on the app store, as well as studying the most well-known first-aid group’s websites to see what was already available on the market and what types of scenarios they were used in. The well-known sites were fairly simple to navigate, and set the expectation that the information was simply educational with a goal of receiving a CPR certification in-person. However, most of the CPR dedicated applications were very poorly designed, with distracting graphics and flows that were broken.
Understanding that the best way to learn CPR directed the decision to make the application a “educational” one with ties to real world applications (Metronome and links to certification classes) rather than one that rewarded the user with some sort of certificate in-app or used tactile gimmicks to “prepare” the user for a real-life scenario.
Persona: Jacob
Goals:
Jacob wants to find an easy way to learn the basics of CPR for a class that he is taking. He also wants to know where to receive certification so that he can get a summer job lifeguarding at his local pool.
Frustrations:
Most of the available options of to learn CPR are limited in scope and not well designed. He would prefer having an application on his phone to watching a video so that he can refer back to the steps periodically and not have to search for the information.
Most applications available do not have a real-world counterpart. Ideally he would like to use something that he is already familiar with, but would settle for a reference to a reputable source as well.
Problem statement:
Josh is a proactive student who needs an application that will teach him the basics of CPR because he prides himself on being proactive.
Ideation
During this phase, we considered which features would be useful to the user in what scenario. Most situations fell into three categories: active field use, training, and passive pre-emergency education.
Note: these were not wireframes. At this phase of the design, it was important to figure out the “what” before the “how”. By taking time to figure out what features were the most valuable to users, execution of how they were implemented would be much easier.
Starting the Design
-
From the paper wireframes, I was able to select the ones that were the best and create a simple digital version. I referred to these wireframes in real-time on my laptop and phone to better understand what elements would need to be resized on mobile or desktop.
-
After the initial wireframes were made, I began to create connections and animations in Figma to simulate how the different screens would connect and create user flows.
-
Once the low-fidelity prototype was finished, I had several people try to complete various tasks and evaluate the ease of use. This allowed me to quickly identify problems and change them for the next iteration of the design.
Digital wireframes (V1)
After translating the hand-drawn wireframes to digital, a few changes were made to the UI to make interactive components better sizes. I went with a very simple design that focused mainly on three features: a metronome for in-field use / training purposes, an educational training program, and a link to real-world certifications and trainings based on location information.
Low fidelity prototype
In the first version of the application, the decision was made to work from the smallest screen size (phone) to larger ones as it would most likely be accessed on a mobile device. Certificates would be earned in-app and there would be no connections to in-person trainings.
Wireframes were created in and linked together in Figma to create a working prototype that would allow us to experience the application in real time and test it on volunteers to find potential problems and changes that would make it better.
Usability study: Findings
-
Users mentioned that the “certificate” does not have any real weight behind it. Very few places will accept certifications outside of the Red Cross or large companies.
-
In the metronome portion, there was no option to turn on/off rescue breathing, and there were no audio cues meaning the user would only be able to use it while watching. In a real scenario (or even training situations) having an audio cue would greatly improve the utility for people.
-
Text below the buttons for labeling was both too small and redundant because the title would be shown up at the top. Good icon choice means that the process would be much simpler, and the user would understand the context based on what appears on the screen.
Refining the Design
-
This step was more about experimenting with a variety of graphic styles as the Low / Mid fidelity prototypes were built with the HiFi in mind. The largest part of this phase was to find assets to fill out the spaces in the application.
-
After a style was decided upon, links were drawn in the software that connected all of the separate windows together. This made it so that we could do another round of informal testing.
-
Accessibility was a major focus while in the early steps of development, so at this stage, there were nearly no changes that needed to be made. UI elements were appropriately sized, and while language may have been an impediment to some people, the scope of the application made it so that a more effective solution was to rely heavily on graphics to convey information.
Mockups: Visual interface design
Mockups: Design changes
Some ideas had to be changed in execution from start to finish - for example the initial idea was to award the user a certificate after completing the training mode for each category. After testing, it became apparent that since the certification had no real-world credibility that it might actually create a false positive that the user was fully equipped to perform CPR. In the final version, I opted to switch so that the application would simply refer you to a qualified training in the real world.
While probably not the most practically useful feature of the application, the metronome needed to function as if it were being used in a real scenario. Indicators for rescue breathing and sound options were added to help increase the functionality.
Accessibility considerations
High contrast colors were used to promote easy text visibility. The application was also designed to be heavily graphics based so that language barriers could be overcome without the need to translate everything.
Hitboxes for buttons and links are sized appropriately according to accessibility standards to allow for easy tactile connections and navigation of the app.
Text was scaled up so that readability was improved for all users. Font choice was made also based on legibility and availability of options such as bolding and italics for emphasis.
Try it out!
Visit the link below to experience the mobile prototype:
Responsive design
-
Because the application is so simple, the organization of the information presented needs to be in a very simple, easily understandable format so that people can easily navigate from one portion of the app to another.
-
This application was designed to be a mobile-only experience (rather than a desktop application) due to its simplicity. However, the design needed to serve a large variety of phones and tablets which meant that the elements still needed to be robust in order to accommodate the array of devices.
Sitemap design
The hierarchy of information I decided to follow was to prioritize the educational aspect of the app first as opposed to having a “home” landing page. After that there are a series of independent flows that are connected together by the menu bar.
The application is meant to be used as a quick reference to the process of CPR rather than an all-encompassing CPR device. Because of this, the central focus was to make the training tab easy to go back to and find the information needed quickly. The metronome function had to be functional, but is unlikely to be used by a professional in a real-life situation. It does however provide an audible cue for someone who is learning about how fast it needs to be done, and when to do rescue breaths.
Responsive design
Because of the simplicity of the application, it was decided that we would pursue a mobile-only approach and design for both a standard phone size and a mobile tablet. Accessing the information on a computer would be much better served by a video or part of a larger health database.
Nearly all of the assets created in the process of designing the mobile version of the app were reusable in the tablet version and only needed slight adjustments. This was done to help users identify a consistent theme, and avoid creation of duplicate assets which is an unproductive use of development time.
Going forward
-
While the usefulness of this application is limited compared to in-person training, it still provides a valuable base of knowledge from reputable sources, as well as provides the resources to help users progress further if they desire.
First impressions from graphics can make or break the perceived legitimacy of an application and the knowledge it provides.
-
Ideally, I would like more cohesive graphics on the training portion, as well as animated gifs for some of the ones that would benefit from motion. The metronome function could also use a reworking on some of the timings, likely made in a different program for animations.
I would also love to develop out the portion of the application that would connect you with in-person training. Obviously that is beyond the scope of the current project, but is the most valuable experience that one can get related to CPR
Going further, I would love to see this be put into the real world. It would be a great introduction into the publication phase of UX design, as well as provide a viable alternative to applications that exist on the market today.