Interaction Portfolio of by Fan Zhang [2019-2020]

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.

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

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.

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

-What I learned

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

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. Individual Project

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.

-Why I did this

UI design, UX design

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.

11/2019-01/2020

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

RESEARCH 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?"

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

50 %

responses fueled my design decisions.

360 minutes

Fear of being judeged 47.2% Don't know what to do 39.6%

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. /dʒimtɪmɪ'deɪʃn/

participants

Causes for gymtimidation

of Canadian women suffer from gymtimidation.

Gymtimidation

6

Fear of making a fool 35.8% Be inferior of body shape 34.0% Too many opposite sex 17.2%

Question To Ask

"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

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?

Trainning Preference

72.7% prefer aerobics

Self Definition

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

FEAR

User Journey Map

MOTIVATION

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.

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 STRENGTH TRAINNING PORPORTION

No effect

Aimless

0%

PHASE 2 The Waver

20%

PHASE 3 The Confusionista

50%

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.

Wandering

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

Identity Models For Target User Groups

1 TIME

DOING

PAINPOINT

Aerobic Excersice Like Treadmill,Elliptical mechine and aerobic classes

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

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.

50% of time:Aerobic excersice 50% of time:free-weight excersice After experiencing some basic anaerobic exercise, their mental problems begin to vanish. But technical issue matters, they don't form a personal workout list and always wander in the strength area.

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.

FEEL hopeful, mild

worried, uncomfortable

bothered, embarrassed

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

DESIGN CONCEPT

Persona

PRINCIPLE IS THE KEY

What Is The Right Routine?

After the research and defination,I finally came up with a model to demonstrate 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.

THE WAVER

THE CONFUSIONISTA

Barbara

Felicity

24 Graphic Designer

22 Undergraduate

OLD LINESTREAMED MODEL At present, female beginners focus more on the relationship between the motion and the effect, they hardly know which muscle they are working on. And they will easily fall into gymtimidation. MUSCLE

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

EXPERIENCE

REQUIREMENT

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

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

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

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

EXPERIENCE

IDEATION

EFFECT

Outcome

RELISH

FEEL THE CONTRACTION, RELISH THE PAIN

NEW GOLDEN NUGGET MODEL In the new model, the relationship between muscle and effect has been connected. As a result, female beginners will engage in the exercise and not pay more attention to the environment.

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


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

17

Design

IDEATION

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.

Style Guide TypeFace

San Francisco Color

#F0485A

#11233D

#EEF1f8


COOPERATE

02

-What I learned

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

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

-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

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.


RESEARCH Competitive Analysis

Second Round of the Research

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

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

6

participants

360 minutes

Question To Ask 1, In which situation drivers feel distubed the most?

2, How do drivers alleviate this negative mood?

Some odors facilitate the recognition of digust face face expressions and impair working memory while others reduce anger or improve -(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)

What are the current products on the market like?

BACKGROUND

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

23.94%

67.61% 46.48%

30.99% 7.04%

12.68%

47.89%

73.24%

71.83%

49.30%

65.72% 6.97%

25.35%

Timeset

long-distance driving

scratch

navigator does not precise

overtake/change lane

traffic jam

no parking alot

others

solid perfume

perfume

do not use anything

Adjustible

feel pleasure for people who smell good

essensial oil

31.58%

Bad weather

Post moments

Traffic jam

Intelligent

Cyrano Breathe fresh air

Not sensitive to scent

Price

Diversity

4.61%

Chat

Cause for road rage

more confident

feel calm when smell aroma

Superiority and tendency to control

Live condition

aroma makes me

23.03%

Mental regression

Environmental Factor

21.05%

Adjustible

turn on air conditioner

Deindividuation Personal Factor

Check navigator

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

8.95%

arouse memory when smell similiar scent

52.24%

78.12%

19.73% Personality and hormone secretion

57.78%

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

3.45%

/ ˈrəʊd reɪdʒ /

Interface

Breakthrough

Chew gum

Road Rage

80

Customization

participants

Listen to music

The project all began with this phenomenon

Relieve Anxiety

Multi-scenario Moodo

Rena

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


Data processing and information collection.

Main Persona

User Journey Map

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

Traffic Jam

Scenerio

Overtaking/Changing lane

Accident

Arriving

Position Interest Personality

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

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

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.

Planning

Walking Anxiety Lisa 34 · Beijing · Product Manager

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.

IDEATION

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

Multichannel odor generator

Client1

Control the propotion

Extract feature

Quantitative analysis

DEFINE

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

Relationship between usage of essential and holding

DESIGN

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.

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

标准滴管示意图

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 Configuration

per bottle

Does It Work?

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

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.

mm

mm

USER TEST

Mark Scent

Control

Store

Me

Surplus

New scent

Username History record

Select picture

Info

Recommendation

Emotional valence

Visualization

Classification

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

-What I learned

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

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

-Why I did this

1. To find a suitable target user group and the right positioning of the product.

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

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 of the depressed into four stages

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

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.

Phase 1

Accumulate

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.

patients worldwide

5-HT

emotional blunting

5-HT

supersensitive

5-hydroxytryptamine

7%

of patients receive treatment

1/10

Phase 4

Phase 2

Stable

Fading

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

emotional stability

Anxiety depression

depression

of people suffer from depression

accommodate the medication

anxiety

Social barriers

drug side effect

high recurrent risk

Outburst Self-reflection

I am not alone. 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

α1 receptor

NE Norepinephrine

wokeness

α2 receptor

cognitive improvement

β receptor

anti-depression

α1 receptor

drowsiness

α2 receptor

cognitive decline

β receptor

emotional distress

negative emotionpiled up

build up intimacy

Block depression NE

No treatment

Drug Psychotherapy


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

fe e

db

nc

e

sh

Depressed Patientrist

ar

in

g

Po

Patients in earlier stage

psychological consultant

d an n tio es gg su

Outer Relationship

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

e vic Ad

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

e nc rie pe ex

psychological consultant

rt

po

p Su

Assistant

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

tal

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

fe ive t i s

k

ac

b ed

n ke

p gu n i ow Gr

e nc rie e p ex

n Me

Psychiatrist

r

pe

Ex

ar

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

es

c ien

He

ive sit o P

ck ba d fee

ng

ri ha

Patient in ealier stage

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

"

k

Cured Patients

"

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

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 ?

"

ve

Conduct experimental evaluation

1. Condition judgment 2. Regularly visit 3. prescribe medicine 4. Adjust treatment

ke n

Ideal Relation Map

ar

Relationship of the depressed

"

IDEATION

Psychiatrist

He

INSIGHTS

Cured Patients 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

THE OPTIMIZATION DESIGN

Discover the effects of communication on emotions

Put forward the optimization conjecture of reassessment

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

20

20

/ 12

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

/

31

20

20

/ 12

1

The characters

2

Prophase patients

Emotional pictures

1

/

01

20

20

/ 11

Stable patients

Assistant Psychiatrist Psychiatrist Cured patients become caregivers

Emotional pictures

1

prescription

web

text

web

2

2

text

web

Buy medicine The point of help

Share life moments and get to know each other

Assistants

Provide topic guidance

Prevent suicidal ideation in the previous patients

Observed state

1. Stable patients have more positive emotions than negative emotions

The emotional line

Stable patients

1 text

cured patient

Prophase patient

web

diagnosis

patient at earlier stage

2

Family

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 two patients, active atmosphere Liven things up

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

Psychiatrist

Observed state Assistant

3. Stable patients begin to adjust themselves

3.Prophase patients gradually tell true stories and emotions

web

App

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

10

testers

5

groups

Improve safety

Reduce failure rate

Status monitoring

4

successes

1

failures

More professional assistance and constructive advice are needed

The match needs to be refined and improved

Medical wearable/measuring device support is required

Stable period

Related sites +

Website

After recovery

+ Mobile Client

Hospital

+

Psychological Clinic The Internet


INITIATE

BACKGROUND

04

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.

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

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.

-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

FIRST VERSION

4 People Team

03/2020-05/2020

What is the original like? The old version concluded 2 pages and a QR code overall.

05/13/2020-06/13/2020

1,600 Daily visits

32,600 Total visits

160s Access time Per capita

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

IDEATION

During the outbreak of COVID-19, I held a workshop via online meeting software. The focus is to let interviewees speak out their opinions towards the old version and to find their new needs.

8 participants

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

120 min

Chris 23 Third year Industrial design

Discuss Content 1. What are the problems with the function and interface of the old version? 2. Which new features do you want to apply in the new version according to your situation?

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

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

Findings From User Testing

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

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

Postgraduate Recommendation Chaser

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

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

Chris 23 Third year Industrial design

Schedule inquiry

Checking credits

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.

“

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

Sketch 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

Category

05

-What I Learned

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

1, Have ownership of your job and find the gaps between the departments.

Homepage

2,If you think the work content is too simple or basic, be impressive.

Homepage is a the most active page, we used banners and cards of different size to draw users’ attention and provide entrance for App downloading.

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

-Why I did this

We organized four relative processes in one page which is a special point of our app store. User can downlode, unistall, update and see history.

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

Kylin Software

08/2020-12/2020

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

控件⾊板-橙

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

浅⾊主题的应⽤

控件主题⾊的应⽤

@light-1

图标⾊

@light-2

tab栏上图标按钮底⾊

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

选中背景⾊

@light-3

tab底⾊

@color-5

悬停⾊

@light-4

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

@color-7

点击⾊

@light-5

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

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

已滑动

普通

未滑动

悬停

不可⽤已滑动

点击

两端

上端

下端

两端

上端

下端

⽆节点

有节点

圆形

已滑动

普通

未滑动

悬停

不可⽤已滑动

点击

垂直⽅向-有标尺 两端

左侧

右侧

两端

左侧

不可⽤未滑动 ⽆节点

滑动条-1 ⽆节点

已滑动

滚动条

圆形滑动条

普通

普通

反转进度条

普通 进⼊响应区

未滑动

悬停

不可⽤已滑动

点击

悬停

点击

不可⽤未滑动

普通

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

已滑动

普通

未滑动

悬停

不可⽤已滑动

点击

不可⽤未滑动

有节点

滑动条、进度栏和滚动栏

垂直⽅向-⽆标记

Communicate with others

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

开启不可⽤

滑动条、进度栏和滚动栏

My Comprehensive Undersanding of Design System: Dynamic & Abstactive

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

滑动条、进度栏和滚动栏

未选择-默认

COMMUNICATION

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

控件⾊板-⻩

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

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.

VISUAL WORKS 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.



Turn static files into dynamic content formats.

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