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.