Interaction Portfolio by Fan Zhang

Page 1

ZHANG FAN

P O R T F O L I O 2019 - 2020


FAN ZHANG | frejazhang.design

To be a perfect person ďŹ rst, then draw casually. As a designer, Freja Zhang is a sensitive and creative person who can always put herself in others' shoes. Her passion is solving problems through unique ideas that translate into compelling design solutions and she is always looking to evolve the world of digital empathy and storytelling. Fan is always on the road of perfecting herself, aiming to become a designer with a great sense of empathy, technology awareness, and business acumen.


CONTENTS

Crush 01

An app designed for helping female beginners to overcome gymtimidation

Arome 02

A vehicle scent machine that can automatically discern users‘ moods and release different scents

Depression Museum 03

A platform for communication and mutual assistance for patients with depression

BJUT Helper 04

A web applicationthat help BJUT students to check points outside the campus

Kylin Application Store 05

A web application for downloading and organizing applications that running on KylinOS


ATTEMPT

01

Gym is a battleground of your body An app that help female beginners ditch gymtimidation and form personal training routine.

-Why I did this When I first touch the user experience world, I wanted to do a project that focused on what I had a passion for. I have been in to workout for several years during which I had met many training problems. Crush is a program helping other people who are still in the struggle to overcome obstacles and to become more confident person. UI design, UX design

Individual Project

11/2019-01/2020


-What I learned 1.Find a touchable scope is the most important thing. Too big a scope is out of one's control which makes the outcome painful and superficial, too small a scope lacks meaning, the ability of the designer is not well performed. 2. Identity the users, the more specific, the better. Make the design satisfy only a small group at first, then fan out.

-Chanllenge 1. To provide proper help without disturbing or distracting users’ training. Improper help in the gym can be an impediment instead, I came up with several ideas launched in different devices such as mobile, iPad, watch, TV screen, or even a projector on a mirror. Finally, I found mobile and watch were more flexible, less disturbing, and more universal.

2. To reveal the differences of painpoints between male and female in workout. Since gymtimidation has an apparent gender difference and females suffer more. The key point to the solution is to find the special characteristics and preferences of the female. Besides that, female interviewers did not always speak out their soft points, I should analyze the pain points behind the gymtimidation.


BACKGROUND Have you ever been to the gym looking like a helpless sheep waiting for somebody's rescue and kept asking yourself

"AM I DOING IT RIGHT?"

50 %

of Canadian women suffer from gymtimidation. Gymtimidation does more than just cause a little anxiety—it's keeping a shocking number of women at home. It is a serious problem that needs to be paid attention to. This project aims to solve this problem.

Gymtimidation

/dʒimtɪmɪ'deɪʃn/

Question To Ask

The fear of working out in front of others

https://www.ipsos.com/en-ca/four-ten-40canadians-intimidated-working-out-gym

1 2 3

What are the primary causes of female gymtimidation? How is it different from men's? What is the right fitness routine for female beginners when first trying the strength training? How to eliminate women gymtimidation?


RESEARCH Survey On Female‘s Training Habits

Interview On The Causes Of Gymtimidation

To have an overall view of the gymtimidation, I did a survey. The survey includes 3 parts: self-training definition, training preference, and difficulties during the workout.

In order to learn more training details and have a better understanding of the trainers' pain points behind the fear. Since I pay attention to the differences between males and females, I interviewed both males and females. The focus of the interview was their opinions about strength training and details of the difficulties they mee

80

responses fueled my design decisions.

6

participants

360 minutes

Causes for gymtimidation Fear of being judeged 47.2% Don't know what to do 39.6% Fear of making a fool 35.8% Be inferior of body shape 34.0% Too many opposite sex 17.2%

Trainning Preference

72.7% prefer aerobics

Self Definition

"I tried lots of motions and asked many coaches, gradually I formed a lists that fits me well."

Weige Yang 24 • female Data analyst

"If somebody can coach me, I am willing to try strength training. I don't have too much time to devote on it."

Yiyang Guo 23 • female Postgraduate

65.5%

think themselves are rookie

Tianyuan Liu 23 • male Engineer

"I was very inferior about my body shape when I first went to the gym because I thought other people were all."


DEFINE Finding Patterns in User Feedback

User Journey Map

The painpoints can be catogorized into 2 sections, mental barrier and technique barrier.

MENTALITY

COGNITIVE BIAS

I AM AFRAID OF BEING JUDGED I AM AFRAID OF BEING JUDGED I AM AFRAID OF BEING JUDGED I AM AFRAID OF BEING UpsetJUDGED I AMAwkward AFRAID OF BEING JUDGED I AM AFRAID OF BEING JUDGED Uncomfortable I AM AFRAID OF BEING JUDGED I AM AFRAID ScareOF BEING JUDGED I AM AFRAID OF BEING JUDGED I AM AFRAID OF BEING JUDGED I AM AFRAID OF BEING JUDGED

Women have more emotional questions, they care more about their body shape and are more sensitive to others' opinions.

PHASE 1

TECHNIQUE

The Wallflower

KNOWLEDGE DEFICIENCY

Aimless

The Waver

PHA

T

0%

20%

50%

DOING

Aerobic Excersice Like Treadmill,Elliptical mechine and aerobic classes

80% of time:Aerobic exercise 20% of time:basic anaerobic exersice

50% o 50% o excers

PAINPOINT

Aerobic machines are easier and more novice-friendly for beginner female trainers. They think they do not belong to the strength area. Aerobic

They start to realize that they need to move on and become itch to do some anaerobic exercise. This is the time that gymtimidaion kicks in. At this period,cognization bias dominates.

After e anaero proble techni don't f list an streng

STRENGTH TRAINNING PORPORTION

No effect

PHASE 2

Wandering

Women face more technical problems.For knowledge deficiency,it takes them more time to master the equipments and form their personal plan.

FEEL hopeful, mild

worried, uncomfortable

bo


ASE 3

The Confusionista

%

of time:Aerobic excersice of time:free-weight sice

experiencing some basic obic exercise, their mental ems begin to vanish. But ical issue matters, they form a personal workout nd always wander in the gth area.

othered, embarrassed

FEAR

MOTIVATION

Identity Models For Target User Groups From novice to intermediate, female will face 4 phases. The waver and the confusionista suffer more from gymtimidation, so I narrowed down my target users to these two groups.

PHASE 4 The Good Worker

80%

The Waver The Wallflower

Would like to try strength training but gymtimidation kicks in.

Don't realize that strength train is needed yet. Stay in cadio area securely.

1 TIME

20% of time:Aerobic excersice 80% of time:Strength excersice

They have formed a personal list and the mental and technical problems don't matter anymore. But they begin to care more about the quality of the motion and hope to have an obvious body shape change.

spirited

4

2

3

The Good Worker Have formed personal fitness list gradually. Finish the train step by step.

The Confusionista Wandering in all sort of equipments, don‘t know what to do.


DEFINE

DESIG

Persona

PRINCIPL

EXPERIENCE

REQUIREMENT

THE WAVER

THE CONFUSIONISTA

Barbara

Felicity

24 Graphic Designer

22 Undergraduate

"I would like to try some strength excersice,but I don't know what to do. I think I don't belong here!

"Am I doing it right? How can I form a personal fitness list that fits me very well?"

I have been insisting on working out for a year. My goal is to firm my ab, booty, and to relieve muscular soreness from sitting. I imitated the motions from the Internet, but I usually don't feel the right muscle and there is no effect. I don't have spare money to hire a coach, it is really hard for me to form a personal list that fits me very well. Maybe I should learn some knowledge about how muscle works. Some equipment instruction Some interested points to help her form her goal A guide to let her have an overall view of the strength train

EXPERIENCE

REQUIREMENT

I always go to the gym alone. I run on the treadmill for 40min third times a week for the last 2 months. I want to try some strength train but I feel really uncomfortable in the equipment area. People will stare at me and all sort of equipment is really hard for me. Asking others is definitely a no for me. Maybe I will still stay in the aerobic area to avoid embarrassment. If some experienced friends can teach me I will be glad. Professional technical guidance to help her feel the muscle contraction. Body muscle principle Record of the body shape change A personal plan that fits her goal

After the resea model to dem

OLD LINEST

At present, fem relationship be know which m easily fall into

NEW GOLDE

In the new mod effect has been will engage in t the environmen


GN CONCEPT

IDEATION

LE IS THE KEY

What Is The Right Routine?

arch and defination,I finally came up with a monstrate different aspects that affect female

To answer the second question, I did desktop research again. I focus on the muscle principle and female body characteristics to make clear what females should do at the very beginning of the strength training.

TREAMED MODEL

male beginners focus more on the etween the motion and the effect, they hardly muscle they are working on. And they will o gymtimidation. MUSCLE

ENGAGE

FOCUS ON THEMSELF, NOT THE ENVIRONMENT

Key Insights 1. Activate the whole body muscle groups, try as many motions as possible to have an overall experience. 2. Foucs on the large muscle groups at first, intersperse small mucle groups training gradually.

MOTION

EFFECT

Outcome

RELISH

FEEL THE CONTRACTION, RELISH THE PAIN

EN NUGGET MODEL

del, the relationship between muscle and n connected. As a result, female beginners the exercise and not pay more attention to nt.

MUSCLE

MOTION

LARGE MUSCLE GROUPS EFFECT Outcome

Back muscle Chest muscle Leg&buttock muscle

SMALL MUSCLE GROUPS Calf muscle arm&shoulder muscle Abdominal muscle

THINK

FIND OUT THE PERFECT PLAN,MAKE SELF GLOW


IDEATION

Feature

PLAN IN ADVANCE

TRY IT, LIKE IT

SEE YOUR EFFORT

Make plans in advance to avoid the situation that female don't know what to do in the gym.

Mark the motion if they like, gradually they will make a personal plan that fits them well.

The muscle distribution map is displayed and outcomes are visualized so they can see their

Onboard Page

User will enter basic information for the first time, body report and recommendation will be shown. Then the user will choose the training day and duration. At last, a personal plan will form.

Motion Library & Community All the motions will be listed at motion library motion, user can also start a single training as they like. Trainers can show experience and ask questions in the community section.


17

Design

Style Guide TypeFace

San Francisco Color

#F0485A

#11233D

#EEF1f8


COOPERATE

02

Arôme Arôme is a vehicle scent machine that can automatically discern users‘ moods and release different scents accordingly to mitigate negative emotions.

-Why I did this Arôme is the one that I did after Crush, I gathered a team and we entered the User Experience Design Award 2020. I cooperated with people from different majors and hoped to do something fun together. Guess What? We made it! UI design, UX design

4 people team

03/2020-07/2020


-What I learned 1,Your idea does not need to be unique and one of the kind, starting small and simple also works. Making a little improvement and perfection is also great! 2, As a team leader, I should give a direction first and then collect members opinion. A team discussion without a direction

-Challenge How to not distract drivers’ attention as well as smooth their mood? Driving safety always comes the first! We have spent lots of time solving this problem. The first version focused on the communication of the drivers and it turned out to be a failure, hence we overhauled the original one and began to think outside the box, finally we came up the idea that using scent to abate

How to quantificat the propotion of the scent according to different moods? The relationship between mood and scent is ambiguous, and users' reaction to the scent differs. We selected several factors that affect the scent and gave each factor different weight which is the most difficult part. We used arduino to make a demo and after several rounds of user test, we finalized our product that works the most.


BACKGROUND

RESEARCH Second Round of the Research Before Arome, we designed Carrot, a communication platform between vehicles. However, Carrot did not work so much, we haulovered and restart new research. If you want to know more about Carrot, go to frejazhang.design. In the second round of the research, we delved deeper and more specific to the drivers’ behavior and looked for a new perspective.

6

participants

360 minutes

Question To Ask 1, In which situation drivers feel distubed the most? 2, How do drivers alleviate this negative mood?

The project all began with this phenomenon

Road Rage

/ ˈrəʊd reɪdʒ /

Breakthrough 1. The causes for road rage can be catogorized into personal and environmental factors. 2. Olfactory sense is a possible solution Personality and hormone secretion

Anger or violent behaviour caused by someone else's bad driving or the stress of being in heavy traffic.

Deindividuation

Adjustible

Cause for road rage

Personal Factor Mental regression Superiority and tendency to control

Traffic jam Environmental Factor

Bad weather Live condition

Adjustible


Competitive Analysis

Desktop Research

What are the current products on the market like?

To make sure if we can go deeper in the scent field and solidify our assumption that scent can alleviate navigate mood, we made desktop research, searching for the newest paper from the

-(Seubert et.,2010; Schneider ey al.,2006; Habel et al., 2007; Rétiveau et al.,2004; Schiffman et al.,1995)

Human imaging studies have demontrated that the amygdala and OFC are activated by unpleasant or pleasant odors, consistent with their functions in emotion. -(Zald and Pardo,1997; Royet et al.,2003; Small et al.,2003)

Some odors facilitate the recognition of digust face face expressions and impair working memory while others reduce anger or improve

Before we made our product, we analyzed several competitive products(direct or indirect products), including solid fragrance or scent machine. We chose and analyzed 3 scent machines from 7 dimensions to make an in-depth analysis. Fragrance Uniqueness

Intelligent

In-depth Survey The survey aimed to gather quantitative data of users’ opinions toward scent curation and road rage, since we had already set our feet in the scent world, we wanted to know more details and

Customization

participants

23.94%

67.61% 46.48%

30.99% 7.04%

long-distance driving

scratch

navigator does not precise

overtake/change lane

traffic jam

no parking alot

others

solid perfume

do not use anything

perfume

essensial oil

Post moments

Breathe fresh air

Chat

turn on air conditioner

Check navigator

Chew gum

feel pleasure for people who smell good

Cyrano Listen to music

31.58%

Intelligent

Timeset

4.61%

Not sensitive to scent

Price

Diversity 47.89%

73.24%

71.83%

49.30% 12.68%

more confident

feel calm when smell aroma

25.35%

aroma makes me

23.03%

3.45%

21.05%

6.97%

8.95%

arouse memory when smell similiar scent

65.72%

19.73%

52.24%

78.12%

Interface

57.78%

80

Relieve Anxiety

Multi-scenario Moodo

Rena

However current products lack of personalization There are few choices and they are expensive.


DEFINE

User Journey Map

We used user journey map to clarify the mood fluctuation and used persona to narrow down our target users.

Planning

Traffic Jam

Scenerio

Overtaking/Changing lane

Accident

Arriving

unimpeded good weather

succesfully overtake great view succesfully change lane

solve quickly

arrive

Emotions

Feelings Description

Opportunity

Look up the route, weather and traffic information.

Negative mood Factor: weather

Sufering in the traffic jam for long time will arouse impatience,in which case a little abrasion will lead outburst of road rage.

Negative mood Factor: traffic jam

Fatigue driving will show up if drivers traped in a small cab for a long time, which will cause going the wrong way.

Negative mood Factor: Fatigue driving

when engaing in a traffic accident, drivers feel flusered and worried about the loss.

Negative mood Factor: accident

No park lot when arrive destination is a tricky problem and drivers will be easily get bored.

Negative mood Factor: no park lots


Data processing and information collection.

Walking Anxiety Lisa 34 · Beijing · Product Manager Position Interest Personality

Data process Target User

Arôme hardware product

Mix & Release

I have high requirements for the quality of the ambiance environment which will enhance my efficiency.

Entry Lux Stay with her kids, do Spa with friends Independant, assertive

The most difficult parts were to determine the factors that impact mood and the quantitative relationship between emotional valence and the proportion of fragrance. The factors of users’ emotions are multiple. Weather, vehicle condition, and gender determine the base tone of the scent. Facial expression and Voice based on Al determine the most two dominant emotional

Lisa is a sophisticated product manager in a big company, working overtime is usual like breathing. On the communte in the morning,she will not only talks to her childs over phones but also handle the requests of her boss. Meanwhile, Lisa pays much attention to her appereance and body shape, in her spare time, she would like to workout or go space with her friends.

Multichannel odor generator

Client1

Control the propotion

Extract feature

Quantitative analysis

Main Persona

IDEATION

Tone analysis

Mood analysis

Factors that impact mood Weather

Gender

Data processing method Felt air temperature / Air humidity Air quality / weather types

Female: flora scent Male: wood scent

Facial expression

Microexpression division Facial coding system recognition

Voice & Tone

Emotional model frequency / resonance hump

vehicle condition

Driving time Bluetooth conect

Info collection Emotion judgement Control the propotion

Client1

Fragrance Library

Emotional valence

Classification angry/aversion/happiness sad/fear/astonishment Choose the two with the largest proportions


IDEATION

Quantitative Experiment 1

Quantitative Experiment 2

We did not have a clue of how long can one drop of essential oil can last, so we made an experiment using one of the competitive productMuji scent machines. One drop of essential oil was put in different volumes of water (0ml, 20ml, 50ml,100ml), we recorded the diffuse time and holding time separately.

We moved on to test the possibility of blend essential oils and control the proportion automatically. We used Arduino as our tool and to make the experiment simpler, we only blend two different essential oils.

Relationship between usage of essential and holding

How to blend several essential oils and control the proportion automatically.

How to blend several essential oils and control the proportion automatically.

Quantitation Standard Quantity

Volume

Size

Duration

9

3 ml

17*17*14

120 360

Standard suit

Bottle ConďŹ guration

per bottle

mm

mm


DESIGN

Does It Work? ArĂ´me

Home Current Scent Current Mood color expression wave pattern Machine graphic Battery On-off Scent list

USER TEST

Mark Scent

Control

Store

Me

Surplus

New scent

Username History record

Select picture

Info

Recommendation

Emotional valence

Visualization

ClassiďŹ cation

Wave pattern

New scent

Scent name

Name Scent proportion

Control board Concentration Duration My favorite

Order

Cart Customization Empty bottle

Name

Usage

Proportion

Recommendation

6 participants were invited to test our demo, we made the three most important tasks to validate if the interface could assist the scent machine well and user friendly.

Address FAQ

Task 1 Make a new scent, control the duration and proportion

Task 2

Buy one of the empty scent in the store

Task 3

Turn on the scent machine and put this scent in your favorite list


PRODUCT

Storage Area Mix Area

Atomization Area

Battery Anti-slip Mat



ASPIRE

03

Depression Museum A platform for communication and mutual assistance for patients with depression

-Why I did this As a survivor and also a designer, the social responsibility struck me heavily and truly when a 29-year-old patient who suffers from major depression said to me “I want to save myself but I feel hopeless”. After talking with patients in the outpatient department of the hospital for several afternoons, I came to perceive the complexity of people’ s psychology under the same appearance. Hence the desire to help the depressed out of the struggle came in to my mind. UI design, UX design

2 people work

06/2020-08/2020


-What I learned 1.Behind the similar appearance are many different experiences like divorce, school violence ,career crisis etc, and there are also many different needs.Some need external help to complete self exploration while others need help to repair the trauma of childhood. So more personalized treatment is needed. 2.wThe goal of designers should be to create designs according to user needs and constantly maintain a positive and trustful relationship with users according to continuous in-depth research and observation of the markets, which is a long-term and dynamic process.

-Challengae 1. To find a suitable target user group and the right positioning of the product. Improper help in gym can be an impediment instead, I came up with several ideas lauched in different devices such as mobile, ipad, iwatch, TV screen or even a projector on mirror. Finally, I found mobile and iwatch were more flexible, less disturbing and more universal.

2. To conduct research of the depressed people and extract useful info. The needs of depressed people come in many stages. There are many stakeholders involved in the treatment process, which made it hard to find a suitable target user group and the right positioning of the product. Besides, the research of the depressed need more professional skills and methods.


·

BACKGROUND

DESKTOP RESEARCH

RESEARCH

Current situation of depression

What is the principles of depression

We concluded the needs

2/3

of the patients had suicidal thoughts

the world's biggest burden disease by 2020

The question of whether depression is a mental illness or a physical illness has not been settled in academic. I conductes a desktop research to figure out the principle of the depression and the mechanism of drugs. The depression was triggered by the low concentration of 5-hydroxytryptamine and Norepinephrine and the drug was to replenish hormones that the body is missing.

340 million patients worldwide

5-HT

emotional blunting

5-HT

supersensitive

5-hydroxytryptamine

7%

of patients receive treatment

1/10

As the world's biggest burden disease by 2020, depression put 340 million patients worldwide in pain. The program was aimed to help the depressed abate the pain through a communication platform. https://www.ipsos.com/en-ca/four-ten-40canadians-intimidated-working-out-gym

Anxiety depression

depression

of people suffer from depression

I am not alone.

emotional stability

α1 receptor

NE Norepinephrine

anxiety

wokeness

α2 receptor

cognitive improvement

β receptor

anti-depression

α1 receptor

drowsiness

α2 receptor

cognitive decline

β receptor

emotional distress

Block depression NE

320 min 10

participants

We came to the outpatient of the Anding mental hospital and spend five afternonns to talk with the patient about their condition and problems them I had met.


of the depressed into four stages Phase 1

Phase 4

Accumulate

Phase 2

Outbreak

Phase 3

Patients typically experience depression for three to four years before an outbreak. Users usually don't ask for help and body repairs itself actively.

If Negative emotions left unresolved for a long time, it will turn into depression, with physiological hormones unable to return to normal levels.

Medicine treatment and psychological consultation stablize the emotion and give patients the space to think about them self.

accommodate the medication

Social barriers

Stable

Fading

Patients gradually recover from depression when getting enough understanding and help, and patient will accept themselves.

drug side effect

high recurrent risk

Outburst Self-reflection

negative emotionpiled up

No treatment

build up intimacy

Drug Psychotherapy


INSIGHTS Relationship of the depressed

Ideal Relation Map

We focused on the patients in the phase 1 and phase 2 at first. The treatment of the depression is more like a collaboration of many people instead of one‘s single fignt. So we try to make a platform to gather people togather.

Po s Ex

iti

pe

rie

e

sh

ar

k

in

g

Cured Patients

I am peaceful with my self now, and I am willing to share my depression experience for those who are still in pain.

p gu n i ow Gr

e nc rie e p ex

tal

n Me

psychological consultant

"

"

ac

Inner Relationship

I don't think I am in that serious! I am upset about the side effect of the drug doctor gave me.Who can I talk to ?

"

fe e

db

nc

Depressed Patientrist

"

ve

1. C 2. R 3. p 4. A

It usually takes 8 to 10 times to build a trustful relationship with the patients. I am more like a supporter and a listener.

Psychiatrist

Patients should come to the hospital once a month so that I can adjust the treatment depend on their condition.

rt

po

p Su

psychological consultant

Outer Relationship

1. Mental support 2. Listen and empathize 3. Help to seld-expeloration 4. Adjust treatment 5.Condition judgment


IDEATION

Psychiatrist

Conduct experimental evaluation

Condition judgment Regularly visit prescribe medicine Adjust treatment

ke n

Po

Patients in earlier stage

Patient in ealier stage

Assistant

n ke

fe ive t i s

k

ac

b ed

ar

r

pe

Ex

ar

t en m t jus ad e t ria rop p Ap

es

c ien

He

ck ba d fee

ng

ri ha

He

ive sit o P

We attempted to establish a platform to demonstrate the impact of "building critical relationships" on depression recovery

Pour out the mood 1

Share experiences

2

Cured patients

1. Unable to contol emotion 2. Lost interests to everything 3. Shame to talk the illness 4. Lack knowlegede of depression

e ar Sh e nc rie pe ex

e vic Ad

Cured Patients

d an n tio es gg su

1.Share experience with paitient 2.Listen and empathize 3.Mental support 4.Give advice on the treatment

TIME

TOPICS

From 12/ 2019 to 01 2020

Testers can talk about anything

FORM

RECRUITING METHODS

Match and build WeChat group patient in ealier stage + cured patient + assistant

Publish recruitment information on zhihu and WeChat platforms


RECORD OF EXPERIMENTS Discover the effects of communication on emotions The characters

/

03

20

20

/ 11

/

08

20

20

/ 11

/

11

20

20

/ 11

/

13

20

20

/ 11

0 0 02 02 /2 1/2 1 /1 /1 15 16

0 0 0 0 0 0 02 02 02 02 02 02 /2 /2 1/2 /2 /2 1/2 1 1 1 1 /1 /1 /1 /1 /1 /1 22 25 28 20 18 19

0 0 0 02 02 02 /2 /2 1/2 2 2 /1 /1 /1 03 01 02

/

06

20

20

/ 12

/

08

20

20

/ 12

/

10

20

20

/ 12

/

11

2

20

/ 12

Emotional pictures

1

/

01

20

20

/ 11

2

Emotional pictures

patient at earlier stage

cured patient The point of help

Share life moments and get to know each other

Assistants

Stable patients

Observed state

1. Stable patients have more positive emotions than negative emotions

The emotional line

Prophase patient

Provide topic guidance

Prevent suicidal ideation in the previous patients

1. Patients with early stage mood swings are greater

Strongly intervene

2. The mood of stable patient was affected by the previous patients

2.Disclosure of suicidal tendencies

Regular communication, normal mood

Observed state

Persuade patients, atmosphe

Liven things

3. Stable patients begin to adjust themselves

3.Prophase patients gradually tell true stories and emotions

10

testers

5

groups

Improve safety

Reduce failure rate

4

successes

1

failures

More professional assistance and constructive advice are needed

The match needs to be refined and improved


20

THE OPTIMIZATION DESIGN Put forward the optimization conjecture of reassessment 0 0 0 0 0 0 0 0 0 02 02 02 02 02 02 02 02 02 /2 2/2 /2 2/2 /2 /2 /2 /2 2/2 2 2 2 2 2 2 /1 8/1 /1 /1 /1 /1 /1 /1 /1 17 23 25 1 19 27 21 15 16

e two active ere

s up

d

/

31

20

20

/ 12

1

The characters

2

Prophase patients

Stable patients

Assistant Psychiatrist Psychiatrist

Family

Cured patients become caregivers web

diagnosis

1

1 prescription

text web

text

web

2

2

text

web

Buy medicine

Patients take the initiative to discover the good things in their lives

web

App Psychiatrist

Observed state Assistant

App

consult

App

Assistant

Patients need more care from family and friends.

Assistant

Psychiatrist

4. Early patients get better mood changes 5. Prophase patients begin to habitually observe the beauty of life

Mild symptoms

Intensive treatment

The form Status monitoring Medical wearable/measuring device support is required

Stable period

Related sites +

Website

After recovery

+ Mobile Client

Hospital

+

Psychological Clinic The Internet


INITIATE

04

BJUT Helper Redesign BJUT Helper is a web application for the students of Beijing University of Technology to check the grades, the examination, and the curriculum in an easier

-Why I did this I sent my resume to the BJUT helper team founded by several students in computer science college, recommending myself to work as a UX designer for the project. This program was a significant trigger for the decision-making of devoting myself to the UX field. UI design, UX design

4 People Team

03/2020-05/2020

05/13/2020-06/13/2020

1,600 Daily visits

32,600 Total visits

160s Access time Per capita


BACKGROUND

FIRST VERSION Optimization From Three Aspects As the founding members focused more on data acquisition and back-end technology implementation, the user interface was unfriendly at first. Due to the time limitation, in the first version, I optimized the interface from three aspects.

Established New Styleguide

There is no way for BJUT students checking grades outside the compus. Students at BJUT(Beijing University of Technology)must log in to Campus Network or VPN (if they are outside the campus) first before they can access their grades page, which is a very cumbersome and unstable process. BJUT helper was a web application invented to help students to check grades in an easier and faster way. What is the original like? The old version concluded 2 pages and a QR code overall.

Added 2 New Functions

Redesigned the Userflow


USER TEST

WORKSHOP

Does it work?

What they want? As the founding members focused more on data acquisition and back-end technology, the user interface was unfriendly at first. Due to the time limitation, at the first version, I optimized the interface from three aspects.

8 participants

42 min

1 Look up your point of a particular class

During the outbreak of COVID-19, I held a workshop via online meeting so interviewees speak out their opinions towards the old version and to find

8 participants

120 min

Discuss Content

1. What are the problems with the function and interface of the old ve 2. Which new features do you want to apply in the new version accord

2 Aquire average grade of a selective class 3 Discontinue sharing your points

Finding We categorized the user needs into 6 sections. At last, we decided to opti relate to credit checking, which are elective course information, checking inquiry.

Findings From User Testing

Function Look up your grade of a particular class Aquire average grade of a selective class Statistical data of a paticular class Historical grade and GPA wave pattern Filter to select particular kinds of classes Professor information

Interface Mark your position in the histogram Semester Numbers change to freshman/ sophomore/etc Check hisitorial grades in positive order or reverse order Add background picture on the login page Password can be seen

Compus life

Elective course information Exam and contest

Schedule inquiry

Checking credits


IDEATION

oftware. The focus is to let their new needs.

We categorized the user needs into 6 sections. At last, we decided to optimize three core aspects that relate to credit checking, which are elective course information, checking credits, and class schedule inquiry. Go-abroad Enthusiast Recomendation of selective courses that have higher average score Chris 23 Third year Industrial design

ersion? ding to your situation?

How to reach a higher GPA? It is really important for students who are going to study aboard like me.

Postgraduate Recommendation Chaser

imize three core aspects that credits, and class schedule

Recommendation of postgraduate recommendation policy and

Chris 23 Third year Industrial design

I am very concerned about my ranking, which is directly related to whether I can get the postgraduate recommendation.

Postgraduate exam preparer Chris 23 Third year Industrial design

Personal info

I do not care too much about the GPA. I just want to know which courses I am taking are helpful for the preparation of the postgraduate entrance exam.

Postgraduate entrance examination matters that need to pay


ITERATION

DESIGN

Wireframe

The inspiration for the logo came from the BJUT hammer- a symbol of our school because every student should make their own unique hammer carved their ID number in metalworking class.

Sketch


“

REVIEW

I

am very glad to see such an aspirant team in our university. Everyone is professionally competent and self-motivated. The new version of the project is cleaner, safer in code and more dynamic in design than the old version. Xuejun Yu

Project advisor, professor of CS department,BJUT

The current interface looks much better than before! A lot of added features like selective class instruction are very useful for me. I use it almost every day. Xiaohong Wang, Freshman

A conscientious project! Bjut Helper really met our needs. I like the style of the interface very much. Zichao Li, Sophomore

It is really convenient, I can check my grade everywhere. I hope the program can make progress continuously. Ziyan Wang, Undergraduate


INTERN

05

Kylin Application Store A platform for downloading and organizing applications that running on KylinOS - an operating system based on Linux.

-Why I did this

Kylin Software

Homepage is a the most active page, we banners and cards of different size to dr attention and provide entrance for App d

We organized four relative processes in of our app store. User can downlode, un

After finishing 3 projects, I started my internship at Kylin software. The reason I chose this job was that the App Store is an entrance to all the applications, I shall get familiar with all sorts of applications which will give me a broader perspective of the UX world. Web design

Homepage

08/2020-12/2020


e used raw users’ downloading.

one page which is a special point nistall, update and see history.

Category

-What I Learned 1, Have ownership of your job and find the gaps between the departments. 2,If you think the work content is too simple or basic, be impressive.

Detail Page

-What I DId

The design team was not found so long, so I did all sorts of work. I am honored to participate in the whole progress. In the 6 months, I summarized my word into

Me

1, Writing Design Requirement Drawing (DRD). 2, Design wireframe and hi-fi according to the PRD and architecture information. 3, Communicate with programmers and adjust the interface accordingly. 4, Make application styleguide to coodinate with system styleguide. 5, Standarize the design system. 6, Design application banner and logo.


Color palette 控件主题⾊板

color-1

Color application color-2

color-3

color-4

color-5

color-6

color-7

color-8

color-9

color-10

中性⾊板

grey-1

grey-2

grey-3

grey-4

grey-5

grey-6

grey-7

grey-8

grey-9

grey-10

控件⾊板-红

red-1

red-2

red-3

red-4

red-5

red-6

red-7

red-8

red-9

red-10

控件⾊板-绿

green-1

green-2

green-3

green-4

green-5

green-6

green-7

green-8

green-9

green-10

浅⾊主题的应⽤

控件主题⾊的应⽤

@light-1

图标⾊

@light-2

tab栏上图标按钮底⾊

@color-6 主题⾊&状态默认⾊ @color-1

选中背景⾊

@light-3

tab底⾊

@color-5

悬停⾊

@light-4

左侧栏底⾊&表格分栏底⾊-2

@color-7

点击⾊

@light-5

⼯具栏&地址栏&标题栏&表格分栏底⾊-1&主题背景底板

orange-1

orange-2

orange-3

orange-4

orange-5

orange-6

orange-7

orange-8

orange-9

orange-10

控件⾊板-紫

purple-1

purple-2

purple-3

purple-4

purple-5

purple-6

purple-7

purple-8

purple-9

purple-10

控件⾊板-⻩

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

yellow-6

yellow-7

yellow-8

Slider, progress bar, scroll bar and check box 单选按钮

复选按钮

yellow-9

yellow-10

@gray-2

失效背景⾊

@dark-1

图标⾊

@gray-3

界⾯背景底⾊

@dark-2

tab栏上图标按钮底⾊

@gray-4

分割线⾊

@dark-3

tab底⾊

@gray-5

边框线⾊

@dark-4

左侧栏底⾊&表格分栏底⾊-2

@light-1 深背景字体/背景底板

@dark-5

⼯具栏&地址栏&标题栏&表格分栏底⾊-1&主题背景底板

@dark-5 浅背景字体/背景底板

⾊板

中性⾊板

⽔平⽅向-⽆标记

我是后⾯的字

未选择-默认

我是后⾯的字

未选择-悬停

我是后⾯的字

未选择-悬停

我是后⾯的字

未选择-点击

我是后⾯的字

未选择-点击

我是后⾯的字

已选择-默认

我是后⾯的字

已选择-默认

我是后⾯的字

已选择-悬停

我是后⾯的字

已选择-悬停

我是后⾯的字

已选择-点击

我是后⾯的字

已选择-点击

我是后⾯的字

不可选

我是后⾯的字

部分选择-默认

我是后⾯的字

关闭已选择

我是后⾯的字

部分选择-悬停

我是后⾯的字

部分选择-点击

我是后⾯的字

不可选

我是后⾯的字

关闭已选择

我是后⾯的字

关闭部分选择

我是后⾯的字

关闭 开始 关闭不可⽤

grey-2

grey-3

grey-4

grey-5

已滑动

普通

未滑动

悬停

不可⽤已滑动

点击

两端

上端

下端

两端

上端

下端

⽆节点

有节点

圆形

滑动条-2 有节点(控制⾯板使⽤) 已滑动

普通

未滑动

悬停

不可⽤已滑动

点击

垂直⽅向-有标尺 两端

左侧

右侧

两端

左侧

不可⽤未滑动 ⽆节点

开启不可⽤

滑动条、进度栏和滚动栏

滑动条-1 ⽆节点

已滑动

滚动条

圆形滑动条

普通

普通

反转进度条

普通 进⼊响应区

未滑动

悬停

不可⽤已滑动

点击

悬停

点击

不可⽤未滑动

普通

滑动条-2 有节点(控制⾯板使⽤)

已滑动

普通

未滑动

悬停

不可⽤已滑动

点击

不可⽤未滑动

有节点

滑动条、进度栏和滚动栏

垂直⽅向-⽆标记

This was the first time I got in touch with the design system. At first, I thought it was a Sketch Library, however, it is no more than a Style guide but so much more. The two key characters for the design system are dynamic and abstraction.

grey-6

⽔平⽅向-有标尺

滑动条-1 ⽆节点

不可⽤未滑动

单选按钮

grey-1

滑动条、进度栏和滚动栏

未选择-默认

My Comprehensive Undersanding of Design System: Dynamic & Abstactive

中性⾊的应⽤ 深⾊主题的应⽤

控件⾊板-橙

DESIGN SYSTEM

进⼊响应区

悬停

点击

进度条

进度条

右侧

A design system is not a set of deliverables like font or color guide, it should evolve constantly with the product, the tools, and people, especially in our company, the product was in its incubation phase, no things were decided, changes are inevitable. To make the system work as a guide, the system guide should be dynamic and updated in real-time. Besides that, the design system should extract specific information and abstract it into a module that can be used generally. Focus on the content rather than on its visual aspect, like Audrey Hacq stated in Medium, "Design principles are the guiding sentences that help the teams to reach the purpose of the product thanks to the design".


COMMUNICATION

VISUAL WORKS

Communicate with others In my internship, I communicate more with programmers. Designers and programmers talk different languages and there are always misunderstandings. Writing DRD is a way to describe the production with programmers' minds. I omitted all the design vocabulary and translated it into simple words that everyone can understand. Besides that, learning how programmers realize design sketch is also important. Furthermore, when disagreements occur, designers should provide more possible solutions.

Working with color is intersting I also designed many logos and banners in my internship. Working with color is an exciting and also challenging thing since I should always consider my user and choose the most appropriate one.



Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.