Portfolio 2016_en

Page 1

- 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


Turn static files into dynamic content formats.

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