Sarah | Annie CPR

User Problems

Children from age nine on are able to safe lifes but often do not learn CPR appropriately
Children can have difficulties concentrating and learning effectively
Instructors have difficulties keeping track of various learnes at a time
Can be difficult for the instructors to monitor the different techniques well and effectively

Goal

Designing two digital interfaces for both trainer and children to support the teaching and quality outcome of CPR

Role

Research
Wireframing (Adobe XD)
Screendesign (Illustrator & XD)

Interactions (Adobe XD)
Animations (After Effects)
Filming & Cutting (Premiere Pro)

Specification

This project was part of the module Design of Human Machine Interfaces from my Bachelor study's third semester.

It was a collaboration with two other universities: The Queensland University of Technology in Brisbane (AUS), which handled the mannequin's product design, as well as the York University in Toronto (CA), approaching the interaction design of the mannequin.

I grouped up with two other fellow students to tackle the challenge of designing suitable interfaces for both target groups: 10 to 13 year old children as well as instructors - i.e. trainers, nurses or doctors.

Research

Information gathering

Firstly, we researched about the content of CPR classes and which different techniques need to get conveyed. Also, it was important to understand the special needs of children. Here, a zoom meeting and talk with a real CPR instructor helped a lot.

Important takeaways for the children:

Gamification is important but one should be careful with competition
Include positive feedback, especially before giving negative one
Fast and constant feedback
Each child should be able to work independently
Constant visuals and/or sound would be distracting

Important techniques being conveyed and monitored by the instructors:

Compression

Pressure Point
Depth
Frequency

Airway

Head Position
Nose Pinching
Ventilation
Time Frame

Combination

Compression and airway combined to perform the whole CPR process

Personas

For having our users in focus during the design process we created in total three personas. One for the instructor as well as two different ones to represent the children.

Prototyping

Paper Prototyping

For getting our first ideas on paper of how we thought the interfaces should work like and what sort of information should be displayed on which screen we used the paper prototyping technique.

We also built two iPad frames to lay over the paper prototypes in order to be able to show which screen is currently active when testing the user flow.

The following concepts were defined regarding the instructor's interface:

Navigation bar with Home, Current Session, Profile and Settings
Dashboard containing the next class, upcoming classes and recent classes
Three stages of teaching: Instruction, Tutorials and Full CPR
Statistics overview on each exercise and student

The three stages of teaching should contain the following

Instruction
Video with explanation from the instructor

Tutorials
Exercises about the above mentioned important techniques with viusal feedback for the instructor

Full CPR
Video scenarios including quiz questions where every student needs to perform the whole CPR process, again with visual feedback for the instrcutor

See here a small excerpt from our instructor's paper prototype during the Full CPR mode:

The following concepts where defined regrading the children's interface:

Avatars for personalization
Level bar for progress
Animation based
While it's other children's turn: Choose between rewatching tutorial videos, playing mini games or solving quizzes regarding CPR
Receiving feedback via a vibration bracelet in tutorial mode

Wireframing & Interaction

After finalizing the paper prototypes, we continued with transferring the screens into Adobe XD wireframes. Here, we wanted to test the content and functionality in a more realistic way without adding color and bigger design elements. For understanding the user flow we included interactions.

View here an example of the instructor's wireframes:

Moodboards

For selecting a suitabel color scheme we created two moodboards, one for each target group. The boards contain each three pages. On the first one, we collected six words we want the target group to feel when using our app. The second one contains the colors with inspirations we want to use and the third one examples of how the UI could look like.

Children's moodboard

Instructor's moodboard

Screendesign

The final step was now adding color and design elements to the screens. With help of the moodboards we were able to apply a white space dominating but also colorful design.

Following you can see examples from the instructor's UI:

Following you can see examples from the children's UI:

Click through the prototypes yourself!

P.S.: When testing the children's prototype, the provided code is xukb ;)

Movie

Storyboard

In order to present our digital solution regarding CPR classes for children, we had to film and cut a movie. Since we were limited to two minutes, we had to think before shooting about what kind of scenes we wanted to shoot and what screens need to be shown. Therefore, we created a storyboard with each scene being roughly sketched down and explained with one or two sentences.

Filming

Due to the covid regulations at this time of the year in Germany we were limited to actors from one household. Nevertheless, we were able to find siblings who were perfect to play both the instructor and one child of a CPR class. Thanks to the BRK Kreisverband Ingolstadt we had access to a real CPR classroom as well as a CPR mannequin. The filming took one afternoon.

Animations

All animations seen in the movie are made ourselves by using Adobe After Effects. In this way, we could e.g. fade in different text overlays or show that the vibration bracelet was supposed to be vibrating.

Cutting & Putting Together

Finally, I needed to cut and put together all of the different scenes, animations as well as chosen music and sound by using Adobe Premiere. Please enjoy our final movie for Annie CPR:

Documentation

Last but not least, we wrote the work process down in a more detailed way in our documentation. Click here to get directed to the PDF: