Save to Life
Feb.2017 | 4 Weeks Individual Project
I was a volunteer who worked at the Red Cross organization in BIFT for 4 years. I mainly took charge in planning and promote donating activities.
“What is a ‘smart’ way to increase charitable donations rather besides for planning a speech? “ This is the very initial design question to conduct the Save to Life. Save to Life is an interactive mobile website that attracts users through the AR game and then promotes online donations with guided information.
Role
UX Research, Prototyping/User testing, Interaction Design, UI Design
Client
The Red Cross of Beijing Institute of Fashion Technology (BIFT)
Tools
Sketch, Invision, Unity3d, Adobe Illustrator
about save to life
This project is is an interactive mobile website that helps to raise more donations for poor children who have been suffered from Japanese encephalitis (JE).
JE is a disease that mosquito bites can easy spread, the incidence of children is often higher, especially in rural China. Some harsh environment where is lack of funds for periodic vaccination.
Phases
Researching | background research of JE, case studies of Augment Reality and public donations
User research | personas and user journey map
User flow & wireframe
Prototyping and testing | tests for iterating and AR prototyping
VI | visual branding and color match
Final Screens
Researching
Below are key findings during the research, those inspired me to have some creative design assumptions during next steps:
Visualizing donation target encourages the user
Small amount strategy keeps potential donors
AR experience provides the second interface to the storytelling
Good narrative (background story/game) serves better for donation
User Persona
Targeting the user was the first step. I started with formulating a couple of personas to help guide the content of the app. Have the ability to donate, be comfortable with mobile experience and hold a mobile payment habit are some common features I saw from my targeting user. These drove me to think about the next user journey map.
User Journey Map
There are three design questions following up the opportunities specify, which guided me to specify three design features for this product:
“Killing mosquitos” AR Game
Short Story Reading
Random Small Amount Generating Function
User Flow
Combined the main goal of public donations, the user flow starts from scanning the QR code, which is efficient and easy to land the page.
The selection of “A random amount“ or “Write the amount“ is designed for those who can not make decisions immediately, which purposes to “push” to donate. While designing the “Random Small Amount Generating” function based on the small amount strategy, I followed some usability heuristics theories to make sure its user-friendly.
Wireframes
Based on the above flow sketches, I crafted wireframes to map out how users will go through the mobile website and conducted usability testing.
Prototyping & Testing
The goal of this paper testing is to see if the user can go through the whole pages fluently. I ran a total of 6 usability tests with different people and got much amazing feedback.
The News page reading and the Amount select page are two UI progress that changed relatively large despite other details, which will be presenting on the next part.
I also built the prototype of the AR game part through Vuforia in Unity3d.
The goal for this step is to test the response from users once they get into the page. Surprisingly, most of the testers will originally tap the flying mosquito so there is no need to add the text instruction.
Iterations
Quickly landing the user to the donating stage plays as the principle to build iterations according to the usability test. Then I updated a High-Fidelity wireframe to follow the big stylistic changes.
Key iterations after testing
Updating wireframes
VI Design
Mockups
Kill Mosquitos AR Game
After scanning the QR code in public, a AR game of killing mosquitos will pop up. Through a easy play, it will transfer to the story page of the child who needs help.
Random Donating Amount Generating
Small makes a big difference, it can well play in charity field. Small amount strategy places here to keep the potential donors. There will be two choices providing for people would like to donate, “A Random Amount“ and “Write the Amount“, which design to follow the business goal of raising more money.
