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.