Case Study 3 | Instant CPR
Project Overview
More than 350,000 people suffer sudden cardiac arrest (SCA) outside of the hospital every year in the U.S. alone. This led to the conceptualization of an “instant hands-only CPR mobile- and web application” whose primary intention is to help support a reduction in fatal outcomes due to cardiac arrests by making vital information more accessible to the public and/or users that want to save lives. The mobile version is about giving the users direct access to vital information and a health professional on the spot and the primary function of the web version is to help educate and train.
CHALLENGE
Conducting a correct CPR to the right person, wether it’s an adult or an infant is crucial since it much depends on different techniques. The training material also requires a bit more (in some cases a lot) of time, needing the right (course) material, monitoring applications thats a part of the app.
GOAL
The app’s primary intention is to help supporting a reduction in fatal outcomes due to cardiac arrests by making vital information more accessible to the public.
It would also function as a (temporary) relief for 911 dispatchers due to heavy work loads or amount of incoming calls.
MY ROLE AND RESPONSIBILITIES
UX- and Visual Designer for the “Instant CPR app” from conception to delivery.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on low- and high-fidelity designs.
SUMMARY
My assumptions about an “instant hands-only CPR app” were that users in general highly appreciate educational instructions for the web version and “placed separately” for the mobile version. By this I mean where in the app the same information is to be found.
It was also understood that there is a clear, simple and emphasized need of an optimized process during a “live assistance/support call” through increased automation due to the overwhelming situation when trying to save someone’s life.
Pain Points
The initial position was to understand the need/s of an application like this and how to emphasize with the users while figuring out any obstacles that could violate a good user experience.
Accessibility
The importance of having quick access to not only one but more “online health professionals” in an emergency situation is key for a successful outcome.
Time
Time or Timing is essential for this app since the user needs to be able to quickly understand the content.
Simplicity
The applications for CPR (the ones I researched) are in general wordy and often offer many other “first-aid" related” courses.
Exploration/Discovery
PERSONAS
COMPETITIVE AUDIT
An audit of a few competitors services provided direction on gaps and opportunities to address with an application like the “Instant/Hands-Only CPR” app.
IDEATION
I used “the crazy eights” to come up with ideas for how to address the pain points that was established in the Define phase and gaps identified in the competitive audit. My focus was specifically on making sure that the user will get immediate access to the online/live certified health-care professionals. These were narrowed down to six where I eventually picked the one I thought best fit the purpose.
Design Process
DIGITAL WIREFRAMES (Mobile)
For the Dedicated Mobile app “Home/Dashboard screen” (below) as the other screens created I wanted to make sure I implemented as much as possible from feedback and findings from the user research, as well as my secondary research. The main goals early on, for the Mobile app, was to make sure there was a quick access of the certified health care professionals sketched out during the ideation.
LOW-FIDELITY PROTOTYPE
Using the completed set of digital wireframes, I created a low-fidelity prototype. I wanted to convey user tasks/flows that was relevant to the results from my user research and to be used further in any usability tests or iterative processes. One of the priorities here was to show the flow when user is connected to the health-care professional/s from whom the user will get immediate/live guidance and instructions.View the Instant/Hands-Only CPR app
View the Food Quiz app | Low-fidelity prototype
USABILITY STUDY | FINDINGS
I conducted two rounds of unmoderated usability studies with 5 participants in the US for a length of about 15-20 min.
Findings from the first study, using the low-fidelity prototype, helped guide the designs from wireframes to mockups and to focus on specific areas that needed a more user-friendly and better solutions.
The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
FINDINGS
Cancelling a call by “accident”
Some difficulties might occur for the CPR videos page due to lack of legibility
Carousel/image slider for “live healthcare professionals” could be confusing
Refining Designs
Early designs allowed for some customization, but after the usability studies, I added in more visual engaging elements and features to help facilitate or simplify the messaging. Getting rid of small text/fonts that added way much content in a live situation in particular.
MOCKUPS
My assumptions about an “instant hands-only CPR app” were that users in general highly appreciate educational instructions for the web version and “placed separately” for the mobile version. By this I mean where in the ap the same information is to be found.
It was also understood that there is a clear, simple and emphasized need of an optimized process during a “live assistance/support call” through increased automation due to the overwhelming situation when trying to save someone’s life.
MOCKUPS
The main purpose of the mobile app version is to as quickly a possible setup the user with a certified health professional (CHP). There weren’t many changes to the overall initial approach (low-fidelity version) since users quickly adopted the “sliding hero section” (think of Tinder for example) where only online and live CHP’s are showcased.
One part of a CHP’s responsibility (included in the certification) is to make sure you’ll be able to transport yourself to that emergency location and take over from the user if 911-personal hasn’t yet arrived.
HIGH-FIDELITY PROTOTYPE
The final high-fidelity prototype offers more ways to get to. the same destination (the heart icon and the “home icon” brings you back to the start/very first page. An “Accessibility menu” is also added on the first page in order to minimize eventual user elimination by lack of inclusive design.
The priority for the mobile app design and user experience was to optimize content and minimize clutter that could drive focus from the main point/s of saving lives in demanding and stressful situations.
View the Instant CPR app | High-fidelity prototype
Accessibility Considerations
Expand on inclusive design (add an accessibility menu) to embrace diversity and support users with disabilities. Improve/add search feature so users can conduct a “regular search” that could be filtered and sorted accordingly.
Make the users more aware of respective platform application and to make them use both. The mobile version is more of an extension, an important one, that give users a safety line/live backup at any time at any location, whether they have accomplished any real- or online training or not. However, the majority of “real” training occurs on or via the web version of the application and its important to make sure that is conveyed to the users.
Sitemap (Web)
Having finished up the mobile screens/version of the app the next step was to adjust that content to larger screens. Since the application I have worked on do have the same main goal, they also differ in some aspects. As previously mentioned the purpose of the web version is to educate people about (Hands-Only) CPR while the mobile version of the app is to function as an “emergency support”.
The menu or navigation here is more elaborated in the web version while its almost non-existent for the mobile version. Naturally the user would have more time sitting by a desktop/laptop and really learn about “Instant CPR” which requires more information conveyed differently.
The menu and navigation here is divided into categories based mainly on user research and secondary research through competitive analysis/audit.
RESPONSIVE DESIGNS | Web, Tablet & Mobile
The primary goal here was to keep content and visual elements as consistent as possible throughout the different devices and screen sizes to minimize iterations for responsive designs. Number of words were scaled down specifically for the mobile version but the font size scaled up due to its purpose of being used in emergency situations hence being primarily a life-saving application. The tablet and desktop versions contains more copy and are meant to function primarily as an educational application.
Conclusions
IMPACT
I believe an app that could both educate and serve as a “life-line” in emergency situations would be of great help to both individuals and communities.
By increasing awareness around heart- and life threatening complications and CPR, how some of them could be prevented but also saved from by an educated, caring and attentive user, much impact has already been done IMHO.
WHAT I HAVE LEARNED
The most important thing/s i have learned so far is the importance of collecting data/information (user ux-/secondary research studies, competition analysis etc.) at the beginning of the project and all along the road to make any iterative process/s as smooth and optimized as possible while minimizing any future changes. Added to that is the importance of getting a continuous flow of feedback both from users and team-members.
Next Steps…
Conduct a more comprehensive usability study, with more participants in more realistic settings.
Extend the app by implementing additional features such as training in- and mapping out closest AED (Automated External Defibrillator) due to location.
Promote the app through different social- and marketing media channels.