iCPR

CPR training for kids a holistic approach with an emphasis on a visual interface.

Design Brief

CPR saves lives. Teaching CPR to kids is a difficult activity. The design of the application should help young teenagers to learn giving CPR effectively. The trainers and the learners should have a better insight of various steps, activities along the whole process of CPR.

About iCPR

CPR training for kids a holistic approach with an emphasis on a visual interface. A step-by-step guide for the students to learn about the entire CPR process in presence of a trainer. Design focused mainly on visualizing the statistical results produced by the mannequin when a CPR is performed.

Team:

UX Designer: Ishan Gupta
UI Designer: Bimalesh Sahoo

Tools Used

Figma | Miro
After Effects | Premiere Pro

My Role

  • Research about CPR training and find the pain points.
  • Understand the pain points and ideate a a solution for better training.
  • Plot a mind map for the entire user journey of the application.
  • Identify potential user group and create user personas to define the user behavior.
  • Make a storyboard to visualize used case scenarios in a better manner.
  • Define user interaction for the solution.
  • Create the user interaction interactive and intuitive.
  • Incorporate the design with visual solution and animation that aid in learning.

Research

Qualitative Analysis

Qualitative Analysis

Ideation

Learning CPR and understanding the importance was important for us to empathize the trainer as well as the trainee to design the training application to the best possible way we could. While learning the steps we felt that each step has it’s own importance and learning it in one attempt is really difficult and it sometimes results in forgetting some details.

Since CPR is first aid to cardiac arrest, it is important for the trainee to be really through with the training. The training was so divided to provide individual attention to different steps. Only once the trainee could complete the training sections then could he/she move on to a full CPR.

CPR StepsQuestions of research

Solution

Solution

Define

Mind Map

Mindmap

User Persona

Kevin PersonaTriss PersonaRobert Persona

Storyboard

Storyboard

Moodboard

Moodboard color
Moodboard Text

Colors & Typeface

Color & typeface

Design

Paper Prototype

Paper prototype

Wireframes

Wireframe

Prototyping

Prototyping

Interface Design

Training Screens

Screen design

Results of Training

We really thought through how we could visualize the results section so as to make as the core section to help learn and perfect CPR training. It is a real-time data that changes with the activities performed by the trainee. The overall stat is a simple hexagon which marks the performance of the trainee. It also shows what the minimum acceptable performance for CPR is, and also the class average being performed by other trainees. The trainee can then see his particular result and know his performance among his peers and work on it. This ignites a sense of competition among the students to perform better which in turn results in a superior learning session.

Result screen design

Design for different results of activity performed during CPR.

Details of sub activities like Hand Position, Compression depth, Frequency of Compression, Nose Pinch, Neck Tilt and Airflow have also been added to further narrow down the short coming of the trainee. This could help the trainee and trainer focus more in the next session.

The graphs used to represent are also unique to the activity performed. Though they intend to be a simple line diagram but they have different features. The activities like Chest Compression Depth and Frequency has a fixed optimal range. This range is marked differently in the graphs for better data analysis. This visualization of results also makes it for students to look at the results and understand there drawbacks. Since everything is directly connected to the projector and everyone sees it, students have a sense of competition to perform better.

Here are some of my other projects:

Want to know more?
A short call goes along way.
Reach out at ishaninde@gmail.com