Shayla Murray - CPR & Me UX/UI Project

Overview

CPR (cardiopulmonary resuscitation) is an important and crucial life saving procedure that can increase the chance of survival of out of hospital cardiac arrest victims. Unfortunately, only around 28% of people know and keep up to date with their CPR knowledge.

CPR & Me aims to change the way people learn and retain their knowledge of CPR from their homes, and aims to make the practice more accessible to many more people.

Role: Lead UX Designer, Illustrator, Researcher, Motion Graphics

Mission: To create an user experience that allows so many more people to have access to CPR, a potentially life saving procedure that can be done by anyone

Competitive Analysis

American Heart Association

The AHA had a solid website an app, each with their own distinct features. The app had motion graphics to go along with the courses. However, one of the things that would have made many turn away from this association was the pricing of CPR tools, starting at $45!

The app was really structured and clean, easy to navigate as well! The only issue is that there is too much going on, and can be overwhelming for individuals.

Pricing of the CPR kit is nearly $50!

National Safety Council

National Safety Council is mostly known for supplying large businesses or schools with safety equipment and classes, which is great if an individual works for a large company or is at a school that decides to purchase one of these lesson plans.

Like the AHA app, the National Safety Council app had a TON of information relating to CPR. However, there was only pictures for individuals to go off of to learn CPR. There was also too much information in some instances, which can be overwhelming.

NSC pricing is a bit more affordable than AHA, however, it is only available for purchase for businesses or schools. Individuals who are members also get a discounted rate, which might not be the situation for all individuals.

American Red Cross

Lastly, and probably the most wide known competitor for CPR & Me is the American Red Cross. Like the two previous companies, the ARC has a lot of information on its app. This can be very useful as much as it can be a hindrance, especially in an emergency where people need certain information right then and there instead of having to frantically look for the information. Again, the pricing for the classes is a little too steep for some to afford.

The app was one of the best looking ones of the competitors, with guides for CPR for trained and untrained individuals. Some of this information is hidden among SO much more information, which might be annoying in the case of an emergency.

$37 is a pretty fair price for classes, but what about the individuals that cannot afford even this? What would they do?

Personas

The personas below represent two of the problems people encounter when trying to learn CPR: they are often not accessible for many to learn, and the people that live in susceptible cardiac arrests areas are often too afraid to intervene, either for fear of hurting the individual more or the fear of facing legal consequences from the individual or their family.

Paul is a teacher who knows the importance of learning CPR, and how life saving this procedure is. He wants his family to learn CPR as well, but is having a difficult time finding a class accessible for his Spanish-speaking relatives.

Tracy lives with her mother, Alma. Tracy lives in an area where a lot of out of hospital cardiac arrests happen. However, Tracy is afraid to be away from her mother, Alma, for too long She's also nervous to learn CPR due to the controversy she's heard surrounding it in media.

Journey Maps

Paul wants to find a CPR class he can afford, but also allows his family to learn beside him as well.

Tracy wants to learn a CPR class from the comfort of her home, only having to go to classes for necessary steps as to not leave Alma home alone for extended periods of time.

Solutions

The solution for these issues is to create a CPR app/website in which many people can access. This program would be available in several languages to make it more accessible to people. By having this program downloaded, people would be able to go to classes that they can afford, allowing many more individuals to have access to potentially life saving information.

Paper Wireframes

The app was made in mind to be packed full of essential information without being too overwhelming. With this in mind, the paper wireframes for the app are designed to maintain the CPR & Me branding, while having only the most important information accessible to users first and foremost. A hot button was added for users to quickly call 911 in the case of an active emergency.

A facts page and a home page

Language page, class page and a profile page

A class sign up page, a steps page and an example steps page

Digital Wireframes

The ultimate challenge for this project was going to be creating motion graphics to go along with each lesson, which is what is shown below. These digital wireframes have the bare bones of CPR & Me, but start to maintain the branding for the App and the Website, finalizing colors, icons, font and structures that stick throughout the design process.

A CPR steps page, a facts/myths page and the home page

A language page (with the three most common languages spoken in the US listed), another CPR steps page that list them out individually, and a page listing the victim type page

A class sign up page, a class location page, and a profile page

Low-Fidelity Prototypes

Research Testing

Research was conducted at this point in the process to see what could be improved on, what could be added and what could be removed.

Many people were confused about the icons and what they meant on the bottom app bar. Other users wanted a donation page (which would explain how the app would allow people to take CPR classes for free), and a class sign up confirmation page with instructions to get to the class the user would sign up for.

Other things that were removed during this phase includes the amount of types of people to administer CPR to, since the only key difference between a lot of the victims was age, not the administration of CPR. (For instance, giving CPR to an elderly patient is the same as administering CPR to a teenager.)

Affinity diagram from research testing

High Fidelity Prototypes

The high fidelity prototypes finalizes some design choices for the CPR & Me branding. Motion Graphics were added at this point as well, which constantly play on a loop, showing users exactly what to do at different points during the CPR process. The selection for victims is narrowed down to Infants and Adults, since the procedure for giving infants CPR is slightly different than giving an adult CPR.

CPR step 3 for adults page, CPR myths and facts page and a profile page

Languages page, the selection page, and the steps page

Home page, a class sign up page and a class locator page

The 911 page, the class confirmation page and a donation page

A donation thank you page, which shows users how their contribution aids in helping more people learn CPR

Final (App)

The final version of the mobile version of CPR & Me is simple to navigate and understand, available in three separate languages and packed full of useful, life saving information that is accessible to so many individuals.

Navigation through the app

Donation simulation

Learning CPR for Adult victims simulation

Learning CPR for young children and infants simulation

Class sign up simulation

How users would change languages to best suit their individual needs simulation

Website Map

Much like the app, the desktop version of CPR & Me aimed to be chalked full of information without it being overwhelming to the user. The key difference between the desktop and the app version is the lack of the option to directly call 9-1-1. However, the information that is on the app is expanded upon in the desktop version, allowing users to learn a lot more about CPR.

Website map for CPR & Me

Final (Website)

The website contains everything the mobile version of CPR & Me contains. This information is expanded upon in most instances, such as the facts page and the home page. A QR code was also added for users to scan and download the mobile version of the app.

Home Page

QR Page

Donation Page

Learn CPR Page

Profile Page

Classes Page

CPR Facts and Myths Page

Simulation of navigating the CPR & Me website

Motion Graphics

Motion graphics were created in order to showcase users exactly what to do during each of the six steps of the CPR process.

Step one for CPR for Adults: Check on the victim

Step two for CPR for both Adults and infants: Call 9-1-1

Step three for CPR for Adults: lay victim down on a hard, flat surface, tilting their chin upwards

Step four for CPR for Adults: kneel beside victim, placing your knees at their shoulder and at their torso

Step five for CPR for Adults: place your hands in the middle of their chest, with your fingers linked as shown above

Step six for CPR for Adults: give chest compressions, firm and quickly, ensuring their chest moves with each compression

Step one for CPR for Infants and Young Children: Check on the victim (if the victim is a baby, check for breathing or other movement)

Step three for CPR for Infants and Young Children: lay victim down on a hard, flat surface

Step four for CPR for Infants and Young Children: kneel beside victim, placing your knees firmly beside their body

Step five for CPR for Infants or Young Children: place your fingers in the middle of their chest, with your fingers linked as shown above

Step six for CPR for Infants and Young Children: give chest compressions, firm and quickly, ensuring their chest moves with each compression (obviously being more careful than you would with an adult)

You may also like