- 2016 -
PORTFOLIO
Hu
Xiaorui
CONTENTS
About Me
01 Pignote A clould app for quick image notes
02 QA peers A Q&A app for high school students
03 Catchball Social and Interactive ball events watching experience
05 Smog Metropolis Poster design
06 Dried fruit storybook Packaging design
07 IDEAL Kindergarten
04 Hearty living experience from inside to outside
CIS design
Westin-taipei innovative service design
08 Explorers 情境设计
About Me
Graphic Design Service Design User Experience Design Interface Design Advertising
Sheri, HU Wenzhou, Zhejiang +86 15601889035 sherihu@126.com www.behance.net/huxiaorui
PROFILE I started from Philosophy which makes me always curious and think about everything. Maybe I have taken lots of detours, but I also enjoyed unexpected beautiful scenery in this way. From Advertising, Graphic Design, Service Design to User Experience Design, I never stop exploring the human insight and from these experience, I realized that everything has its meaning. I meet interesting people and their stories during the travel, and I collect the inspiration and touching from the amazing life, which are the energies pushing me to be a better me. Now it is time to start my career, and I am totally ready for the challenge!
EDUC ATION
EXPERIENCE 2016
National Taiwan University of Science and Technology - Master of Design
2015
Focus on Graphic Design, Service Design, User Experience Design and Interface Design.
2014 The Chinese University of Hong Kong - M.S.Sc. in Advertising
2013
Focus on Creative Advertising, Art Diretion and Copywriting.
2012 2011
Xiamen University - Bachelor in philosophy - Dual bachelor in advertising Focus on Logical and Creative thinking.
Bebit taipei - Interaction Design Intern Service Design Lab - Service Design Assistant
Leo Burnett Hong Kong (1year) - Creative Digital Copywriter Saatchi & Saatchi Hong Kong - Art Direator Intern Sina Ximen - Product Operations Intern
2010 2009 2008
WORKSHOPS &AC TIVITIES
2016 The Conference of Chinese Institute of Design - Factors influencing customer behavior change 2016 User Interface Design Workshop - User Experience x Service Deisgn Program 2015 Internatioanl Food Design Workshop - Taiwan Tech x KISD 2015 International Design Workshop- Future light - Taiwan Tech x TU/e 2015 User Experience & Service Design Workshop - Taiwan Tech x NTU x NCCU 2015 Postgraduate Exchange Exhibition - NTNU x XMU x SKKU 2014 Taiwanese Designers’ week volunteer - Photographer 2012 Phoenix Design Summer 4 Workshop - Poster Design x Layout 2008-2010 Student Union of Xiamen University -Communication Department
Freelancer
2016 Web design for a community organization 2015 CIS and packaging design for dried fruit 2015 Web design for a food company 2014 Book design for a community organization
AWARDS
2015 International Design Awards - Honorable Mention 2015 Adobe Design Achievement Awards - Packaging Semifinalist
SKILLS English
Research
IELTS 7.5 TOEIC 810 Creative
Design
User Interview Persona Definion Flow Design Interation Design
Wirefram Design Prototying Design Usability Test
X
Shadowing Service Gap Value Proposition
Interation Design
Customer Journey Map Service Blueprint
Ps
Ai
Sketch
Keynote
Id
Ae
Pr
01
Pig Note
Quick Image Notes Cloud App
User Experience Design ｜ 程采心 黄庭亚 胡小瑞 刘又瑄 许华汘
Design Process
User Interface Design
User Interface Design
2016 User Interface Design Workshop
｜
胡小瑞 许华汘
User Experience x Service Deisgn Program
ABSTRACT The app aims to use info-images (information images) as notes, and its target is youngers who are accustomed to take photos to record useful and important things by phones. Users can set a clock to a picture to remind of organizing notes or anticipating a activities etc. Pig Note also push a message to remind users of clearing unuseful info-images. Furthermore, users will not consider these photos occupy the mobile space because Pig Note is a cloud app.
PROCESS Exploration and Analysis PERSONALITY
Persona
Memory
Try new ideas
Organization
Record frequency
Laziness
Take photo frequency
GOALS
AGE
18-25
OCCUPATION
student
LOCATION
Taiwan
I am used to record the information by taking photos, so I hope there is an app that helps me classify these photos, and also reminds me of important information. Also, it can reminds me of deleting unuseful photos in time, in this way, my phone will not always be in full capacity.
divergence
Customer Journey Map
9:00 AJA workshop
13:30 Design exhibition
have a rest
19:00 19:30 Go回家 home
in an exhibition
take photos as notes
in class
look for important photo notes
take photos as notes
foget to transfer photos to notes
Capacity is full
information is out of date
classify photos
It takes time... too lazy to classify the photos...
hard to find a photo
convergence
Pain Points Hard to find a photo
Forget to transfer photos to notes
Set folder
Photo Clock
Search by time
Customize
Incentive
Delete in time
Capacity is full
Cloud A reminder
Set Pixel
Too lazy to classify the photos
Set folder
Add too lazy to classify the photos...
Fixed
Share Photos
Classify
Move
Customized Search
Delete
hard to find a photo
foget to transfer photos to notes
Photo Clock
UI Flow Take photos
Share
Close
Edit
Change
Identification classification
Delete
Used capacity Capacity is full
Person
Can do Award Connect
Setting
Other setting Log out
Product Value
Fast
Concept Transformation
Remind
Cloud
User Interface Design
Classify
Wireframe
Photo Clock
Take Photos
Search
Identification classification
Add Edit
Move
Change
Share
Share
Person
Setting
UI Style
APP ICON
Main Colors
Typography Chinese
苹方 #74C8D2
#59B2BE
#ED796E
#F08D84
English
San Francisco
#7F7F7F
UI ICON
#C7C7C7
#F0F0F0
press to go to：left and right sliding to select a photo/up and down sliding to select time/put in a tag
press to scan
01 Classify
press to search
press to share：left and right sliding to select a photo
press to move：left and right sliding to select a photo
Visual Design
05 Setting
User Test
04 Person
press to scan
02 Photo Clock
press to change：left and right sliding to select a photo/up and down sliding to select time/put in a tag left slide： selcet share or change press to share：left and right sliding to select a photo
03
Take Photos
press to take photos/identification and classification
02 QA peers A Q&A app for middle school students here they can make friends, participate question related activities...
I have a question!
I can answer!
Design Thinking Process Design Strategy Service Design Tools
ABSTRACT
The app focus on Q&A and Chat, and its target is for middle school students. Asking questions should give points and answering questions can get points. Specially, students can take photos of questions, and ask questions by voice, also the answers can use voice to answer questions. In order to improve the study motivation of middle school students, there are rankings and kinds of Q&A related activities. User Experience Design ｜ 陈萱恩 洪新雅 胡小瑞 许元耀 Ashely Li User Interface Design
｜
胡小瑞 许元耀
2015 User Experience & Service Design Workshop - Taiwan Tech x NTU x NCCU
Target market Tuition fees are super expensive!!!
High school students in Taiwan I need lots of time to collect subjects
Factors 2 A small circle of friends
Factors 1 Academic problems
Insight
Peers’ help
Take Photos
Use Voice
Design features
1
Q&A Q & A by voice answer questions to earn points to have questions
2
Customize
Customized questions and review at any time
3
Motivate
meet new friends and study together
Question
Voice
Answer
Review
Chat
Design process
Week 1
DISCOVER
We interviewed five high school students, and then use the WAAD (Work Activity Affinity Diagram) to organize the key findings, and further develop the persona.
Target Market Persona
小五 Heping Highscholl Grade two Weak：Math
Q
Strong：English
毕达哥拉斯 Chenggong Highscholl Grade three Weak：English & Chinese
A
Strong：Math
The school ranking is , but want Not go to cram school in school but a lot of questions, and actively seek answers.
期望
• There is interaction when asking questions, but don’t need to face to face. • The answer is detailed and you can ask if you still not get it. • There are free organized questions to increase study efficiency. • Answer it at any time.
to have more opportunities to practice, especially the math.
期望
• Strengthen ability by answer much more subjects. • Because there is high pressure, so hoping to have study peers to support each other. • There are free organized questions to increase study efficiency.
Week 2 DEFINE Brainstorming Storyboard
Starting from the key findings we found last week, we used brainstorming and storyborad to come up and develop ideas, and then propose the possible solutions.
Gain Creators Extra activities
Products & Services Multiple answers
Ask
Ability Analysis
Improve efficiency
Interaction between peers
Sense of achievement
one-on-one
Answer
conveniet to take phots and use voice
Study Resources
Integration of resources
answer questions to earn points to have questions
Don’t need to be face to face
easy to take a phone Review at any time
Sense of achievement
Pains Relievers
Learning motivation
Confirm the learning outcomes Learning fun
Gains
Jobs Multiple answers
Pains
Ask
Q&A
Use phone to Q&A is Inconvenient
Inconvenient take-out
Dare to ask questions
After we got the general concept, we used value proposition canvas and business model canvas to further understand what our users what and our market need.
Improve efficiency
Tuition is expensive
one-on-one
Answer
study resources
Inconvenient review
接触 Scan question freely
加入
发问
Put in basic info
Put in
Match
Tages
questions
image
search
take photos
Select a question peer
identification
one-on-one
use voice
Week 3
Motivate to be a member questions; activities
get the start points
答题
publice zone
Make friends Participate in activities Review
1
2
Aswer
Get the
Scan
Receive
questions
pointes
questions questions
by vioce
DEVELOP Value Proposition Canvas Business Model Canvas Customer Journey Map
Key Partners
High school
Cram school
Key Activities
Marketing hold activities
Key Resources hold activities
peer’s help
Mobile platform
Widen his circle of friends
Question Bank
Cost Structure
platform Maintain
Marketing
Activities
Office operation
Customer Relationship Self service
APP operation
The ministry of Education The education promoting organization
Customer journey map helped us to figure out the whole map of the interaction between users and our product.
Value Proposition
Highschool students
Channels App store
Official website
High school
Word of mouth
Revenue Streams
Cooperation
Ads
Customer Segments
Social network
Cocreation
Purchase points
Evaluate
don’t go to cram school
Weal and Strong
Week 5
Final Prototype Presentation
Week 4 DELIVER
Ask again
Activities
Answer
Questions
Share
Search
Collect
Like
UI Flow Wireframe
Discover
Chat
Ask
Answer
Ask questions Answered Questions
Wait to answer Questions
Questions Bank
Collect
Answer questions
Review Basic
Person Info
题库 排名 设置
Ability Naews
Chat
Take photo
Match
Voice Tag
Voice
Review
03
掌握，一球入魂
Design Thinking User Experience Design
ABSTRACT “Catch Ball” is a high quality interactive app which matches Smart TV for all sport fansmatched Smart TV for all sport fans. It strengthens scene feel when you watch sports event on TV. Take baseball for example, you can also share your feelings and comments with “other audiences” in anytime. “Catch Ball” will not only give you the best watching experience, but also build a bridge for your baseball-loving group by interaction with each other.
User Experience Design ｜ 蔡承融 胡小瑞 简唐妮 林子方 徐嘉骏 张家豪 User Interface Design
｜
胡小瑞 林子方
2015-2016 Design thinking Director: 唐玄辉
Interview Diverge
interview six TV viewers Everyone has unique viewing needs for TV. But there is one same thing that is TV makes people interact with each onter, and come up with common topics. Therefore, we interview six TV views to find out their opinions about viewing experience and needs.
share interview results According to the results, we divided the interviewers into three category: 1. ambiance 2. social networks 3. accompany
观看球赛
Brainstorming Converge
The ambiance concept is for live viewing experience.The
Ambiance
fuction of ‘Call in and call out’ boost the interaction between friends. ‘Zoom in and zoom out’
helps to
increase the feelings of presence.
Group concept aims to social by TV. There are different kinds of groups with same interest.You
Social networks
can chat on time when you watch something interesting, or have screenshot for a nice frame.
Pet TV concept helps to fulfill the emptiness of
Accompany
the single family. It will always be around. The interaction beween master and pet TV can change the Pet’s looks and personality.
Interview Diverge
Interviews with participants who have the view experience
In order to have a deeper understand of the needs of ball events viewers, we had interviews again. We got the key points from their pain points, and further think if our service meets their needs, which helped us to converge.
WAAD Converge
High quality social interactive ball events viewing experience buy and sell gambling
View angle Needs exotic experience
Hightlight provide infomation ďŹ lter miss eight points from WAAD
be social
ambiance
seek infomation
Persona
Loyal Fan
Loyal fans need much more detail information about players, and further require deeper and better viewing experience.
There are two kinds of personas, who are Loyal fans and Brandwagon fans. Except for considering their needs together, we also will further think about the interaction between them.
Brandwagon Fan
Brandwagon fans pursue the feeling of freshness. So it is necessary to think how to make them interested with the ball events and stick to them in the ďŹ rst time.
Storyboard
Diverge
Converge
Conclude
Customer Journey Map
Service Blueprint Tools Main Page Badge
Calender
行事曆
All Fans
推播 提醒
賽事 預測
虛擬 座位
Loyal Fan
球員 資訊
觀看 角度
聊天 對講機
截圖 分享
Brandwagon Fan
流浪 小徽章
Prototyping
Main Page
Talking
View Angle
Choose a friend, and press the talking button.
Rotate the button to adjust viewing angle.
Calender
Badege
Add the baseball events into calender as reminders.
Collecting the badges after watching the baseball events.
Menu
04
Hearty living experience from inside to outside Westin-taipei inovative sevice design
Westin-taipei
belong
to
Starwood,
start from 1999. It located in nanjing easten road, which is central of Tiapei. The geographical environment is good, and is also very convenient.
Service Design Thinking
Shadowing
Service Safaris
Contextual Interviews
Service Design Tools
Customer Journey Maps
Cocreation
Persona
Storyboard
Service Prototypes
ABSTRACT Based on the perspective of service design, this course included three phasesservice exploration, service gap analysis and new service design. Take Westin-taipei for example, we adopted shadowing, service safaris and contextual interview to explore the present service. Furthermore, through analysizing the service gap we found, we came up with the value proposition of new service, which is heart live exprience from inside to outside.
Service Design
｜
郝诚心 胡小瑞 王紫绮 吴羿蓉 袁一
Service Prototyping
｜
胡小瑞 吴羿蓉 袁一
2014-2015 Service Design Director: 宋同正
Service Exploration
Shadowing
Sometimes, there is no one welcoming customers.
Check-in time is so long.
Service safaris
Service personal is not nice.
There is no sign to tell if the equipment is free for use.
Contextual Interview
Business guest
Business guests are arranged by the secretary or the company. They consider location and now are satisďŹ ed with westin-taipei.
Targets for Independent Tourist
Independent tourist Besides, we also collected some coments from TripAdvisor, and found that most independent tourists are dissatisďŹ ed with westin-taipei.
Customer Journey Map
1
官網只有豪華客房及行政樓層豪華客房
Booking & Go
Or
陸客
香 、日本、 韓國、歐美
go!
TE XI
westin
430
Check in
TE XI
2
Reception Elevator
The doorman helps to deliver the baggage 430
Reception
get the tourism info ZZ
westin go out for dinner
3
go back to westin
Check out Reception
have a breakfast in westin
TEXI
lost sometging in westion
Z
Service Gap Analysis
1
官網只有豪華客房及行政樓層豪華客房
Booking & Go
Or
陸客
香 、日本、 韓國、歐美
Gap
G1 What services are available?
G5 Room card design need
G2 How can I handle the emergency（flight delay）
to be improved
G3 What is the location?
Gap
430
Gap Check in
Reception
2
Elevator
G4 Where is sensory welcome?
Gap G6 There is nothing in the elevator.
Gap R e c e p t i o n G9 It is inconvenient to get the tourism information.
3
Gap G7 Which room equipments I can use? G8 Which public equipments I can use?
Check out
Gap G10 There is no send off service.
Gap G11 Where I can give a feedback?
New Service Design
Target audience Based on the study, we focus on indepent tourists who come to taipei for leisure travel, and they love nature, also have a healthy living.
Leisure
Love nature
travel
Healthy living
Hearty living experience from inside to outside living + heart + experience Our core value is to provide with hearty living experience from inside to outside. Personal housekeep, smart living and light travel are designed followed with the proposition of westin, and also extend to better living experience.
Personal
Smart
Light
Housekeeper
living
Travel
Service Prototypes Optimized service
Integration
1
2
Present
Westin-Taipei APP
core value
smart equipment
1 Present core value
scented room card with taipei map
Innovate experience
3 Light travel
4
Co-creation for environment and feedback
- strengthen sensory welcome - present the value of backstage service personnel - Add the send o service
bed card with service personnel signature
For customer - canbon footprint - SPG member management - dicount - updated infomation
2
- smart equipment
Westin-Taipei APP smart equipment
For westin-taipei - build customer data - decrease human cost - build customer loyalty
Travel feeling
3.
3 Light travel
Taipei ecological tourism
living and travel
4
Co-creation for environment and feedback room carbon footprint in the bed card 每個飯店房間會顯示已累積 減下的碳足跡公斤數
Transfer customer carbon footprint to discout.
Personal Housekeeper
803
Check-in完後，門僮貼心幫忙提行李。電梯內也有令人神經舒緩的香氛。
Light
Smart
Travel
living
- room 360 view - adjust light and soud
05
Smog
Metropolis
Smog is named for the mixture of smoke and fog in the air which is a serious air pollution in a number of cities. Recent years, the phenomenon that smog surrounded in buildings is common in China, especially in metropolis. More and more buildings stand because of the economic development and peoples' lives' needs, but the dense buildings result in smog staying around and continue to harm human health in the other hand. This poster transforms the Chinese character of “霾” to the real horrible phenomenon. If you look at it at a close distance, it may look beautiful just like the situation that people are enjoying the living environment, but if you pull back, you can see the “霾” clearly, and may fall into thinking- dense buildings are really benefit human beings? Smog metropolis has its dual character.
2015 International Design Awards - Honorable Mention
06
Dried
Fruit
Story
The package is designed based on the birth story of dried fruit. The shape looks like a set of books, and the image illustrates the manufacturing process of dried fruit from the outside box to the inside boxes, which tells the whole birth story of dried fruit- picking, selecting, washing and low-temperature baking, in which fruit famers put a lot of efforts and thoughts. The immature drawing style with a little decorated colors, conveys simple but unusual touch of the dried fruit story. In order to avoid the sticky problem of dried fruit, some are divided into separated bags. Also, there is a mini package provided for one taste.
2015 Adobe Design Achievement Awards - Packaging Semifinalist
来吃水果干 来吃水果干 来吃水果干 来吃水果干
07
IDEAL
Kindergarten
Corporate
Identity
System
胡小瑞/刘毓薇/范媛婷
Graphic design 2014
logotype
S ign Applic ations
Tpyeface
思源黑體
愛德幼稚園是北市唯一 結 合 生 態 的 幼 稚 園。
Candara AaBbCc123
Color
C7 M56 Y28 K0
C6 M23 Y89 K0
C52 M7 Y89 K0
C61 M7 Y42 K0
C25 M52 Y5 K0
S uppor ting Graphics
Namec ard
Kid-Uniform
台北市汀州路三段24巷5弄12號 (02)2368-6489 (02)2365-3169 (02)2368-8147 c6489909@ms15.hinet.net www.idel.com.tw
(02)2368-6489 (02)2365-3169 (02)2368-8147 c6489909@ms15.hinet.net www.idel.com.tw
Kid-namec ard
Teacher-namec ard
S uppor ting Graphics
(02)2368-6489 (02)2365-3169 (02)2368-8147 c6489909@ms15.hinet.net www.idel.com.tw
08 Explorers Scenario
Design
胡小瑞/周宜瑾
creative industry X animation script design 2014
Helps the traveler to find the traveler nearby EXPLORERS is a new service provided by Airbnb, which helps Airbnb travelers find the nearby travelers who love to experience different culture, would like to deep explore the local, and also want to save money. With the similar Traveling Idea, EXPLORERS mak Airbnb travelerse connected with the local culture.
Airbnb today
is focus on living like a local. But do you ever had an upset airbnb experience?
Yo u l i v e i n a l o c a l h o u s e , however you cannot feel belonging. i t i s y o u r fi r s t t i m e t o v i s i t t a i p e i .
you cannot share the local transpor tation fare with anyone.
Yo u h a v e t o g i v e u p t h e l o c a l t o u r, because you are happened to be alone
I t ’s h a r d f o r y o u t o m a k e f r i e n d s to share local experience.
A i r b n b i s a c o m m u n i t y. Wherever you are,
there must be someone just like you.
5:30 PM
100%
EXPLORERS
N o w, A i r b n b n p r o v i d e a w a y t h a t y o u c a n fi n d p a r t n e r s t o e x p l o r e l o c a l t o g e t h e r.
5:30 PM
100%
I t ’s E X P LO R E S .
5:30 PM
100%
Chose a local event image to start explore.
Creat an Explore Event
Yo u h a v e t o g i v e u p t h e l o c a l t o u r, because you are happened to be alone
It comes out local elements as your event image.
5:30 PM
100%
5:30 PM
100%
Date Mon,Jun15,2016 Wish Let’s explore local foods at Raohe Night Market. explore
Ty p e d o w n w h e n a n d w h a t y o u want to explore.
5:30 PM
100%
P r e s s e x p l o r e b u t t o n t o fi n d e x p l o r e r s n e a r b y.
5:30 PM
5:30 PM
100%
100%
Invitation
Andy
Irene
Mon,June 15th,2016
I would like to go to Taipei 101. Jion me!
Judy
Mon,June 14th,2016
Does anyone want to go to Mt. YangMing togeth er?
Richy
Date Mon,Jun15,2016
Mon,June 17th,2016
I want to eat Din Tai Fung Restaurant!
Irene
Wish
Yo u r i n v i t a t i o n h a s b e e n s u c c e s s f u l l y s e n t t o E x p l o r e r.
Mon,June 15th,2016
Let’s explore local foods at Raohe Night Market.
I am looking for a partner to have dinner at night market.
Choose the same wish,
5:30 PM
100%
5:30 PM
100%
the same time,
5:30 PM
100%
5:30 PM
Invitation
Yo u r E v e n t Irene
Irene
Mon,June 15th,2016
100%
Invitation
Yo u r E v e n t Irene
I am looking for a partner to have dinner at night market.
Creat A New Explore Event
Reject
Accept
Irene
Mon,June 15th,2016
I am looking for a partner to have dinner at night market.
Date
Date
Mon,Jun15,2016
Mon,Jun15,2016
Wish
Wish
Let’s explore local foods at Raohe Night Market. Accept
the same place,
Reject
Creat A New Explore Event
Let’s explore local foods at Raohe Night Market. Accept
Reject
t h e r i g h t p a r t n e r.
5:30
PM
100%
O RE
100%
PM
5:30
EX PL
RS
EXP
5:30
LOR
ERS
PM 100%
5:30
PM 100%
EXPLORERS EXPLOR ER
L e t ’s s t a r t a t r i p w i t h a b u b b l e tea and fried chicken in the night market.
S
Bring a paper umbrella and We a r i n g a t ra d i t i o n a l g a r m e nt s in Japan.
5:30
PM 100%
EXPLOR ERS
5:30
5:30 PM
PM
100%
100%
EXP 5:30
LOR
ERS
PM 100%
EXPL
ORER
S
EXPLORER S
In London, having a cup of c o ff e e o n s t r e e t t o g e t h e r.
5:30
Join a camel tour in a group in Egypt.
PM 100%
5:30
PM
100%
EXPLOR ERS
EXP
LOR
ERS
O r, p r e p a r i n g a s k i s u i t w i t h airbnb partners to explore Island.
I n d i ff e r e n t c o u n t r y, y o u u s e a d i ff e r e n t l o c a l w a y t o fi n d a n d meet airbnb partners.
Graphic Design Service Design User Experience Design Interface Design Advertising