Page 1


About Me

INTERACTION DESIGN IS THE POETRY OF ARTIFICIAL OBJECTS

Metre, and rhyme, turn language from tool to beauty Creativity, empower the beauty to break the bond of metre and rhyme Frame, and structure, turn object from material to product Creativity, empower the product to transcend the limit of frame and structure The people who used the creativity on language are called as poets The people who used the creativity on objects are called as designers There is only one genre of poetry do not require to be translated It is called as interaction design And that is the reason why I decided to be a designer


黃 鏡源 Huang Jingyuan

I have been into design since the day I started my training class of sketch when I was a kid. After over-five-year long practicing, I noticed that there was always a broader world for me to discover, where I was amazed in my journey later—posters, illustrators, logos, and so on. Witnessing the rapid growth of mobile internet and new media, I was attracted by the exciting power of interaction design. With the effort of self-studying, now I have acquired the abilities of user research, prototyping, critical thinking, and empathy applying. As a qualified UX/UI designer, I am obsessed with capturing the sparks of the interaction among humans, systems, and services. This portfolio is the memories of my journey and my ticket to the next destination.


Contents

Your Underground Is a Battleground Interactive Media Installation

06

Community Healthcare Service

24

Smart Account Bank of China (Hong Kong) Mobile Client

45

Bank of China (Hong Kong) Video Teller Machine

48

Xiami Music Mobile Client

54

Qingfeng Dumpling Shop Branding Design

68


Individual Project

Interactive Media Design

July 2018 to October 2018


To appeal to the elimination of victim blaming in the issue of sexual harassment

01 Your Underground Is a Battleground


08

Background

A Battleground

Background

Sexual Harassment in China

Characteristics

Location

Public Transportation

49.9%

Public Space

37.7%

School

5.7%

Work Place

3.1%

Others

3.6%

Verbal

25%

Exhibitionism

9.8%

Peeping Stalking

7.3% 6.1%

One Male

42%

Males and Females Non-binary Genders

8.1%

Types of Conduct

69% OF PEOPLE HAVE EXPERIENCED SEXUAL HARASSMENT

Sexual harassment has specific conditions in different areas and countries, which are variable because of the diverse social context. China, as a country that had a profound patriarchal system in history, is still a society dominated by conservative gender conception. Hence the problem of sexual harassment is special from which in the western countries.

Physical Contact

51.8% Perpetrators

Two or More Males

48%

One Female Two or More Females Guangzhou Gender and Sexuality Education Center & Beijing Yipai Law Firm, Research on Sexual Harssment in Chinese Universities (2015) Bai Ri, Space, Body, and Female Ignored (2009)

1% 0.8%


09

Background

A Battleground

Public

"WHAT WERE YOU WEARING?" In China, 59% of people believe the major cause of sexual harassment is the victims' revealing clothing

Victims

"WHAT SHOULD I DO NOW?" After the incidences, only 2.1% of the victims chose to report to the police; the most common reaction is staring back, which is 28.9% of the victims' choice.

The frequent victim blaming in China's society is a reflection of people's conservative gender idea. The traditional patriarchal value is the core problem behind the conducts. Despite the difficulty of obtaining evidence, the related legal regulation still requires amelioration. Therefore, most of the victims do not have an appropriate coping style. Under the great pressure from the society and the lack of acknowledgment of the scale of the problem, many victims still have not openly denounced the conducts, especially those who suffered in workplace and family.

China Youth Daily, Embarrassment in the Subway: Too Less or too Crowded? (2012) Bai Ri, Space, Body, and Female Ignored (2009)

Design Challenge

Opinions and Reactions

1 2 3

How to eliminate the victim blaming?

How to help the victims find the feasible way to uphold the justice?

How to support them in emotion, advocate their anger and reduce the pressure that keep them in silence?


10

Research

A Battleground

Research

Emotion

Reason

Objectives

To probe the emotion and thoughts of victims and bystanders when the conducts were happening.

To find the reason of victim blaming and the causes of different views about the gender issue.

Findings

VIOLENCE IN SILENCE

CONFLICT OF IDEOLOGIES

THIS THIS THIS THIS THIS THIS THIS THIS

IS NOT MY BUSINESS IS NOT MY BUSINESS IS NOT MY BUSINESS Awkward IS Scare NOT MY BUSINESS Anger Perplexity IS NOT MY BUSINESS Shame IS NOT MY BUSINESS IS NOT MY BUSINESS IS NOT MY BUSINESS

Discrimination makes victims afraid of standing out. The public produces more pressure, rather than supports. Victims often won't choose to ask for help, because they feel like they will be judged on their own appearance and behavior. They are also fearful of the revenge from the perpetrators.

Focus Group

10

RULES PATRIARCHY SEXISM FAMILY

METOO LGBTQ MARRIAGE RULES PATRIARCHY SEXISM SHE HER METOO LGBTQ METOO FAMILY MARRIAGE RULES PATRIARCHY SHE HER METOO SEXISM FAMILY MARRIAGE RULES LGBTQ SHE HER ANIMATION GAMES METOO LGBTQ PATRIARCHY SEXISM FAMILY WEIBO INTERNET SHE HER

Feminism

MARRIAGE RULES PATRIARCHY SOCIAL MEDIA SEXISMConservative FAMILY MARRIAGE RULES GAMES WEIBO Youth PATRIARCHY SEXISM FAMILY WEIBO ANIMATION Culture SOCIAL MEDIA MARRIAGEPATRIARCHY SEXISM FAMILY MARRIAGE RULES PATRIARCHY –INTERNET GAME SEXISM FAMILY MARRIAGE RULES NEW MEDIA GAMES WEIBO PATRIARCHY SEXISM FAMILY MARRIAGE RULES PATRIARCHY SEXISM FAMILY MARRIAGE RULES PATRIARCHY SEXISM FAMILY MARRIAGE

Under the impact of the traditional patriarchal culture, most of the Chinese haven't realized the importance of gender issue. The emerging young generation is more progressive, but the feminism voice is still missing, facing obstacles from different fields.

Participants

90

Minutes


11

Research

A Battleground

Field Research

Behavior

Most of the passengers are focusing on their phones when they are in the underground. Usually, they would like to avoid contact with others in any kinds.

Environment

In a crowded underground, people can hardly tell the changes or identity another one in the surrounding environment, since it‘s difficult to move around.

Staff

Staff cannot notice the incident in carriage immediately. There is no access for passengers to communicate with the outside, too.


12

Research

A Battleground

Most of Chinese believe sex is a shameful topic, and eastern culture forces people to stay in silence.

What is the definition of sexual harassment? Sometimes girls are just too sensitive.

Zhou yulin Male 22 Student

Wang Yan Yang Ning Female 27 Graphic Designer

Male 61 Teacher

Zhou Zimeng Female 42 Accountant

I didn't know how to react, I just wanted to go away as quickly as possible. I hate to admit that but sometimes they just got the privilege. They don't have to feel the fear for that hand, comes from nowhere, try to take some advantages of you.

I don't believe other people will help you. What they can do about it?


13

Research

A Battleground

Interview

When they have no righteous way to satisfy themselves, they might turn to irrational action. Sadly, there are always desire not fulfilled.

Song Ming Zheng Lei

Male 26 Salesperson

Female 35 Editor

It's really annoying when they stare at you, when you are in a backless dress or something.

Yang Chenyu Male 31 Underground Station Officer

Female 24 Nurse The punishment is far from enough.

Once you have that kind of experience, it will haunt you forever. It feels like I had done something wrong, even through I know that I had not.

Mo Yitong

The underground station cannot do much about it, because we don't have the actual right to enforce the law.


14

Design Consideration

A Battleground

AN INTERACTIVE MEDIA INSTALLATION + AN INTERACTIVE NARRATIVE

To reveal the hurts caused by victim blaming

To appeal for the help from the bystanders

To encourage the victims to take bravery actions


15

Design Consideration

A Battleground

Design Consideration Location

Carriage The installation will be set in the carriage of the underground, where the conducts happened. As the stage of the interactive narrative, it will help the interaction break the fourth wall, bring real meaning to the passengers' action.

Screen

Mirror The reflection on the window is a reconstruction of the carriage, creating an immersive experience for the passengers as audiences, which makes it the best place for the installation. The process of watching and interacting with the installation will be the process of self-examination for the passengers, who are the bystanders when the incidences happen.

Interaction

Eyes & Hands Passengers will use eyes and hands to interact with the installation. Eyes represent the character of the bystander, which demonstrate the hurts brought by apathy. On the opposite, hands represent the action and help, which would make the real difference. The required motion will be easy to accomplish, the eyes will even engage in the interaction subconsciously.


16

Design Consideration

A Battleground

TOUCH

GA

FROM THE OFFENSIVE TOUCH TO THE SUPPORTIVE TOUCH

GAZE AT THE HARM FROM MALE GAZING

The touch between individuals can pass on support and courage. The gesture will empower victims to fight against the harassment, replacing the hurt from offensive touch.

The damage from male gazing will be visualized, revealing the pain of sexism discrimination, which is the source of victim blaming. This brings an introspection on traditional value.


AZE

Ideation

SILENCE

BREAK THE SILENCE OF BYSTANDERS AND THE SILENCE OF VICTIMS Encourage people to stand out for themselves, and stand out for others. The significance of action will be emphasized, and the different outcome will be clearly demonstrated.


18

Narrative Design

A Battleground

Gaze / Glance Act 1: Begining

5s

ROLE 1 and ROLE 2 enter the carriage.

15s

The text "GAZE" appears, guiding the passengers to focus on the screen. The text will move along the track of passengers' sight.

Act 2: Harassment

20s

ROLE 2 harasses ROLE 1

When passengers looking at ROLE 1, the text will transfer to the sexist comments, which will stay on the silhouette of ROLE 1, illustrating the hurts from victim blaming.

Wave Act 4: Change

30s

Stretch Out 65s

The text and image guide passengers to wave their hands and wipe off the color on the screen.

70s

The text on ROLE 1 will be wiped off, too. The wiping will be automatically completed by animation when there is less than 4 people participating.

75s

When the screen is clear again, it returns to the scene in act 2 when the incidence just happened.

80s

The image of hand appears again to guide the passengers to raise their hands. The gesture is a signification of support, giving ROLE 1 the carriage to fight back.


Narrative Design 35s

When there are more people looking at ROLE 1, the texts on her silhouette will gradually cover herself. When there are less than 4 people, this step will be automatically completed by animation.

Act 3: Silence

40s

ROLE 1 tries to move without saying anything, carrying the text on her.

55s

The texts keep increasing, cover the whole screen with color.

60s

The screen turns dark. A date appears, reminding the passengers that the incidence had really happened.

Wave 85s

ROLE 1 pushes ROLE 2 away, leaving a transparent handprint on his silhouette.

Act 5: Action

95s

The image of hand guides passengers to wipe off the silhouette of ROLE 2 by waving their hands.

105s

The silhouette will finally be erased by the passengers. This step will be automatically completed by animation when there is less than 4 people participating.

110s

ROLE 1 leaves, the slogan appears: "Your underground is a battleground".


20

Technical Research

A Battleground

Technical Research

Hardwares

Transparent LED Screen Transparent LED is easy for installation maintenance with low cost. It can reach transparency over 70%. Stacking upon a oneway mirror, the display will be combined with the reflection of the carriage, and the people outside will not be influenced. EyeTracker

Distribution Circut

Panel

The projectors create a pattern of near-infrared light on the eyes. The sensors take highframe-rate images of the user's eyes and the patterns. The image processing algorithms find details in eyes and reflections patterns and calculate the eyes' position and gaze point.

Tobii Eye Tracker 4C

120° Eye Sensor 2 ft 150°

Illuminators

Eye Sensor Illuminator

ASIC

2 ft

Tobii Eye Tracker 4C can be applied within 20 - 37" operating distance for 30" screen area, which is suitable for the narrow space in the underground.

2 ft

Motion Capture The data takes the form of a grayscale stereo image of the near-infrared light spectrum, separated into the left and right cameras. The device use triangulation measurement to locate the hands in the interaction space, which takes the shape of an inverted pyramid – the intersection of the binocular cameras’ fields of view.

Leap Motion

IR filter

IC

IR-LED

IR-LED

IR-LED

Grayscale Cameras www.tobii.com www.leapmotion.com

Leap Motion has an interaction area of 8 cubic feet. With open API, the development part of the project can be realized conveniently.


21

Testing

A Battleground

Testing

Problems

Ameliorations

GAZE

》 The previous instruction guiding the passenger is not clear enough. People might think that the words are just animations instead of an interactive element.

You are gazing at here

The text for guiding is more straightforward. Passengers can have a better understanding of how the interaction works.

》 The hand icon is not easy to understand as the tip for wiping off the color on the screen.

The guide can be more easily related to the action of wiping of the passengers.


A Battleground

Final Design

22

Final Design


Visual Design

Barbara Kruger, Untitled (Your body is a battleground), 1989, photographic silkscreen on vinyl, 112 x 112 in., via Broad Museum/ Š Barbara Kruger

The elements in the visual design are salutes to the works of American feminism artist Barbara Kruger. The red color and the words in Futura Heavy Oblique frequently appeared in her works as her characteristic art language, which can be found in the animation of the project. The name of the project, Your Underground Is a Battleground, is inspired by the slogan on a poster made by Barbara Kruger in 1989 to support the Women's March on the issue of reproductive freedom.


Team Project

Service Design UX Design UI Design

January 2018


To develop a senior citizen oriented system of community healthcare service

02 Community Healthcare Service


26

Mobile Client

Healthcare Service

Background

There are

158, 310, 000 people in China are over

65

Aging population

Health Management Service

Problems

The increasing of the number of senior citizens has brought much pressure to different industries in China. The problems in their life require the effort from the whole society. Healthcare is one of the most critical among them.

Health Management Service is a system aiming to provide healthcare and health interventions for citizens over 65, who mainly are the patients of chronic disease.

Lack of general practitioners Hard to develop the system of the health profile Low utilization efficiency of resource

Junwu, Dang Blue Book of Aging: Survey Report On the Living Conditions of China's Ruban and Rural Older Persons (2018)


27

Background

Healthcare Service

Living Condition and Need

Daily Routine

Family Member

Health Concern

Senior citizens enjoy their personal habits and prefer to share it with more friends. Outdoor activities such as exercise enrich their social life.

Most of the senior citizens live with their husbands and wives, some with their children. The number of solitaries is increasing, who have more difficulties.

For lone senior citizens, they are more sensitive about the need for health consulting than the ones living with families, but there is not enough help.

Physical Need

Mental Need 20.4%

34%

21%

17.8%

24.6%

34.4%

41.5%

5.4% 1%

42.1%

2.4% 4.6%

Happy

Medical Consultations (Per Year)

14.6 0

0-1

51.9%

1-2 31.4%

2-

Bored

16.7%

Finance

36.3%

18.3%

43.1%

18.4%

26.7%

16.4%

15.7% 6.5%

Lonely 23.3%

23.4%

53.3%

Nursing

40.3%

11.9% 2.7%

Hopeless

Insurance/ Nursing Home

Children

Junwu, Dang Blue Book of Aging: Survey Report On the Living Conditions of China's Ruban and Rural Older Persons (2018)

Independent

Usually

Often

Sometimes

Seldom

Never


28

Field Research

Healthcare Service

Field Research

1

2

3

GRADE-A TERTIARY HOSPITAL

COMMUNITY HEALTHCARE CENTER

COMMUNITY HEALTHCARE STATION

Strengths

Strengths

Strengths

Higher quality of medical equipment More skillful doctors More departments and more fields covered

Costs less time on traffic and waiting Provides health management service for senior citizens

Easy to access Convenient for doctors to do follow-up visits

Weaknesses

Weaknesses

Weaknesses

Costs more time on traffic and waiting Self-service devices are not friendly to the senior citizens

Not enough skillful doctors Not enough self-service devices Difficult to link to the higher hospitals

Not enough skillful doctors Not enough equipment Limited working time


29

Interviews

Healthcare Service

Interviews

GRADE-A TERTIARY HOSPITAL

Are the guiding signs clear enough for you?

I wasn't familiar with it at the first time, but now I got used to it.

Have you used the self-help device?

Sometimes, but I didn't feel like it was safe for me, it's pretty quick, though.

COMMUNITY HEALTHCARE CENTER

Are you in the health management service?

COMMUNITY HEALTHCARE STATION

What kind of service is providing here?

I know there will be a free examination each year, but nothing more.

I just come here to get my pills, they can do little examinations, but not really detailed.

Which procedure bothers you the most?

What can be improved here for you?

It's not really convenient when I need to transfer. That takes a lot of time.

They should have more doctors, and they should open on weekends.

Conclusion

Conclusion

Conclusion

Grade-A hospitals have the best resource, but they cannot be easily accessed by senior citizens. It costs too much time for them.

Due to the location and resource, healthcare center has the potential to provide better service, but they need to find a better way for advertising.

Healthcare station can make the health management service much more accessible, but the equipment and human resource have to be improved.


30

Persona

Healthcare Service

Persona

Before Joining

Joining

Steps

65

Stages

Gramma Lee

Learn About Health Management Service

Sign in Health Management Service

Build Personal Profile

Develop Health Intervention Program

Retired Teacher

Ads Doing

Friends

Learn the Info

Doctors

Gramma Lee has two daughters who are both too busy to visit her frequently. They had taught her how to use video chatting, but she doesn't do that often because she is afraid about that will bothers them. Her husband passed away two years ago, and she is still getting used to the solitary life.

Motivation

Take care of herself without bothering her daughters

Confusion

Don't know enough about her health condition and feel alone

Expectiation

Direction on lifestyle, health intervention, and companionship

Feeling

Introduction

Thinking

Suffering from hypertension/Enjoying Exercise/ Seeking for fiends/Willing to try new things

What is the Health Management Service? How much does it cost? Does it helpful to me?

Expectant

Examination

Go to Hospital Transact

What are the procedures? Is the hospital good enough? How long it will take?

Anxious

Submit Info

Consult

Get Result

What are the examinations? What is my health condition? How long it will take? Is it safe to provide my info?

Worried

Are the doctors qualified? What does the result mean? Will my health condition be improved?

Anxious


?

User Journey Map

Touch Points

Doctors and Staff

Use

Enact Health Intervention Program

Track Health Data

Make an Appointment

Change Lifestyle

Track Health Data

Consult

Change Lifestyle

Follow-up

Can I fulfill the requirement by myself? Will these methods work?

Hopeful

Have I made progress? How long it will take to get a better result? Can I get more help?

Reassuring

Worried

Medical Equipment

Sign System

Take Medical Treatment

Go to Hospital

Take Medicine Infusion

Treatment

Transfer

Make Appintment

How serious the problems are? When can I solve it? Whom should I turn to? Should I let my children know?

Medicine

What is the cause? How much will I spend? How long this will take? How can I prevent this?

Bothered

Pain Points

Doctors can not collect the data when the patient went back home

Healthcare center doesn't have enough methods to attract seniors citizens

Senior citizens don't have enough help to follow the intervention program

Family members cannot be informed timely about senior citizens condition

The procedures of health intervention program are too tedious

The hospital and the healthcare center cannot communicate conveniently


32

Design Definition

Healthcare Service

Design Definition

Stakeholder Map

Executor

Decision Maker

Lack of daily health data The gap between different levels

Difficulty in the allocation of resources Difficulty in supervision Direct

Government

db

ac k

A SYSTEM OF COMMUNITY HEALTHCARE SERVICE FOR LONE SENIOR CITIZENS

Hospital

Fe e

Implement

Family

Senior Citizen

Communicate Participator Data synchronization

Real Time Monitoring

Treatment Reminder

Health Knowledge

Emotional Support

Not informed timely LImited time and energy

User Lack of reminder Lack of companionship


33

Service Blueprint

Healthcare Service

Service Blueprint

First Time

physical Evidence

Daily Activity

Home

Ad Campaign

Help Desk

Examination Room Equipment

Help Desk Smart Watch

Examination Room

Clinic Medicine

Reading Room Book/Lecture

Recreation Room Card/Chess

Smartwatch Medicine

Gain Info

Consult

Free Examination

Register Get Smart Watch

Get Result

Get Medical Attention

Learn About Chronic Disease

Social and Relax

Daily Check

On-Stage Contact Employee

Publicity Staff

Hep Desk Staff

Doctor/Nurse

Device Staff

Doctor/Nurse

Doctor/Nurse

Doctor/Dietitian

Mental Counselors

Back-Stage Contact Employee

Publicity Staff Research Staff

P rogrammer

Data Base

Clinical Information System

Guest's Action

Support Process

Nurse

Data Synchronization

Data Base

Clinical Information System

Maintenance Personnel

Counselor Programmer

Clinical Information System


34

Interior Design

Healthcare Service

Interior Design

Prototype

VR Tour We made a prototype for the redesigned interior space of the health center by blocks. With a VR tour, we tested and refined the details in the layout.

View Online https://720yun.com/t/6ljgpw23oxhn2zy7fj?pano_id=EC3niE5W72oIXzVw


35

Interior Design

Healthcare Service

Layout

Clinics

Information Desks

Reading Room Health lectures Develop health lifestyle learn more about chronic diseases

Examination Rooms

Rest Area

Recreation Room

Artificial Window

Semi-open design Enrich social life

Pharmacy

Self-ServiceTerminal

Register Payment Distribute Medicines Health Data Tracking

The procedures in healthcare service will be completed through a smartwatch. With NFC feature, the users just need to touch the sensors on the wall with their smartwatches.


36

Qwatch

Healthcare Service

Qwatch

CURE

Qwatch is a smartwatch linking the senior citizens and the health center. It can be used as a check in the tool when the user comes to the health center, updating the health data. It can also inform the families of the health condition of the user, so send first aid massage.

Q

First Aid

Pulse Monitor

Pedometer

Bluetooth

NFC


37

Qwatch

Healthcare Service

Day Mood

7 18

Night Mood

Health

Menu

2236

Tab

Interaction and Interface

Heart Rate

Tab

Steps

Voice Interaction

Settings

Swipe

Pills

Long Press

Hospital Long Press


38

Mobile Client

Healthcare Service

Mobile Client

Information Architecture

Me

Health Data

Heart Rate Septs

Medicines

Info/Usage/Dosage Reminder Add

Hospital

Appointments Records

Recommendation

Community Activities Health Recipes Lifestyle Tips

My Account

Personal Info Family Mebers' Info Insurance Info My Qwatch

Friends

Timeline

Like Post

Contacts

Direct Messages New Friends Edit


39

Mobile Client

Healthcare Service

Wireframe and Flow

Start

Login

Matching Easy to Operate The senior citizens can finish the process of registration with the help of the staff in the community healthcare center.

Choose your identity Parent

Child

Qwatch would be connected by the staff the first time when it was distributed. It will connect to the user's phone automatically when they open the app. Families Identification

Family

Me

Steps

Medicines

Hospital

Friends

Contacts

Posts

Massages

Health News

Connecting Families

Make More Friends

Through a simple identification, the children of senior citizens can sign up to follow the health data of their parents.

Friend adding is realized by touching two Qwatches. The Social system is lite enough for elder people to use.

Personal Info


40

VI Design

Healthcare Service

VI Design

Logo

Ideation

Colors #B7D450 R183 G212 B80 C35 M0 Y80 K0

Cosy

Reliable

Healthy

#014726 R1 G71 B38 C91 M58 Y100 K38

Patens


Healthcare Service

VI Design

41

Application


Internship Project

UX Design UI Design

October 2017 to February 2018


To promote the quality of banking service with modern technology and design

03 / 04 Bank of China (Hong Kong)


44

About

Bank of China (Hong Kong)

About

Bank of China (Hong Kong)

TUYI Design

Internet finance has reshaped the pattern of the banking industry. Smartphone became the new platform where the competition is accompanied by innovation. Enterprises are required to provide a higher quality of service. Hence Bank of China (Hong Kong) started to update their service in different platform, embracing the cutting-edge technologies.

TUYI Design is a design company located in Beijing, providing UI, UX, and branding design services. This project was ongoing during my internship in TUYI Design, aimed at the UX and UI design of the mobile client and the VTM system.


45

Smart Account

Bank of China (Hong Kong)

To create more intelligent mobile financing experience

03 Smart Account Objective TO INTEGRATE THE DIFFERENT FUNCTIONS OF DIFFERENT TYPES OF CARDS INTO ONE NIMBLE UNINT

Smart Account was a conceptual function introduced by Bank of China (Hong Kong) to demonstrate the innovative feature of the new version of the mobile client. The presented version of the design was focusing on the integration of multiple functions of different cards.

Icon Ideation


46

Wireframe and Flow

Bank of China (Hong Kong)

Wireframe & Flow Home Page

Overview

9:41 AM

返回

返回

智能賬⼾戶

本⽉月概覽

總⽀支出

總收⼊入 港元 60,020.00

信⽤用卡 中國銀⾏行行

**** **** **** 9564

100%

Monthly Overview Chart The overview of income and payout of current mouth is presented here

6⽉月

總⽀支出

中國銀⾏行行

**** **** **** 2834

餘額

港元

250,000.00

轉賬

點擊卡⽚片查看交易易明細

簽賬積分

更更多 >

港麗酒店

永安旅遊

250

4000

推薦

港元

信⽤用卡 1234

港元

線上轉賬

12,000.00 儲蓄卡 1313

14/06 繳付賬單

230.00

港元

中電

儲蓄卡 1313

10/06 轉賬 港元

線上轉賬

15,000.00 儲蓄卡 1313

05/06 旅遊 港元

JW 萬豪酒店

8,000.00

9:41 AM

返回

總額度 港元 30,000.00

6⽉月

總收⼊入

港元 22,320.00

港元 12,000.00

17/06 繳付賬單

港元

詳情

6.00

返現 1.00

17/06 繳付賬單 港元

中電

6⽉月

港元

中電

17/06 轉賬 線上轉賬

50.00

返現 5.00

05/06 旅遊 港元

JW 萬豪酒店

17/06 轉賬

還款

1,000.00

12,000.00

港元

10,000.00

港元

12,000.00

10/06 轉賬 線上轉賬

9:41 AM

9:41 AM

100%

返回

信⽤用卡 **** **** **** 2834

付款⽇日 01/07/18

100%

儲蓄卡

中國銀⾏行行

**** **** **** 6732

HK$ 250,000.00

港元 20,020.00

明細 分類類 趨勢

>

6⽉月

6,306.30

明細 分類類 趨勢

31.5%

膳⻝⾷食

20.5%

港元

4,104.10

轉賬

15.5%

港元

3,103.10

醫療

31.5%

6,306.30

醫療

31.5%

旅⾏行行

15.5%

港元

3,103.10

膳⻝⾷食

20.5%

港元

4,104.10

膳⻝⾷食

20.5%

港元

4,104.10

交通

8.5%

港元

1,701.70

轉賬

15.5%

港元

3,103.10

轉賬

15.5%

港元

3,103.10

購物

8.5%

港元

1,701.70

旅⾏行行

15.5%

港元

3,103.10

旅⾏行行

15.5%

港元

3,103.10

港元

1,701.70

港元

總⽀支出

總⽀支出

港元 20,020.00

港元 20,020.00

港元

8.5% 還款

交通 總收⼊入

港元

1,701.70

港元

9:41 AM

返回

Advertisement

100%

9:41 AM

返回

簽賬積分 永安旅遊

250

消費記錄錄

港麗酒店

4000

消費記錄錄

>

消費記錄錄

>

CKS

1000

>

最新優惠

旅遊優惠

港元

24,000.00

40%

港元

16,000.00

9:41 AM

100%

返回

優惠推薦

全年年優惠

60%

其他

積FUN錢

中銀信⽤用卡客⼾戶專享優惠

>

中銀信⽤用卡客⼾戶專享優惠

>

100%

明細 分類類 趨勢

滑動查看收⼊入分類類

8.5% 轉賬

交通

收⼊入

⽀支出

10000

1⽉月

2⽉月

3⽉月

4⽉月

5⽉月

6⽉月

中銀信⽤用卡客⼾戶專享優惠

中銀信⽤用卡客⼾戶專享優惠

中銀信⽤用卡客⼾戶專享優惠

>

>

⽉月份 6⽉月

中銀信⽤用卡客⼾戶專享優惠

>

中銀信⽤用卡客⼾戶專享優惠

>

>

> 中銀信⽤用卡客⼾戶專享優惠

>

總收⼊入 港元

30,500.00

總⽀支出 港元

中國銀⾏行行

**** **** **** 2834

付款⽇日 01/07/18

明細 分類類 趨勢 40000

⽀支出

40000

30000

30000

20000

20000

10000 0

10000

1⽉月

0

12,300.00

100%

信⽤用卡

1,330.00

收⼊入

0

更更多 >

中銀信⽤用卡客⼾戶專享優惠

**** **** **** 6732

明細 分類類 趨勢

20000

9:41 AM

返回

HK$ 250,000.00

40000

>

100%

儲蓄卡

中國銀⾏行行

30000

中銀信⽤用卡客⼾戶專享優惠

更更多推薦

9:41 AM

返回

收⽀支管理理

1⽉月

2⽉月

3⽉月

4⽉月

5⽉月

2⽉月

3⽉月

4⽉月

5⽉月

港元

22,300.00

4⽉月

港元

30,500.00

3⽉月

港元

40,000.00

港元

港元

港元

12,300.00 22,000.00 30,000.00

⽉月份

總收⼊入

6⽉月

港元

5⽉月

港元

總⽀支出

30,500.00

港元

22,300.00

港元

港元

23,000.00

港元

13,000.00

4⽉月

港元

30,500.00

總⽀支出

6⽉月

港元

5⽉月

港元

12,300.00 12,300.00 4⽉月

轉賬

2⽉月

港元

6⽉月

6⽉月

⽉月份 5⽉月

22,000.00

Cash Back Info

還款 港元

Classifications The itemized classifications of payout and income are listed here

6,306.30

港元 40,000.00

薪⾦金金

Total Cash Back Tap to view more

6⽉月

醫療

>

Credit Card Integral

The itemized bills from each card are collected here, income and payout are distinguished by different colors

轉賬

港元 50.00

線上轉賬

中國銀⾏行行

JW 萬豪酒店

230.00

港元

15/06 旅遊 港元

線上轉賬

1,330.00

總⽀支出

230.00

17/06 轉賬

返回

明細 分類類 趨勢

>

中銀信⽤用卡客⼾戶專享優惠

明細 分類類 趨勢

總⽀支出

累計返現

100%

收⽀支管理理

更更多 >

中銀信⽤用卡客⼾戶專享優惠

10,000.00

港元

14/06 轉賬

1000

**** **** **** 2834

HK$ 250,000.00

Bills

12,000.00 信⽤用卡 1234

15/06 旅遊

CKS

永安旅遊獨家回饋

6⽉月

總⽀支出 港元 1,330.00

Cards Overview Information is presented as a form of card to help users understand the usage easily Slide to switch cards Tab to view more information

中國銀⾏行行

儲蓄卡 1313

17/06 轉賬

JW 萬豪酒店

儲蓄卡

230.00

港元

中電

還款

點擊卡⽚片查看交易易明細

付款⽇日 01/07/18

明細 分類類 趨勢 信⽤用卡 1234

17/06 繳付賬單

付款⽇日 01/07/18

港元 1,330.00

**** **** **** 2834

100%

儲蓄卡

港元 60,020.00

線上轉賬 最新結⽋欠

返回

信⽤用卡

中國銀⾏行行

9:41 AM

100%

1,330.00

總收⼊入

港元 30,500.00

Cash Card

9:41 AM

返回

收⽀支管理理

明細 分類類 趨勢

收⽀支管理理 >

港元 30,500.00

Credit Card 9:41 AM

100%

40,000.00

港元

12,300.00 12,300.00 22,000.00 30,000.00

Popup tips Slide to view the income classifications

Trends The overview of the bills from the last six months are listed here by time order, the trends charts


Bank of China (Hong Kong)

UI Design

47

UI Design


48

Video Teller Machine

Bank of China (Hong Kong)

To provide more efficient service for new clients

04 Video Teller Machine Background Human Service

Video Teller Machine

The traditional human banking service is not efficient enough. Costumes always need to wait for a long time, and the verbal instructions from the teller might be confusing for them. In addition, repetitive work can cost lots of energy and patience from the staff.

Video Teller Machine (VTM) provides a better solution with an automatic system for clients to transact by themselves, with the help from staff through real-time video. This project attempts to design a more user-friendly interface for VTM in Bank of China (Hong Kong), to promote the efficiency of information input.


49

User Research

Bank of China (Hong Kong)

Users Research

Occupation

Age 61-70

8.3%

Office worker

33.5%

51-60

12.5%

Others

27.4%

41-50

36.2%

Freelance

19.1%

31-40

27.3%

Governmental Staff

12.6%

20-30

15.7%

Students

The Number of Times per Month

7.4%

Types of Business Account Opening

31.7% 20.4%

5 or more

4.1%

Card Business

3-4

11.4%

Transfer

17.8%

1-2

53.2%

Deposit/Withdraw

15.6%

less than 1

31.3%

Loan Business

8.4%

Others

6.1%


50

Interview

Bank of China (Hong Kong)

Interview Sample Size

Procedures Time

Bank of China (Hong Kong)

59s

100%

3.4

Pain Points

— Xu Ziming, Teller

Take a Number

Satisfaction

The requirements for identification vary in different banks. When they come to open new accounts, they might not familiar with our policy.

Pass Rate

For the clients from mainland China, there could be a misunderstanding caused by the different usages of language.

15 People

Clients are not informed about how long the waiting will cost. They could use the time to input some information.

Input Basic Info

Submit Identification File

18s

8s

100%

80%

4.1

3.1

The information is necessary for the application, but clients are not confirmed to be able to apply at this stage.

There are many different types of file that can be accepted, but also with complex requirements. Clients might be confused about the reason why the files are rejected.


Usability Research

Input Identification Info

Collate Info

27s

75s

43s

Tot 260s

91%

81%

89%

Tot 60%

4.3

4.2

3.8

Av 3.8

Input work can be done more efficiently by scanning, rather than by human staff.

Conclusion

Clients have to wait when the staff checking the information, and they don't know how much progress has made.

Open New Account

Clients are unfamiliar with the questions; they might not be willing to accept the reason when their answers rejected.

Merge the redundant procedures The work for the clients and staff are distributed in separate procedures. In some parts of the transaction, clients have to wait when the staff is working, and staff also need to wait when clients are preparing the information. Hence the time cost will be reduced if the clients and staff can be both working at the same time.

Adjust the sequence of procedures As a compulsive requirement, the checking of identification file should be done at first. Some clients might have the wrong files and the time they had spent previously would be wasted. Identification file should be checked at first in order to save more time for the clients who have the wrong files. It will make more time for staff to collate the information, too.

Digitize the instruction and the input method The identification file is a huge obstacle for the clients from mainland China. The Introduction is not simple enough. Presented on screen with the image, it will be more clear for the clients. The input would cost much less time by scanning instead of typing.


52

Testing

Bank of China (Hong Kong)

Testing

Submit Identification File

Scan ID card

Scan File

The primary info in the ID card will be collected by scanning. The rest of the info will be collected after the authentication finished, in order to save the time for the clients who might have the wrong file in the first place.

15 People

Time

78%

18s

4s

Satisfaction

Scanning speeds up the input and allowed staff to collate the info at the same time. It also identifies the mistakes in the files faster.

4.9

4 Time

Pass Rate

Satisfaction

82%

14%

22%

35s

9s

73% 87%

3.7

4.5

3 Collate Info

20%

4.1

2

Collate Info

1

Sample Size

Input Identification Info

Input Basic Info

For the staff of the bank, scanning provides the information of the file much more efficiently, which simplified the work for collating.

Input Personal Info

》 The necessary info can be input here during the collating.

Time

Satisfaction

39%

20%

18s

11s

4.1

4.8

Total Time

Pass Rate

Satisfaction

19%

11%

24%

75s 61s

81% 92%

4.2 4.7

Time

260s

105s

60%

Pass Rate

60s

73s

13%

Satisfaction

3.8

4.7

24%


53

Interface

Banck of China (Hong Kong)

Interface

Instructions

Scanning

Preview

Requirements for application are presented clearly at the beginning. Clients can check their materials conveniently.

There are detailed animations helping clients to operate. The complete steps in the account opening will be listed on the left, providing the feedback that illustrates the process.

Clients can zoom the picture of their material and double check. They can also ask for help from the staff by tabbing the button on the right.

》

》


Individual Project

UX Design UI Design

May 2017 to July 2017


To find more surprising music in an enjoyable and concise way

05 Xiami Music


56

Background

Miami Music

Background

Direct Massages Community

Comment

"IT'S TOO NOISY." Meme Live Broadcast

Advertisement Seeding

Introduction

Problems

Xiami is a music streaming service that integrates many redundant functions. This project is aimed at the simplification of the mobile client, to facilitate the user experience and strengthen the distinguishing advantages it has.

In order to become more competitive, service providers added a lage number of features to their mobile applications, such as comments, music video, and live webcast. The social elements are excessively emphasised in the mainstream online music plantforms, resulted by the rapid growth of the impact of social media. Howerver, these functions has become the distractions for the users who are simply focusing on music.


57

Users

Miami Music

Users

Characteristic

Accesses to New Music Suggestions 37.4%

Need

TO FIND MORE SURPRISING MUSIC TO THEIR LIKING CONTINUOUSLY IN AN ENJOYABLE AND CONCISE WAY. TO ACCESS THEIR COLLECTION WITH ORDER AND CONVENIENCE.

The statistics demonstrate the suggestion is one of the significant ways for users to discover more music. On the contrary, the social community in Xiami is not very popular. Over one-third of the users showed interest in music suggestions, which is the distinguishing feature of Xiami. These users could be defined as individuals of the young generation who have already developed their personal preference to music and familiarized themselves with more than one artists and music genre. These users focus on the genres rather than the music charts. They seek recommendations of higher quality, instead of chasing for trends and hits. The accuracy of the music suggestion will be the primary factor when they are making decisions. When their collections become larger, there should be convenient methods provided for users to arrange them.

www.wenjuanxing.com

Artists

Playlists

29.7%

17.1%

Others

Charts

5.1%

52.8%

Favorite Features of Xiami Personal Music Suggestions

40.7%

High Quality Audio

39.5%

Accurate Information

38.2%

Sharing

23.4%

Social Community

17.3%

Others

7.2%


58

Users

Miami Music

User Journey Map

Awareness

First Use

Sign up/Sign in

Discover

Play

Like/Download

View Collection

Share

Actions

Learn about Xiami from social media/friends/ads

Download the app and be ready to use it

Create a account to access to more functions

Browse the content that is suggested

Play the music that interests the users

Add the music to one's collection or download it

View the collection/ play the music in the collection/edit the collection

Share the music on social media

Thinking

What kind of app is it? How it will help me?

Do I need to learn how to use it? Can I get familiar to it in a short time?

How long it will take? Is it necessary to sign up? What can I get after this?

What is the reason for these suggestions? Do I have enough time to listen to them?

What else can I do while the music is playing? Do I have enough information about this song/album/artist?

Where can I access to the songs I liked or downloaded? Will this interrupt what is playing?

Can I easily find the songs that I liked before? Is my collection arranged clearly enough?

Will the songs I shared be conveniently accessed by others?

Feeling

Expecting for more attractive functions and features

Confusing about the functions and the way how content is presented

Tired of the numerous steps of signing

Expecting interesting content from the music suggestions

Enjoying the music and expecting for more

Excited for finding the music to their liking

Disappointed for not finding the target songs efficiently

Happy to share the music with friends

Pain Piints

Ads are boring and awkward

Features of Xiami are not clearly presented

The processes of signing are interminable

Suggestion are not accurate enough

The playlist might be confusing during the switching between different playlists

Enlarging the collection might be a disatracion for

The arrangement of the collection with a large number of songs might be difficult

The way of sharing is not interesting enough

Opportunities

Provide attractive contents for advertising

Allow unregistered users to try more functions before they sign up

Simplify the process of signing up

Provide more methods to present the suggestions and improve the algorithm of suggestion

Provide a better way to check the playlist playing and played

Offer suggestions according to the download list

Provide different filters in collection and present more information

Provide more interesting methods for music sharing


59

Insight

Miami Music

Insight

simplify /ˈsɪm.plɪ.faɪ/ verb [ T ] to make something less complicated and therefore easier to do or understand

PLAY IT, LIKE IT

EVERYTHING IS A RADIO

Personal music suggestion can create a virtuous cycle. When users are adding more songs and artists to their collections, there will be more data for the algorithm to provide a more accurate suggestion, which encourages users to explore more.

Radio creates an immersive listening experience with countless tracks playing randomly. It's also a smart way to reveal users' taste because it can record what is not their types in a natural way — when they switch to another channel. Every song, every artist, even every single user can become a radio, compose by the relevant songs in the same style.

LISTEN MORE, TALK LESS

Listening together is a better solution for social in a music community, rather than starting a conversation. The connection between users is critical. Developing a network of real music fans brings more possibility than the algorithm. The social element should be limited within the frame of music sharing.


60

Infomation Architecture

Miami Music

Home Page (Today)

Track List

Daily list

Followling

Following Artists (Timeline)

Information Architecture

Album Page

Play all

Player Page

Track Menu

Play next Add to playlist Download Like Share Album info Artist info

Album info (name/artist/cover/brief) Tracks info Play all Player Page Tags (add) Download Like Share Comments Suggestions (artists/albums) Track Menu

Artist Page

Artist Page Following Uesers (Timeline)

User Page

FavoriteTags (Timeline)

Track List

Playlist suggestions

Playlist Page

User info (ID/proflie picture/breif) Follow Common likes Common Likes Page Collection User's radio Radio Page User's playlists

Player Page Play all Playlist info (brief/creator) Tracks info Tags Download Like Share Suggestions (playlist) Comments Track Menu

Tracks Albums Artists Playlists

Artist info (name/photeos/brief) Artist radio Radio Page Popular tracks Albums Tags (add) Like Share Comments Suggestions (artists)


Personal Page

Player Page

User info (ID/proflie picture/breif) Following/follower Collection Collection Page Play my radio My playlists Edit Recent played Track List Downloaded tracks Track List

Play/pause/forward/backward Repeat/shuffle Progress bar Radio Lyric Tags (add) Album Page Album info Artist info Artist Page Download Like Share Comments Playlist Playlist Page (Now Playing) Add to playlist Suggestios (artists/albums/playlists)

Search Page

Associative-word search History Tag Page Tag suggestions

Account Page Player Page Shuffle play Switch (tracks/albums/artists/playlists) Filter (Alphabettime/tag) Track List

Massages Edit account profile Sound quality setting Network setting Cache setting About Sign out

More Recommendations Radio Page

Tracks info Sorting History

Favorite tags/Tag category

Play/pause/replay/forward Progress bar Radio Lyric Tags (add) Album info Artist info Download Like Share Comments Playlist Add to playlist Suggestios (artists/albums/playlists)

Shuffle play Related songs Related aartist Related albums Related playlists

The architecture is trying to maximize the frequency of music suggestion, providing the recommendation in every scenario. Hence users can discover more music they love continuously.

Less Distractions The structure of different functions is simplified to help users focus on music. Operations on tracks or albums are stowed in the second menu. Only two tabs remain in the home page, which are suggestion and collection.


62

Wireframe and Flow

Miami Music

Wireframe & Flow

Home Page: Today

Daily List

User's Page (Visiting)

Common Likes

Radio Button

The overlap between the user's personal collection and collections of the others is presented here, in order to help the users find more music through the people who share the same taste with them.

Hovering Controls

Following

Every user has a personal radio that can be played by other users. The radio consists of user's collection and the music in a similar style.

The homepage is composed of different types of personal suggestions, emphasizing the customization characteristic of Xiami's music service.

There are also radio buttons in pages involves artists and tags for each genre. The song itself is also a radio, which contains the other similar songs.

The social element is narrowed to a simple tab in the following section, which is oriented towards music. There is no direct message or other interaction between users as the distraction.


63

Wireframe and Flow

Miami Music

My collection

My Account A detailed filter is introduced to help users arrange their collections containing a huge number of songs. Sorting can be realized by both time order and alphabet order.

Home Page: Me

My Playlist

Recent According to the different importance, the filter is weakened and takes less area in recent page.

User's info and music collection are presented here. The album covers of the latest liked songs and the cover of user's playlists take a relatively huge area in this page, to create a sense of achievement and encourage them to enlarge their collection.

Downloaded

My Playlist (Tracks)

My Playlist (Editing)


64

Wireframe and Flow

Miami Music

Artist

Artist (Info)

Artist (Songs)

Artist (Albums)

Album

Album (Info)

Playlist

Swipe to view info

Suggestions In each pages of artist, album, and playlist, there are suggestions based on the items that users are viewing. Sufficient suggestions are presented for users to keep exploring for new music. Comments Comment area is placed at the bottom of the pages, in order to weaken the sense of social community. Users are not encouraged to leave long comments, and not able to reply the comments from others.

Album Suggestions

Artist Suggestions

Playlist Suggestions

Playlist (Info)


65

Wireframe and Flow

Miami Music

Player Page

Radio Page

Lyric

Tag Page

Search Page

Tap to view lyric Playlist (Now Playing) Playlist (History)

Radio mood chooses a different way of control, in order to strengthen the feature of continuously music playing, as a character of the traditional station. More covers can be seen, encouraging users to keep listening. Covers are also functioning as "next track", realized by swiping left. "Previous track" is replaced by "replay", which is used less frequently in radio mood when users are seeking new music. Swipe down to go back to the original player.

History tab in playlist records every track just played. It helps users to locate the previous tracks when they are shuffle playing a playlist with a huge number of tracks, or using radios.

Tag Page


66

UI Design

Miami Music

UI Design

BRAUN SK 55 PHONOSUPER

Colors #FD6906 #D6D4D4

Typeface

San Francisco

The design of the interface was inspired by the last product of the Braun SK Phonosuper range, the SK 55. It was a masterpiece of industrial design, created by Dieter Rams and Hans Gugelot in 1963. Phonosuper was a combination of the radio and record player invented by Braun. Compared with the similar products at that time, it was more like a modern product instead of furniture, which was realized by the distinguishing new contemporary language of design. The material used was progressive, including powder-coated sheet metal, tasteful elm panels, and unprecedented, plexiglass. By reconstructing the visual elements of SK 55, the design of the interface was trying to present a salute to this classic work of design, and to the incomparable contribution of Braun and its designers.


67 UI Design Miami Music


Individual Project

Branding Design VI Design

March 2017 to April 2017


To develop a more elegant Chinese traditional fast food brand for the young middle class

06 Qingfeng Dumpling Shop


70

Background

Qingfegn Dumpling Shop

Background

Comment

3 .5

12.1% 35.3% 44.4%

6.0% 2.1%

Nothing Special

Qingfeng Dumpling Shop is the chain dining brand mainly serving the Chinese steamed dumpling and other Chinese fast food. Started in Beijing, 1948, it has become a dining brand with 314 branches in 11 provinces of China, 260 of which located in Beijing, up to 2015. The nationwide average daily customer flow reaches 170,000 and amounted to 62 million a full year, which makes sales about 1 billion yuan.

www.qingfeng.com www.dianping.com

Cost-effective

Low Price

Not Very Tasty

Qingfeng has not required much positive compliment from its customers. The comments reflect the lack of character. The food and the service are not impressive enough, also the branding strategy is rough, without any clear image developed. All these elements lead to a mediocre performance in the market.


71

Background

Qingfegn Dumpling Shop

Customers

Age

Perfession

Student

0-25

37.7%

57.4%

Office Worker 34.4% 26-35

27.8%

36-45 46-55 65-65

Civil Servant

9.8%

9.2% 1.9%

Teacher

8.2%

3.7%

Others

9.8%

Jiang Jinpin, The Research on the Qulity of Servies of Qingfeng Dumping Shop Based on KANO Model

The main customers of Qingfeng Dumpling Shop are college students and the young middle class, who are pursuing higher life quality. The reason for them to choose Qingfeng is the short distance and reasonable price, yet the image of Qingfeng is not associated with their ideal lifestyle.


72

Competitors

Qingfegn Dumpling Shop

Competitors

Brand

Orientation

Customer

Feature

Comment

Operation Scale

To become a worldwide famed tradtional Chinese dining brand

Tourists and the local customers

Expensive, longestablished, well-known, selling fast frozen products

Low cost performance, poor service quality

About 40 brunches, 30% gross profit rate, �0.1 billion annual revenue

The world-renowned mini soupy bun

High-consuming group and tourists

Delicious, expensive, oneMichelin-star restaurant

High quality service and food, expensive

About 80 brunches, 10% gross profit rate, ¥1.3 million annual revenue

Delicious and healthy Chinese fast food

White-collar workers and students

Providing online order and delivery service, serving midnight snack

Nutritious, healthy, and tasty

Refined Taiwan fast food

White-collar workers and students

Providing online order and delivery service

Reasonable price, mediocre food

About 300 brunches, ¥17million annual revenue

To be a respectable classic Oriental food brand

Young people and students

Youth-oriented brand image, creative dishes

Reasonable price, tasty, elegant environment

About 140 brunches, ¥0.2 million annual revenue

Fair price and convenient service for the middle class

White-collar workers and students

State-owned business, low price

Reasonable price, mediocre food and service

About 300 brunches, ¥1million annual revenue

Goubuli

Dingtaifeng

About 600 brunches, ¥30 million annual revenue

Kungfu

Yonghe King

Baobao

Qingfeng

China Chain-Store & Franchise Association (CCFA), Research on the Development of the Franchise Chain Industry (2015)


73

Competitors

Qingfegn Dumpling Shop

Branding Comparison

Goubuli

Dingtaifeng

Kungfu

Yonghe King

Qingfeng

Baobao

Chinese traditional fast food brands have very similar branding strategies and visual designs. Same colors and elements are overused by most of the brands including Qingfeng, which lead to the lack of a highly recognizable identity. These elements are not attractive enough for the young middle class, who have more interests in the modern, fashion, and urban style of design.

New emerging brands, such as Baobao, have gained rapid commercial success by establishing a younger and smarter brand image.


74

SWOT Analysis

Qingfegn Dumpling Shop

Swot Analysis

0 T

S

Strength

Weakness

A large number of branches, reasonable price, mature and standardized production techniques Chinese traditional elements in the brand image

Lake of distinction among the competitors Lake of brand awareness, rough visual design Weak advertising on traditional media

Providing online order and delivery service Developing exclusive delivery app and membership service

Increasing the advertisements on social media and other new emerging platforms

Emphasizing the unique traditional elements as the brand characteristic Refining the Interior and storefront design Improving the taste, inventing new flavors for dumplings

Creating a younger brand image, demonstrating the higher quality of food and service in branding

W

Opportunity

The development of the social network has brought more platforms for brand promotion the emergence of mobile payment and delivery apps are leading to the increment of sales

Threat

More youth-oriented brand is emerging Western fast food brands are more attractive Customers are more demanding for the taste and quality


75

Branding Concept

Qingfegn Dumpling Shop

Branding Concept

TO DEVELOP A MORE ELEGANT CHINESE TRADITIONAL FAST FOOD BRAND FOR THE YOUNG MIDDLE CLASS

The new design of branding will meet the customers' need by linking them in traditional Chinese art to the urban fashion lifestyle and emphasising the craftsmanship, which associates to higher service quality. The major problem in the existing branding is the asymmetry between the brand image and customers' expectation. The main customer of the brand is college students and the young generation of the middle class, who hold stronger consumption capacity in recent decades. They are encouraged to demonstrate their promoted lifestyle by choosing the brand that can be distinguished from others.


76

Logo Design

Qingfegn Dumpling Shop

Logo Design

Ideation

Chinese Calligraphy

Feng Chinese Character

Dumpling


77

Color Variations

Qingfegn Dumpling Shop

Usage Guidelines

Logo and Logotype

4B 3A

3A

A

20B

A

Construction Guidelines

10A

4B

B

3A

25A

B

20B 3.5B 4.5B 4B 4.5B 3.5B

20B 4A

20B

4B

10C

2C

5C

4B

C 5C

11C

C

3.5B 4.5B 4B 4.5B 3.5B B

B

20B

11A

20B

11A

20B

5C

20B

Clear Zones

5C 44B

27.5A

25A

11C

68B

17C

68B 44B


78

Color Variations

Qingfegn Dumpling Shop

Color Variations

#FFFFFF R255 G255 B255 C0 M0 Y0 K0

#150300 R21 G3 B0 C78 M83 Y90 K80

#624D43 R99 G78 B67 C64 M68 Y71 K23

#DCB771 R220 G184 B113 C16 M30 Y60 K0


Qingfegn Dumpling Shop

Pattens

79

Patterns


Website and Mobile Client Qingfegn Dumpling Shop

Applications

80

Applications


Qingfegn Dumpling Shop

Applications

81

Business Card and Membership Card


Qingfegn Dumpling Shop

Applications

82

Packages


Qingfegn Dumpling Shop

Applications

83

Menu and Tableware


Thanks


https://www.behance.net/atomusk7649


An Interaction Design Portfolio by Huang Jingyuan (2017-2018)  
An Interaction Design Portfolio by Huang Jingyuan (2017-2018)  
Advertisement