Work        About

First Aid Guidance

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?”

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


March - June 2017


Undergraduate Thesis Project


Cyan Kwan  Designer
Hince Cheng  Illustrator


Interaction Design
UI Design


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 half-hour 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.

  • In China, the process of calling an ambulance is cumbersome and people need to describe the position accurately
  • In the first aid process, if the situation is outdoors, it is often noisy, crowded, there is no one to help, etc.
  • People are often not willing to help
  • There is insufficient understanding the position of the heart and the frequency and depth of pressure required

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

Competitive product analysis

After researching, we found only 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.

1. To solve the problem of 120 (the Chinese ambulance phone number) communication costs by providing a help system

2. To solve the problem of environmental interference: visual optimization, voice interaction

3. To solve the problem of lack of knowledge about pressure positioning and frequency: Gif tutorial, help system

4. To solve the problem of low willingness to help: copywriting, feedback design

5. To solve the lack of compression depth: precise mode, help system

02   Design


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 responder within 1km (not 120.)

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 120, so we provide the user’s accurately location info for calling 120.

*Definition of a first-aider
Those who have first aid qualifications (institutional certification) – they may be first aid members, or ordinary citizens with their own occupations, scattered across all corners of society.

Hold to talk: describe the patient's condition

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

Some limitation design...

In an emergency situation, having too many functions in an app does not provide better user experience. Therefore, designers should think it clear that what functions are necessary and what are redundant. I think points listed below are most important in an emergency situation:

  • 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
(Chinese words are the user’s location)

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.。

UI Design