Work        About

First Aid

A first-aid learning
app designed
for emergencies.


March - June 


Thesis Project


Cyan Guan


Hince Cheng



Interaction Design
UI Design
Brand Design
Video Editing

Exhibit | "The Start of A Long Journey" outstanding works by graduates of 2017 from key art academies in China 

In China, it seems to be a consensus view that the survival rate of patients suffering cardiac arrest is very low. So, when we prepared for our graduation design topic, we thought, “Can we solve this problem through the user experience method? If someone is seen falling down, can we tell app users how to help that person and improve their survival chances before the ambulance arrives?”


A product that is suitable for emergencies, providing cardio- pulmonary resuscitation (CPR) and other first aid tutorials that everyone can use quickly. Users can gain the correct first aid knowledge and get correct and efficient first aid guidance in emergency situations.

Mini Program

We have the opportunity to implement ideas through a mini program. Chinese users can open mini programs directly via WeChat, which is a type of software owned by every Chinese person, without downloading anything.

01   Process


In order to fully understand this field, we participated in a first aid skills training session and examination, achieved a Red Cross Junior First Aid Certificate, and conducted a interview with Mr. Hai Feng, the captain of a first aid team. From the case he personally touched on, he told us the difficulty and problems of implementing first aid.

  • The process of calling an ambulance is cumbersome, people need to describe the position accurately
  • Outdoors may often be noisy, crowded, and interrupt people to perform CPR
  • People are often not willing to help
  • People don't know how to perform CPR correctly

Suggestions from interviewee:
  • Seek help – sometimes helpers can provide more help than the tutorial
  • First aid knowledge is updated quickly, to ensure the authority of the content

Competitor Analysis

We found two apps relating to first aid that could meet basic requirements: the Red Cross First Aid app and the On-Site First Aid Guide. However, in a situation where first aid is required, we believe that the academic style of these, the complicated UI, and the need to download the apps in advance are disadvantages, and reasons for users to give up.

What could we do?

To solve the issues I listed, the solutions are separated into 4 parts:

  • Helping System
  • GIF Tutorial
  • Precise Mode for accurate CPRs
  • AED Navigation

02   Solutions


Quick Help

Press, talk and let go for quick help. You only need to press and hold to explain the situation in the field; it is not necessary to describe where you are. After letting go, the voice recording will be sent along with the location information to the first-aider within 1km (not ambulance.)

In China, ambulances usually take more than 15 minutes to arrive at the scene. But a nearby first aider can aim to get there within ten minutes.

On the other hand, users also need to call ambulance, so we provide the user’s accurately location info for calling ambulance.

*Definition of first-aider
Those who have first aid qualification certifications – they may be first aid members or ordinary people.

Hold to talk: describe the patient's condition

Let go: voice message plus location information is immediately sent to first-aiders within 1km

Limitation Design

In an emergency situation, having too many functions in an app does not provide better user experience. Therefore, the points listed below are limitation design for communication:

  • considering the reading ability of the help-seeker: first aiders cannot voice input
  • considering the ability of the help-seeker to input information: They are recommended to use voice input (by button scale).

GIF Tutorial

Convert incomprehensible numbers into visual images that are perceptible to the eye

“Press at least 100 to 120 times per minute”, “two fingers below the xiphoid”. Our tutorial design abandons the expression “using the correct operation”; with the correct frequency shown in the Gif, the user can grasp instructions like “just press here” and “the speed is 100 times per minute”.

GIF Tutorial Samples

Saving while Learning

Devide a long video into several step-by-step tutorials

CPR should begin as soon as possible. Compared to the traditional method of beginning the life-saving process after learning the whole tutorial, it will be more efficient to operate CPR while learning. So, we divided the long video into several step-by-step tutorials, and presented the tuto- rials by Gif and text instructions, which are easy to under- stand and check back to. Through this method, users can perform CPR while watching.

CPR Tutorial: 1/4
Observe the condition of breath

CPR Tutorial: 2/4
Seeking Help

CPR Tutorial: 3/4
Cardiac positioning

CPR Tutorial: 4/4

Voice Interaction

And the size of the text that can be seen clearly on the ground

We used large text and voice assistance. Therefore, users do not have to pick up their mobile phone again during CPR, so the process is not interrupted.

Precise Mode

The user’s actions remain almost unchanged, but the app accurately measures the depth of pressure.

The chest compressions in CPR for adults should be between 5cm (2.0in) and 6cm (2.4in) deep. However, the experts interviewed said that the majority of people who have not received training are unlikely to achieve the required depth. The precise mode is designed so that an ordinary person can also perform standard CPR. The user needs to hold the mobile phone in their hand to press (the rest of the action is unchanged), and the mobile phone uses its built-in sensors (gyroscope and accelerometer) to detect whether the depth of each pressure is correct, thereby judging whether it is effective.

Precise Mode Demo

 Step 1. Guide

 Step 2. Start pressing

Step 3. Press harder - insufficient depth

Step 3. Keep pressing like this - correct depth

AED Navigation

Looking for an AED machine with someone assisting

Automated External Defibrillator (AED) defibrillators are common devices for CPR and are distributed in cities. The AED navigation function can help first aiders to find these.。

03   Showcase