Ana M. Penaranda Logo

Home

About

Portfolio

Blog

Contact

Ana M. Penaranda Logo

Home

About

Portfolio

Blog

Contact

Ana M. Penaranda Logo
CPR+ Banner displaying the look of the app

Process

Overview

Problems

The Goal

Role

The User

Personas

Competitive Audit

Ideation

Starting the design

Low-Fidelity

Usability Study

Refining the Design

High-fidelity

App Design

Accessibility

Responsive Design

Sitemap

Website Design

Takeaways

Lessons Learned

Next Steps

CPR+ Learning Saves Lives Logo

Overview

Help people learn CPR

CPR+ is a dynamic platform that encompasses a mobile app and a website aimed at educating users on the proper techniques of CPR. 

CPR+ is a dynamic platform that encompasses a mobile app and a website aimed at educating users on the proper techniques of CPR. 

The website provides an in-depth training tool, providing users with certification options for different CPR situations.

The website provides an in-depth training tool, providing users with certification options for different CPR situations.

The mobile app is designed to aid in emergencies by giving users real-time, step-by-step instructions on performing CPR.

The mobile app is designed to aid in emergencies by giving users real-time, step-by-step instructions on performing CPR.

Image of a person's hand holding a phone and using CPR+ app
Image of a person's hand holding a phone and using CPR+ app

🗓  Project Duration

August TO October 2022

Problems

🫀

Problem 1

Despite being a potentially life-saving skill, a significant number of people lack CPR knowledge and proficiency, which can lead to insecurity and hesitation in emergencies where their help is required.

Despite being a potentially life-saving skill, a significant number of people lack CPR knowledge and proficiency, which can lead to insecurity and hesitation in emergencies where their help is required.

👨🏽‍🏫

Problem 2

Some people are unable to acquire CPR certification due to the requirement for in-person classes, hindering their ability to learn and remember emergency procedures.

Some people are unable to acquire CPR certification due to the requirement for in-person classes, hindering their ability to learn and remember emergency procedures.

The Goal

Develop an app that addresses the problem of insecurity and lack of proficiency in CPR during emergencies by providing portable guidance and support for CPR correctly.

Develop an app that addresses the problem of insecurity and lack of proficiency in CPR during emergencies by providing portable guidance and support for CPR correctly.

Additionally, creating an online platform that enables at-home study and on-the-go learning would greatly benefit users.

Additionally, creating an online platform that enables at-home study and on-the-go learning would greatly benefit users.

Role

👩🏻‍💻

UX/UI Designer

Led the design process from the initial research phase to the final delivery.

📝

Responsibilities

  • Conducted user research to understand the needs and pain points of the target audience

  • Defined user personas and scenarios

  • Created low-fidelity wireframes, high-fidelity mockups, and interactive prototypes to visualize the user interface and user flow

  • Defined and organized the information architecture, creating an intuitive and easy-to-navigate structure for the users

  • Ensured accessibility and responsiveness of the app, including design for different devices and screen sizes

The User

Gif of User Personas
Gif of User Personas
Gif of User Personas

Summary

I gathered information about my users through interviews and created empathy maps to understand their needs, wants, and pain points.

Summary

I gathered information about my users through interviews and created empathy maps to understand their needs, wants, and pain points.

Empathy Map Image, User Says, User Thinks, User, Does, User Feels
Empathy Map Image, User Says, User Thinks, User, Does, User Feels
Empathy Map Image, User Says, User Thinks, User, Does, User Feels

The primary demographic identified are individuals who have previously received CPR training or certification but have since forgotten specific procedures and require assistance refreshing the steps in the event of a real emergency.

The primary demographic identified are individuals who have previously received CPR training or certification but have since forgotten specific procedures and require assistance refreshing the steps in the event of a real emergency.

A secondary target audience identified is individuals who cannot attend in-person training or certification courses. These individuals prefer a self-paced learning platform that allows them to study independently and engage in interactive learning experiences that include various media styles to help them retain and recall CPR procedures when necessary.

A secondary target audience identified is individuals who cannot attend in-person training or certification courses. These individuals prefer a self-paced learning platform that allows them to study independently and engage in interactive learning experiences that include various media styles to help them retain and recall CPR procedures when necessary.

Personas

👨🏽‍🦳

Persona 1
 Juan Martinez

Age: 68

Education: Ph.D. in Music

Hometown: Los Angeles, CA

Family: Married

Occupation: Professor

“My desire to help is always strong, but I feel uneasy performing CPR in an emergency when I don't remember all the steps.”

Problem Statement

John, a full-time music professor, requires a refresher on CPR procedures as he needs to be prepared for any emergency at home and in the workplace.

🏋🏽

Goals

• Refresh the memory of the steps for performing CPR

• Provide guided steps with possible audio assistance to explain each step clearly

• Distinguish the appropriate steps to take when performing CPR on babies, children, or adults

🤦🏽‍♂️

Frustrations

• Possesses CPR certification but lacks regular practice leading to difficulty in recalling the process

• In emergencies, previously attempted to use other resources but failed to find a satisfactory application.

👩🏻‍🦱

Persona 2
Nancy Michaels

Age: 26

Education: M.A. in Marketing

Hometown: Cordoba, Argentina

Family: Single

Occupation: Cosmetic Company

“Would love a platform to study at home and, if needed, continue learning while commuting to work.” 

Problem Statement

Nancy, a full-time worker, wishes to learn CPR but cannot spare time to obtain certification due to her busy schedule. Nevertheless, she is willing to practice from home and continue learning on the go as needed.

🏋🏻‍♀️

Goals

• Busy schedule requires an online learning option to study CPR on own schedule

• Convenient to study from home and continue learning during the commute

• Portable tool on the phone desired as a precautionary measure for emergency CPR performance

🤦🏻‍♀️

Frustrations

• Limited time prevents obtaining CPR certification

• Fear and uncertainty about emergencies

• Seeking a single platform that offers certification or alternative learning options to save lives


Competitive Audit

Competitive
Audit

Competitive
Audit

I performed a competitive analysis of various mobile apps in the same category, focusing on their navigation, layout, and overall design. Additionally, I evaluated the ease of use and effectiveness of each app's features and functionality.

I performed a competitive analysis of various mobile apps in the same category, focusing on their navigation, layout, and overall design. Additionally, I evaluated the ease of use and effectiveness of each app's features and functionality.

CPR & First AID App Logo

CPR & First AID

It is a comprehensive training tool that provides users with the knowledge to handle various CPR scenarios. However, one limitation of the app is that users must register and log in to access the material. This may not be ideal in an emergency where quick access to information is crucial.

It is a comprehensive training tool that provides users with the knowledge to handle various CPR scenarios. However, one limitation of the app is that users must register and log in to access the material. This may not be ideal in an emergency where quick access to information is crucial.

The CPR learning module is designed to be interactive, featuring illustrations that engage the user. The illustrations are beneficial as they provide a visual guide to understanding CPR procedures. Navigation is straightforward. The app offers a variety of written content and videos with transcriptions to cater to different learning styles. However, the content can be lengthy, and there is no audio narration.

The CPR learning module is designed to be interactive, featuring illustrations that engage the user. The illustrations are beneficial as they provide a visual guide to understanding CPR procedures. Navigation is straightforward. The app offers a variety of written content and videos with transcriptions to cater to different learning styles. However, the content can be lengthy, and there is no audio narration.

Additionally, some users may find the buttons and fonts small. The overall design of the interface is simple but with a lot of content that can be overwhelming for some users.

Additionally, some users may find the buttons and fonts small. The overall design of the interface is simple but with a lot of content that can be overwhelming for some users.

CPR & First AID App Logo

PocketCPR

It is an Apple Watch app that provides users with quick tutorials on the basics of Hands-Only and Traditional CPR methods. The app's interface is simple making it easy to navigate on a watch.

Users can swipe through the app to get a glimpse of the main things to do in an emergency. One of the app's standout features is the timer function, which helps users calculate the frequency of chest compressions. The watch also vibrates, providing an additional visual and haptic cue.

However, the app lacks visuals, and the text can be small for some people. Audio enhancements such as narration would be a great feature to include. The app also includes a link to resources, but users still have to open their mobile device to access them as it is only available on the watch. PocketCPR can be an excellent resource for a quick reminder of the steps needed during a CPR emergency.

It is an Apple Watch app that provides users with quick tutorials on the basics of Hands-Only and Traditional CPR methods. The app's interface is simple making it easy to navigate on a watch.

Users can swipe through the app to get a glimpse of the main things to do in an emergency. One of the app's standout features is the timer function, which helps users calculate the frequency of chest compressions. The watch also vibrates, providing an additional visual and haptic cue.

However, the app lacks visuals, and the text can be small for some people. Audio enhancements such as narration would be a great feature to include. The app also includes a link to resources, but users still have to open their mobile device to access them as it is only available on the watch. PocketCPR can be an excellent resource for a quick reminder of the steps needed during a CPR emergency.

CPR & First AID App Logo

CPR Tempo

The app is specifically designed to aid users in maintaining the correct tempo for chest compressions during CPR. It is user-friendly and easy to use, with a simple button to start the timer.

The app provides an audible beat count, as well as an illustration of a heart, to help users visually keep track of the tempo. These features make the app accessible to a wide range of users. The app also includes a tutorial on using a defibrillator and maintaining the proper rhythm during CPR.

However, it does not provide additional illustrations or videos on performing CPR or any information on what to do in the initial stages of a CPR emergency.

The app is specifically designed to aid users in maintaining the correct tempo for chest compressions during CPR. It is user-friendly and easy to use, with a simple button to start the timer.

The app provides an audible beat count, as well as an illustration of a heart, to help users visually keep track of the tempo. These features make the app accessible to a wide range of users. The app also includes a tutorial on using a defibrillator and maintaining the proper rhythm during CPR.

However, it does not provide additional illustrations or videos on performing CPR or any information on what to do in the initial stages of a CPR emergency.

CPR & First AID App Logo

Livesaver

Lifesaver is an innovative and unique app in the market that offers an engaging and interactive way to learn CPR. The app utilizes video simulations to provide users with a hands-on learning experience. Users are presented with different CPR scenarios and must make quick decisions on how to respond, similar to a choose-your-own-adventure game.

The time-sensitive nature of the scenarios adds a sense of urgency and realism to the learning experience. The gamification aspect of the app also helps users remember critical procedures and respond appropriately in an emergency. Overall, Lifesaver offers a fun and engaging way to learn CPR, making it stand out from other apps on the market.

Lifesaver is an innovative and unique app in the market that offers an engaging and interactive way to learn CPR. The app utilizes video simulations to provide users with a hands-on learning experience. Users are presented with different CPR scenarios and must make quick decisions on how to respond, similar to a choose-your-own-adventure game.

The time-sensitive nature of the scenarios adds a sense of urgency and realism to the learning experience. The gamification aspect of the app also helps users remember critical procedures and respond appropriately in an emergency. Overall, Lifesaver offers a fun and engaging way to learn CPR, making it stand out from other apps on the market.

Ideation

A brainstorming technique called Crazy Eights is used to generate ideas to fill the gaps identified in the user personas and competitive audit. It is emphasized that the initial part of the application should be usable in emergencies, even for users unfamiliar with the CPR steps.

A brainstorming technique called Crazy Eights is used to generate ideas to fill the gaps identified in the user personas and competitive audit. It is emphasized that the initial part of the application should be usable in emergencies, even for users unfamiliar with the CPR steps.

Crazy Eights Brainstorm Drawing of ideas for the CPR app
Crazy Eights Brainstorm Drawing of ideas for the CPR app
Crazy Eights Brainstorm Drawing of ideas for the CPR app

Starting
The Design

Computer Image Gif

✏️

Digital Wireframes

Following the ideation and creation of paper wireframes, I developed the initial designs for the CPR+ mobile app. The designs emphasize guiding the user through the steps of performing CPR until the arrival of emergency medical personnel.

Following the ideation and creation of paper wireframes, I developed the initial designs for the CPR+ mobile app. The designs emphasize guiding the user through the steps of performing CPR until the arrival of emergency medical personnel.

Digital Wireframes
Digital Wireframes
Digital Wireframes

📲

Low-Fidelity
Prototype

To prepare for usability testing, I created a low-fidelity prototype demonstrating how users can access and activate the CPR+ assistance feature in an emergency.

To prepare for usability testing, I created a low-fidelity prototype demonstrating how users can access and activate the CPR+ assistance feature in an emergency.

Image of Digital Wireframes
Image of Digital Wireframes
Image of Digital Wireframes

PREVIEW

CPR+ Image of additional features
CPR+ Image of additional features
CPR+ Image of additional features

Usability Study

Parameters

📑  Study Type

Moderated & Unmoderated

📍 Location

Los Angeles & Toronto

🤳 Participants

7 Participants

⏳ Length

30-45 min

🕵🏻‍♀️

Findings

The usability study yielded the following key results:

Enabling CPR Guide

In an emergency, the ability to quickly and easily locate the CPR activation button is crucial.

In an emergency, the ability to quickly and easily locate the CPR activation button is crucial.

Emergency Call

During a CPR emergency, it is essential to have the capability of quickly dialing the emergency number while remaining able to view the steps in the guide without exiting the application.

During a CPR emergency, it is essential to have the capability of quickly dialing the emergency number while remaining able to view the steps in the guide without exiting the application.

Navigating CPR Steps

During an emergency call, users should have access to a quick overview of the initial steps to be well-informed and confident in performing CPR.

During an emergency call, users should have access to a quick overview of the initial steps to be well-informed and confident in performing CPR.

Refining The Design

Refining
The Design

Refining
The Design

📲

High-Fidelity
Prototype

Design modifications were based on the usability study results, which emphasized the need for an easy method of activating the CPR guide.

Design modifications were based on the usability study results, which emphasized the need for an easy method of activating the CPR guide.

Image of the Affinity Map
Image of the Affinity Map
Image of the Affinity Map
Image of Wireframes for the High- Prototype
Graphic of the final Mockup of the CPR+
Image of the High-Fidelity Prototype
Image of the High-Fidelity Prototype
Image of the High-Fidelity Prototype

PREVIEW

Mockup graphic of before and after usability study
Mockup graphic of before and after usability study
Mockup graphic of before and after usability study

App Design

CPR+ App

Accessibility

Considerations

1️⃣

Alternative, clear labels and easily accessible options were available to users to navigate the app. Alt text was added to images, and color contrast was ensured to meet accessibility standards.

2️⃣

Simple navigation cards were implemented for easy swiping and category selection. Users have multiple options to return to the previous screen or main menu.

3️⃣

Effortless navigation was enhanced by incorporating icons and accessible audio during a call. Upon opening the home screen, users are immediately guided on how to initiate CPR emergency assistance in case of an emergency.

Responsive Design

Responsive
Design

Responsive
Design

Image of a Desktop Computer displaying the design of CPR+ website
Image of a Desktop Computer displaying the design of CPR+ website
Image of a Desktop Computer displaying the design of CPR+ website

Sitemap

After completing the app designs, I began designing the responsive website. The CPR+ sitemap was utilized to guide the organizational structure of each screen's design to ensure a consistent and cohesive experience across devices.

After completing the app designs, I began designing the responsive website. The CPR+ sitemap was utilized to guide the organizational structure of each screen's design to ensure a consistent and cohesive experience across devices.

Image of the CPR+ Website Sitemap
Image of the CPR+ Website Sitemap
Image of the CPR+ Website Sitemap

Website Responsive Designs

Designs were optimized for specific screen sizes and devices that users use, including mobile, tablet, and desktop. Variations were made to account for the different screen sizes.

Designs were optimized for specific screen sizes and devices that users use, including mobile, tablet, and desktop. Variations were made to account for the different screen sizes.

Image of the different website wireframes screens
Image of the different website wireframes screens
Image of the different website wireframes screens
Image of the different website screens
Image of the different website screens
Image of the different website screens
Image of the different website screens

Website Design

CPR+ Website

Takeaways

Impact

Users reported that the CPR+ app made them feel more secure in an emergency. They felt more at ease knowing they could call the emergency number and still recall CPR procedures while using the app.

Users reported that the CPR+ app made them feel more secure in an emergency. They felt more at ease knowing they could call the emergency number and still recall CPR procedures while using the app.

Additionally, the responsive website design enabled users to learn various CPR methods through multiple media formats and easily access the website from any device due to the responsive design.

Additionally, the responsive website design enabled users to learn various CPR methods through multiple media formats and easily access the website from any device due to the responsive design.

Lessons

Learned

Gif of a character drawing a doodle

Throughout this project, I learned how to simplify problems and create valuable and engaging solutions for diverse users. The experience taught me the importance of putting myself in the user's shoes.

Throughout this project, I learned how to simplify problems and create valuable and engaging solutions for diverse users. The experience taught me the importance of putting myself in the user's shoes.

My design process emphasized the importance of patience as I carefully crafted a solution rather than just a simple design. It is hoped that the process and design outcomes will result in a product that can significantly assist many individuals during an emergency.

My design process emphasized the importance of patience as I carefully crafted a solution rather than just a simple design. It is hoped that the process and design outcomes will result in a product that can significantly assist many individuals during an emergency.

CPR+ Learning Saves Lives Logo

Next Steps

1️⃣

Conduct final research to evaluate the success of the app and website in achieving the goal of saving lives during a CPR emergency and teaching CPR on the go.

2️⃣

Include additional educational resources for pet owners to learn CPR procedures for their pets.

3️⃣

Offer digital badges and credentials for users who successfully complete accredited learning components.

Thank You!

for reviewing my work!

Thank You!

for reviewing my work!

CPR+ Banner displaying the look of the app
CPR+ Banner displaying the look of the app