2020
颜宇翔 Blake YAN 交互設計作品集 Interaction Design Portfolio
關於我 ABOUT ME
我擁有豐富的設計經驗，熟練Sketch, Principle, AutoCAD， Adobe系列等多種設計，建模⼯具。熟悉 Arduino開發，對 C語⾔，JSON有⼀定了解。⼯作期 間，我曾服務/對接匯豐中國，⿆當勞中國，吉祥航 空，中國平安，威⾺汽⾞，⽇本BUZZ LIFE等多家公 司，為他們提供數字化策略設計。
教育經歷 Education
⼯作經歷 Work
⾹港理⼯⼤學 交互設計碩⼠
上海尚器設計有限公司 UX/UI設計師
The Hong Kong Polytechnic University Master of Design Interaction Design
Shanghai Chinge Design Co, Ltd. UX/UI Designer
2019.09 - 2020.11
2018.08 - 2019.08
⻄澳⼤利亚⼤学 整合設計
深圳肅⽊丁建築事務所 建築師助理
University of Western Australia Exchange Program Intergrated Design
Shenzhen Swooding Architects Architecture Assistant
2017.02 - 2017.07
2017.08 - 2017.09
中國礦業⼤學 建築學⼠
福建省聯盛建築設計有限公司 建築師助理
WhatsApp 62174839
China University of Mining Technology Bachelor of Architecture
Fujian Liansheng Architect Design Ltd. Architecture Assistant
Email blakedesign@foxmail.com
2013.09 - 2018.07
2017.01 - 2017.02
I have rich experience in the design area, familiar with Sketch, Principle, AutoCAD, Adobe, and different illustration and modeling tools. Familiar with Arduino IDE. I have been worked with HSBC China, Macdonald's China, Ping An Insurance Group, Junayao Air, Japan Buzz Life, WM Motor, and other companies to help build their digital solutions.
實習
實習
Content
1
Research Skill
3
UI Design
5
Space Design & Modeling
BUDG - Spending Intervention for Chinese Young Generation Jump To Project
Juneyao Air Global Website Redesign Jump To Project
City Park - Planning for Zhengzhou University Science Insustrial Park Jump To Project
2
User Participated Design
4
Prototyping & Coding
EMODY - Emotion Education for Preadolescent Jump To Project
Work of AssRT - Making Fun of Modern Art Jump To Project
1 BUDG - Spending Intervention for Chinese Young Generation School Project (Personal)
BUDG is a research based project which involves a high proportion of literature review and a small behevior experiment. The design aims to intervene and control the Chinese young generation’s personal spending, to build a rational ďŹ nancial habits.
Background
Many young people in China want to save money, but lack of the capability. 2019 White Collar Savings Status in Shanghai
30%
2019 Single After 90s Savings Status
28.0%
30%
25.35% 23.00%
20%
17.6%
20% 14.7%
10%
0%
0-1k
* ResourceďźšZhaopin.com
1k-10k
14.74%
10-30k 30-50k
>50k
0%
after 90s save money every month * Resource: Alipay
10%
6.3%
0
16.17%
20.74%
90%
0
* Resource: Zhenai.com
0-10k
10k-30k 30-100k >100k
Most young people are trying to save money, but about half of them only have small amounts of savings
Target User Research
Young people tend to have more difficulties in controlling their personal spendings. Have you ever felt being “poor”? Yes 88.89%
What spending can be reduced? No 11.11%
42.86% don’t know where the money goes
What is the key reason of being “poor”? like spending <25 25-29 30-35 36-50 >50
Eat
Clothes Game
Electronic
Shopping
Beauty
Social
low income & others
25.87% consider the money need to be controlled
Hedonic and hedonic related daily commodity expense should be controlled
Literature Review
How to make spendings more “felt”? Mental Account
Accessible Account Effect
Ratio Bias
Help user to build a saving target which is related with future living plan, to reduce the money which is willing to be spent.
Guide users to access smaller amount of mental account, thus for user to have a feeling of the product is more expensive.
Use ratio and absolute numbers to remind user’s spending amounts, make user feel they spend a larger amount.
Perspective Theory
Double-Entry Mental Account
Keep reminding the loss of money for consumption, rather than the value from the products, emphasize the loss.
Emphasize the decreasing of money right after the payment, increase the pain of paying.
Design Strategy
1
Build A Smaller Mental Account For Daily Expense and Hedonic Expense Use the APP to set up daily expense and hedonic expense budget plan for users, and record spendings
2
Lasting Visual Reminder Use phone case to support a lasting visual reminder for the using status of the budget
实验与采访 Experiment & Interview
Strategy Adjustment
How budget plan will affect users? 1
Ask for participants’ willingess to pay for commodity product and hedonic product.
2
Users can adjust the recomend budget amount according to self situations.
3
Ask for participants’ income status, and set a saving target for them, support a budget plan according to the target.
Ask if participants have changed their willingess to pay and if they have any thoughts
Insight
Most participants will use the average amount of the recommendation and their real spending as the final budget
The rocommendation is higher than some participants spending habit, which increse their willingness to pay.
When the recommended budget is too much lower than the participants’ habits, they were depressed and tend to give up
Phone case design
Light Strip Synchronize
The light strip will light up according to the proposrtion used of budget
Connect
Use Lightning to connect
Light Strip Light Up
The light strip in the phone case will light up every time the screen wakes up
Key Features
01 Budget Planning
1
2
Collect information
Build a target
Ask for userâ&#x20AC;&#x2122;s income status and current spending habit
Help to build the saving mental account which is realted to future living plan
3
Recommend budget plan Recomment a rational budget plan for user according to the ďŹ nancial status and saving target (user can edit the recommended amounts)
Key Features
02 Expense Amounts Reminder 1
3
Light strip & permanent notification reminders By using the instruction lights on the phone case and permanent notiďŹ cations, let the user can know the budget status wihtout entering the app
Show how much is spent Emphasize the spending amounts to increase the feeling of loss
2
Show percentage and absolute amount
For hedonic expence which percentage usually feels smaller, use absolute numbers to illustrate, for daily budget, use percentage
You have spent 62% of daily budget, please be thoughtful for next spending!
Key Features
03 Quick Record
3
Quick delete
Swipe left to choose to delete the quick record item
coffee
¥ 28
Meals
daily expense
hedonic expense
commodity expense
self development
relation expense
1
Five Spending categories Set the first-level spending categories according to the study of The Implicit Structure of Mental Accounting among Chinese People
¥ 52
Daily expense
Amount
¥52 Time
8th, Aug
Category
meals
Record
2
Two steps recording
Test & Iteration
Cognitive walkthrough with 4 users Differnt users have different frequency for hedonic spending
Users may forget the left time for the hedonic budget balance
The time unit of the hedonic budget can be customised
The time period of the hedonic budget will be specific
The merchants record is not important for users, and make record process seems more complecated Remove the input area for merchants
hedonic budget - JUN-MAR
Merchants hedonic budget
ÂĽ 2,000
/ 3 months
?
edit
Text here.
Design Deliverable
View the interactive prototype & all screens in invision Click here
Check the demo video Click here
2 EMODY - Emotion Education for Preadolescent School Project (Team) | Role: User Research & APP Design
EMODY is a gamification platform which aims to enhance the communication between parents and preadolescent. In our study, we found children’s emotions are highly relys on their interaction with their parents, which will have key effect on the emotion education. We hope to help them in communication to learn to deal with their emotions in there preadolescent.
Background Emotion Education Childhood
In 2017, about 13% population globally is suffering from mental disorders
38% The increasing percentage of people who is suffering disease burden due to mental disorders
Mental Disorder Adult
Significant mental disorders challenges Improve the situation emotion education in their preadolescent
* Resource：MENTAL AND SUBSTANCE USE DISORDERS - SEX: FEMALE - AGE: ALL AGES
Culture Probe
Research on Children
Field Observation
Workshop
Prototype
Do children understand different emotions? How they express, release? We recruited 5 participants (ages from 11-13) :
Childrenâ&#x20AC;&#x2122;s feelings have strong relativeness with parents.
Flip Cards
Emotion Bag
Emotion Diary
Let the children express their understanding for eight basic emotions in th ecards.
Support a bag and small notes for children to release any bad feelings they experienced.
Ask children to record the mood of the day and write down the reasons.
Children can mostly identify two sets of emotions: happiness and sadness. Limited understanding for emotions have limited their expressions of how they feel.
Research on Children
Culture Probe
Observation on off-school situation
School
Preadolescent
School is the place where children spend most of their time besides home (with parents), thus, we choose to observe the scene which children contact with both parents and school (claasmates), to see the interaction with parents.
Workshop
Prototype
We found
1
Parents
Field Observation
2
Children reveal depressions after seperating with friends and go back home (or leave with parents). Parents do not respond to childrenâ&#x20AC;&#x2122;s emotional reactions.
Research on Parents
Culture Probe
Field Observation
Workshop
Prototype
What parents think about their relationships with children? ACTIVITY 1.
Know parents’ knowledge about eight basic emotions
ACTIVITY 2.
Know parents’ daily schedule of spending time with children
ACTIVITY 3.
Write down parents best and worst moment with children
ACTIVITY 4.
Support Scenario Cards (collected from Probe and observation), let parents choose their feelings and ways of dealing
We recruited 5 parents who have kids between 11 to 13:
1 2
The society pressure sometimes make parents have no extra effort to care children’s feelings Parents are lack of emotion knowledge, they feel helpless about dealing with kids’ emotion properly
Insights Conclusion Design Criteria
1
Parents suffer from the pressures from the society that their kidsâ&#x20AC;&#x2122; should being successful, they need to be responsible for their growing.
1
Create communication opportunities, parents and children can have agreement in lives.
2
Parents feel helpless because of the shortage of knowledge.
2
Enhance the understanting from each otherâ&#x20AC;&#x2122;s point
3
The negative feeling from parents reflec on childrenâ&#x20AC;&#x2122;s living environment.
3
Support emotion knowledge trainning both for parents and children
Design Deliverable
01
Culture Probe
Help parents to know children’s interests through discussing activities together Pick one scratch cards we support every weekend to get “theme of the weekend”, we will suggest corresponding activities, let parents discuss with children to decide which to join.
9:41
Good morning, Lee! Weekend Adventure
END WEEKNTURE ADVE
WEEK
E
ADVEN ND TURE
Charade WE
EKEND
TURE
ADVEN
Emotion Bottle
END WEEK TURE ADVEN
WEEK
E
ADVEN ND TURE
Field Observation
Workshop
Prototype
Design Deliverable Charade
02 Exchange role-play, deeper the understanding for each other We support “parents scenario” and “children scenario” two card sets. Parents and children exchange roles to play, let each other guess what they are playing
04
Design Deliverable
Use scenario test to educate parents and childrenâ&#x20AC;&#x2122;s emotion knowledge
03 Release emotions, our experts will support help after a few days.
Emotion Bottle
You have got a reply, check here!
My Coins
90
05 Share activities in the community to get coins and redeem rewards
Redeem
Frozen II (2D) Family Movie Sets 180 coins
All Cinema
3 Juneyao Air Global Website Redesign Work Project | Role: UX/UI Design
Due to the requirements from the expanding of global business, Juneyao Air is looking for interaction optimization and new visual design for their global website, seek for more eďŹ&#x20AC;ective using process and stronger branding image.
Redesign Target
1
2
3
Clearer information hierarchy
Unite the visual style
More professional visual effect
The previous design display too many info and too many different font sizes and colors are used, which weaked some important information.
The previous design mixed skeuomorphic and flat design, different styles shadow and icon were used for different function modules.
The previous design used many colors. In new website, only brand theme color can be used, aims to build a more professional branding image.
PREVIOUS JUNEYAO WEBSITE
Homepage Redesign
March 2019
Put notification and booking operation area together
1
NotiďŹ cation is closely related with usersâ&#x20AC;&#x2122; travelling plan, put the column together with the operation area to make it more noticeable
Adults (Age12+)
1
Children (Age2-11)
0
Infants (Age0-1, on lap)
0
Confirm
Unify visual styles for different offerings but keep the hierarchy at the same time
2
2
April 2019
SUN
MON
TUE
WED
THU
FRI
SAT
SUN
MON
TUE
WED
THU
FRI
SAT
26
27
28
29
30
1
2
26
27
28
29
30
1
2
3
4
5
6
7
8
9
3
4
5
6
7
8
9
10
11
12
13
14
15
16
10
11
12
13
14
15
16
17
18
19
20
21
22
23
17
18
19
20
21
22
23
24
25
26
27
28
29
30
24
25
26
27
28
29
30
Flights Redesign
London To
New York City
1
Round Trip Adult(s) 1, Child(ren) 1, Infant(s) 1
Departure
Fold search area Reduce distractions for users and save area in the page.
Return
13:40 JFK Change
Fri, 18 Jun, 2019
Sat, 19 Jun, 2019
08:50 LHR
2
Mon, 20 Aug, 2019
13:05 JFK
Wed, 21 Aug, 2019
09:20 PVG
+1day
John F. Kennedy International APT, New York
Pudong International APT, Shanghai
Wed, 21 Aug, 2019
Wed, 21 Aug, 2019
Pudong International APT, Shanghai
London Heathrow APT, London
12:20 PVG
19:20 LHR
Return Mon, 20 Aug, 2019
13:40 JFK
Wed, 21 Aug, 2019
09:20 LHR
Price Detail Passenger Type
Remind users with red dots for lowest price
Adults
Total Per Passenger
Price Detail
Total
GBP
1,906.22
Next
GBP 1890.22
Ticket Fares
GBP 1541.22
Taxes & Extra Fees
GBP 321.22
- Air Passenger Duty
GBP 120.22
- Passenger Service Charge
GBP 30
- Carrier Imposed International Surcharge
GBP 30
Number of Passengers
1
Currency Exchange Reference Passenger Type
1 USD equals
Total Per Passenger
671.6 CNY
Fold flight detail
100
3
671.6
Fold less important details so more flights can be shown in one screen.
GBP 1890.22
Ticket Fares
GBP 1541.22
Taxes & Extra Fees
USD
GBP 321.22
- Air Passenger Duty
CNY
GBP 120.22
- Passenger Service Charge
GBP 30
- Carrier Imposed International Surcharge
GBP 30
Number of Passengers
1
Update: Mar 19, 9:32 AM UTC Change & Cancellation Rules
Use different colors for different class (in hover)
Children
4
Change Fee
Cancellation Fee
7 days before departure
GBP 180
GBP 180
72hours - 7 days before departure
GBP 280
GBP 280
4hours before departure and after departure
GBP 480
GBP 480
Juneyao cannot guarantee the accuracy of the exchange rates displayed. You should confirm current rates with bank counter.
Total
GBP
2899.22
5
Sticky information sidebar Easily reviewed brief of the choosen flights’ information that follows a user’s scroll on the page
Personal Page Redesign Departure Date Range Departure Date Order Number
More Filter Options
Use red to highlight order status which need further actions
Booking Date Range
Departure Place
Booking Date Passenger Name
Search Destination
1
2
Fold part of the filter options Highlight airports and flight time For orders completed, ďŹ&#x201A;ight airport and time is the information users care most, highlight them and weak other information.
3
Fold less frequently used options for saving space
r
Ma
U
ED
UE
N
N MO
SU
ICON and mobile pages design
18 24
T A B
l
na tio a ern
G PV
C D
Int a hin
j an
dC
an inl
Ma
H
OT
ing
i
a gh
an
Sh
N u
ua
o nzh
ng Qi
o da
E F G H I J K L
25
21
20
19 26
15
14
13
12
11 17
HO
6
4 10
8 7
5
3
1
30
29
28
27
26
W
T
2
TH
27
28
4 Work of AssRT - Making Fun of Modern Art School Project (Team) | Role: Concept Design & Circuit Design & Coding
Work of AssRT aims to use a fun way to make every one have a try of generating â&#x20AC;&#x153;modern artâ&#x20AC;? pieces, and inspire people to think about it. The installation consist of two cushions for sitting and a projector to project patterns when people sit. It is a humor and a critical work.
Background
There is a real viewpoint from regular art viewers that many of postmodern and modern art is simplistic and “full of bullshit”. They assume that they， even their children’ could easily make modern art pieces, without really any effort.
The Idea
How can we use a fun and easy way to let people have a try on generating “modern art”?
Concept
What needed is “sit” Sitting down, putting in little to no effort - we use the context of gazing in the museum space. When visitors sit in our cusions, the different small nuances of pressure will transfer to artsy patterns and project in the screen.
Components
2 Projector
1 Cushion
3 Website
To archive ausience’s work online
FSR sensors in cusion
Prototype
Sense different pressures
WHITE BUBBLES
CURVES
Generate different patterns
Overlay generated patterns
ESP32 Board & Circuit
TILE PATTERN
WARM COLOR CIRCLES
BLOCKS COOL COLOR CIRCLES
CURVES
BLOCKS
ARTWORK TEXT
Circuit & Interior Support
Data Flow
User Journey
1 Initial Status
2 Experiencing
3 Leave cusions
Instruct visitors to sit when no one is experiencing
After visitors sit down, the screen start to generate the patterns
Remind the visitors the picture have been saved online, scan the QR code to check
Sit on the cusion and see what you can create.
Your master piece has been saved, review on ASART.com Your master ID:
102437
Exhibition
For the exhibition and more progress, please check the video Click to watch
5 City Park - Planning for Zhengzhou University Science Insustrial Park Work Project（Team） | Role: Concept Design & Planning & Architecture Design
Zhengzhou University Science Industrial Park is the national industrial park in Henan Province, and will become the most important school-enterprise cooperation center, 7 research center will be built. There is a large green field which cannot be constructed in the park. After the research, we decided to use the green field and design the park as a green park for the citizens in the same time.
Location Analysis
Beside with residential area, but few public space surrounded. The project locats on the east of Zhengzhou University, subway will be the main transportation for citizens to visit the park as few bus stations nearby. The site is surrounded by residential area, but lack of open activity places for residents. Thus, we want to use the green field in the site which cannot be constructed, to make the science park as a “green park” for citizens.
Subway Station
Bus Station
Traffic stations locations
Residential Area
Railway Station
Education Area
Properties around the site
Parks around the site
Map of Zhengzhou
Industrial Parks
Initial Planning
Shape the buildings according to traffic streamline.
SITE
Business center with the road with busier traffic
Set research centers according to wind directions
Confirm the entrance of human traffic
Cut the building mass with traffic streamline
Keep consistency with the urban interface
SITE
Main Road
Source of visitors
Roads which can support higher traffic load
Highway
Road network
Concept Development
Combine the form of architecture with natural landscape.
Natural landscape
Chinese traditional painting
Initial form of the architecture
Deflect the elevation to become irregular entrance
Set height difference for buildings to stimulate hills
Divide the green field with streamline
Divide the green field with streamline
Combine with the site
Park Design
Leading Entrance
Free Walk Streamline
Park Design
Research Center Design
欢迎与我联系 Waiting for your contact wechat xiaohei1225 email blakedesign@foxmail.com
:)