Portfolio 2017

SHERI - HU

“My Journey continues.”

Portfolio

UX / UI Designer & Service Designer

‘14 胡 作 小 品 瑞 集

‘17

User Experience Q n A / Pigote / U fresh

Content User Interface Healthy product

User Experience Design User Interface Design Service Design

Visual Communication Daily life / Explorers / IDEAL Kindergarten / Smog Metropolis/ Dried Fruit Story

Graphic Design Advertising

I started from Philosophy which makes me always curious and think from all angles.

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 .

From these experience, I realized that everything has its meaning. I met interesting people and their stories during the travel, and I collected the inspiration 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!

INTRODUCTION

EDUCATION 2014 - 2016

National Taiwan University of Science and Technology - Master of Design Focus on Graphic Design, Service Design, User Experience Design and Interface Design.

2012 - 2013

The Chinese University of Hong Kong - M.S.Sc. in Advertising Focus on Creative Advertising, Art Diretion and Copywriting.

Sheri Hu Wenzhou, Zhejiang +86 15601889035 sherihu@126.com behance.net/huxiaorui

2008 - 2012

Xiamen University - Bachelor in philosophy - Dual bachelor in advertising Focus on Logical and Creative thinking.

EE XX PP EE RR II EE NN CC EE

WORK PROJECTS

S.POINT 2014 2014--2016 2016 S.POINT -- UX UX // UI UI Designer Designer

2017 2017 QinQin QinQin food food testing -- anticipate anticipate as a researcher, perform the product testing

2016 2016

2017 2017 Infinitus Infinitus healthy food research and development -- anticipate anticipate as a user experience design, fully engaged in user research, research, research research analysis, design prototype and user testing

Bebit Bebit taipei taipei -- Interaction Interaction Design Design Intern Intern

2015 Design Lab 2015--2016 2016 Service Service Design Lab -- Service Service Design Design Assistant Assistant 2013 Leo Burnett Burnett Hong Hong Kong Kong (1year) (1year) 2013--2014 2014 Leo -- Creative Digital Copywriter Creative Digital Copywriter 2013 2013

Saatchi Saatchi & & Saatchi Saatchi Hong Hong Kong Kong -- Art Art Direator Direator Intern Intern

2011 2011

Sina Sina Ximen Ximen -- Product Product Operations Operations Intern Intern

2017 2017 Eleme Eleme delivery delivery box design -- perform perform user user research and supported co-design workshop 2016 2016 -- 2017 2017 Infinitus Infinitus product app concept design -- responsible responsible for performing wireframe and Hi-Fi prototype, and and anticipate anticipate product concept testing.

2016 2016 Xinguang Xinguang Bank website redesign -- responsible responsible for web prototying based on research finding.

FREELANCE PROJECTS 2016 Web Web design design for Shouders Action 2016 2015 CIS CIS and and packaging design for Dried Fruit 2015 2015 Web Web design design for Shinho 2015 2014 Book Book design design for China Develop Brief 2014

A WA R D S 2015 International Design Awards - Honorable Mention

SKILLS English IELTS 7.5 TOEIC 810

2015 Adobe Design Achievement Awards - Packaging Semifinalist

ACTIVITIES

User Research Persona Definition

User Experience Design

Wirefram Design User interface Design

2016 The Conference of Chinese Institute of Design - Factors influencing customer behavior change

Usability Test

X

2016 User Interface Design Workshop - User Experience x Service Deisgn Program

Shadowing Service Gap

2015 Internatioanl Food Design Workshop - Taiwan Tech x KISD

Service Design

Customer Journey Map Service Blueprint

2015 International Design Workshop- Future light - Taiwan Tech x TU/e

Prototyping

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

Ps

Ai

Id

Ae

Sketch

Keynote

01 Q n A

User Experience Design

A Q & A app for high school students

02 PigNote An informational photos manager

03 U fresh A UX Case Study for fresh food e-commerce

A Q&A app for high school students here they also can subscribe question categories, build the own question notebook

01

QnA ABSTRACT Q n A is a Q&A platform targeted for high school students. Here asking questions should give points and answering questions will get points. Specially, users can take photos of questions, and then ask questions by voice, also the answerers can answer questions in the same way. Besides, they also can subscribe question categories, build own question notebook and there are ability analysis, rankings and kinds of Q&A related events which improve the learning motivation of high school students.

TEAM- Anne Chen, Xin-Ya Hong, Xiao-rui Hu, Yuan-Yao Xu, Ashely Li MY ROLE- UX/ UI designer DATE- May 2015 ~ June 2015 METHODS- User interview/ Persona/ Storyboard/ Value proposition canvas/ Business model DELIVERABLES - wireframe/ visual mock up

1 Discover

BACK GROUND

This project is generated from the User Experience and Service Design Workshop held by DILT LABďźˆFounder is Hsien-Hui Tang, who is professor of NTUST), and our team members come from NTUST, NTU and NCCU. It lasted five weeks, and began with the fixed target market of high school students. After one-week interviews, we decided to concentrate on the key problem of most high school students, which is school work. With this direction, we found out the solution through DISCOVER, DEFINE, DEVELOP and DELIVER stages.

2 Define 3 Develop 4 Deliver

1 Discover

We interviewed ten high school students, then used the WAAD (Work Activity Affinity Diagram) to group and finally summarized the key findings:

Schoolwork is always the biggest problem for most of high school students.However, it is expensive to having extra classes out of the school. So they tend to ask questions to classmates who are good at this subject instead of asking teachers.

What is more, most of high school students not only have weak subjects but also have strong subjects, which means they ask questions also answer questions, and answering questions help them strengthen the mastery of knowledge.

Insight 1

Taking photo of questions and send to classmates by phone is faster after class.

Insight 2

Use voice to ask and answer questions is more clear.

Insight 3

Ask and answer may not be a one-time thing, because sometimes the question is too complicated, so it need more interaction.

Insight 4

In order to improve their competitiveness, they want to access to more questions to practice.

Insight 5

It takes time to collect questions to review before the examination.

2 Define

Persona

Based on the key findings we discovered from the interviews, we further developed the personas of our target users and defined the needs of target users. And then presented the personas and their needs by Storyboard.

Q

Five I have lots of math questions but my language is good.

A

Pythagoras I am good at math but still wants to improve it.

1. Because Five is too shy to ask question, so

1. Pythagoras likes to answer math questions,

Five hopes there would be a way to ask ques

and usually competes with friends for answering

tion avoiding face-to-face but still with a degree

speed.

of interaction.

2. Questions should be answered in depth, and

2. Pythagoras wants to access to math ques-

if Five cannot understand then he can ask

tions of famous high schools to be better.

again.

3. Five is willing to help the answerers to improve language in return if they need.

4. If Five has a notebook for collecting questions, then reviewing before examination will be more efficient.

3. If Pythagoras a notebook for collecting questions, then reviewing before examination will be more efficient.

User Story

Based on two personas, we use storyboad to tell the user stories. In this way, we can check if our product can meet all the needs.

Conclusion

Finaly, we initially got the possible functions of our product based on user needs:

Function 1 question and answer

Function 2 subscribe question categories

Function 3 build own question notebook

Function 4 ability analysis and ranking

3 Develop

After we got the general concept, we used Value Proposition Canvas and Business Model Canvas to further understand, brainstorming and refine what users need and what the market needs. Besides, we used Customer Journey Map to propose the whole solutions, which showed the interaction between user and our product in three phases- touch, join in, Q&A.

VPC

BM 额外活动

Products & Services 多人解答

一对一 解答

提问

解答

能力 分析

学习 资源

学伴 排名

学伴互动

Gain Creators 提高 效率

Key Partners

高中校方

补习班

教育部

教育推 广组织

得到 成就感

Key Activitie 经营APP

行销推

举办活动

丰富题

Key Resource

免费使用靠 答题赚积分 来提问

拍照和语 音很方便

手机携带 方便

不用面对 面提问

一键复习

举办活动

成就感

Pains Relievers 学习动力

确认学习 成果

提高效率

Cost Structure

学习乐趣

平台 维护

Jobs Gains Pains 手机打字 不方便

丰富题

Q&A 纸本携带 不便

不敢提问

多元解法

一对一 解答

提问

解答

学习 资源

补习班 昂贵

复习不便

行销

活动

办公室 营运

es

Value Proposition

推广

题库

es

Customer Relationship 自助式

同学互助

手机平台

扩大学校 交友圈

没有补习 的高中生

共创

App store

官网

学校

口碑

Revenue Streams

合作 收入

广告

CJM

社群

Channels

题库

Customer Segments

购买 积分

想要更多 学习资源 的高中生

有强科也 有弱科的 高中生

接触

自由浏览题库

加入

发问

填写基本资料

输入

对比

标签

选择

题目

影像识别

容易找到

答题者

拍照

过滤重复提问

一对一

语音

引导加入会员 提问、参加活动

获得初始积分

答题

公共区

1

2

回答

选择

浏览

收到

问题

答题者

题目

问题

语音

一对一 公共区

积极寻题 评价 参与活动 复习

Challenges

Q A

What if no one answers the questions?

At the beginning, users can get some free points once joining in. The points are used for asking questions, anticipating events. Then, users will continue to actively answer the questions to get points . (function: anticipate events)

Q A

What if there are too many same questions?

When users want to ask questions, they firstly tend to search the questions because asking questions costs points. And there are two search ways helping them to get the answer quickly if there are same questions, which are typing key words or use the photos of questions.

Besides, if users ask questions directly, our product will filter repeated questions through image recognition technology. (function: search questions)

Q A

Conclusion In the end, we confirmed the key functions of our product.

Function 1 question and answer, plus evaluate

Function 2 subscribe question categories and anticipate events (search)

Function 3 build own question notebook (search)

How to guarantee the quality of answering?

When users’ questions are answered, they can evaluate the answer the excellent answer will get the extra points as a reward. Also others can evaluate questions to quickly find the popular Q&A. (function: evaluate questions and answers)

Function 4 ability analysis and ranking

4 Deliver

From IA, UI flow, wireframe, to visual design, we further build our product- an Q&A app for high school.

Function 2

Event Banners

Discover Question categories Function 1

My question list

Question list

Question list

Question details

Question details

Q&A My answer list

Information Architecture

Question list

Question list

Function 3

Notebook

Question details

Notebook categories Review page

Function 4

Profile

My

Ranking Setting

Question details

UI flow

Event Banners

Start from tasks Find a question

question list

Question categories

Discover

deduct points

booking

question details

edit Question categories

yes

by keywords

question list

search by photo

no

yes

Ask a question

Ask a question Answer a question

by photo

Q&A

no results

describe question

tag & choose the answering group(s) check answers

question details

collect share

My answer list

question details

Answer a question

edit search Review

Notebook

Notebook categories edit search

Profile More

My

Ranking Settings

change my info change review plan set the notification invite friends

question details

question list

no

My question list

question list

question list review page

get points

submit ask more

deduct points

question details

Lo-Fi Wireframe

Hi-Fi Wireframe 1

Start from tasks

Find a question Discover

Question list

Search by keywords

Search by photo

pop up edit menu

2 3

Ask a question my question list

ask a question by photo

auto-detect question

tips for description

recording

3

Answer a question my answer list

question details

tips for answering

recording

confirmation

4

Review edit mode

notebook categories

question list

review page

More confirmation

edit tags &categories

profile

ranking

settings

1

Tap camera icon, and search by taking photo of a question.

2

After photo auto-detect, if there exist similar questions,there comes out a pop up, which shows a entry to question list or questions details page.

3

Tap the photo to begin the recording, and long-tab to continue, then stop tapping to finish record. It is applicable for questioning and answering.

4

Tap “去複習” then entering a review page, it ramdonly comes out questions.

Visual design

QnA

What I learned

This workshop was not the end of this project, we also presented our product to the students majored in information engineering of NTU for the further improvement, but we didn’t have chance to cooperate because of the limited time. However, an app with similar concept launched after one year, which teaches me a lesson that real innovation not just started from human needs, also is related to business model and technology.

Review

Suscribe

Q&A

Build own question notebook and review anytime.

subscribe question categories and anticipate events

take a photo of the question; question and answer by voice

02

PigNote ABSTRACT PigNote is an informational photos (referred to as infophotos) manager, which helps youngster who are accustomed to take photos or capture screenshots to record useful and important information (lecture notes, event posters, inspiration, etc.) by phone in more efficient way. Except for classifying the info photos, users can regard a photo as a note and set a clock on it to remind of anticipating a event on time or or check the note in time.

TEAM- Cai-Xin Cheng, Ting-Ya Huang, Xiao-rui Hu, You-Xuan Liu, Hua-Qian Xu MY ROLE- UX/ UI designer DATE- April 2016 ~ May 2016 METHODS- User interview/ desk study/ persona/ customer journey map DELIVERABLES - wireframe/ visual mock up

BACK GROUND

This project started from the User Interface Design workshop held by NTUST and AJA (a design consulting agency in Taiwan). It lasted four-week and focused on interaction and visual design of an app. So we didn’t spend too much time on user research and the needs just came from ourselves. Firstly, we in a group shared some pain points of our life.

Have you noticed that your photo album is always full of informational photos, and it costs much time to delete?

Do you also have the experience of spending time on finding the informational photos because you forgot some important information?

After the discussion, we then decided to concentrate on infophotos-management problem in the very limited time, because all of us have this trouble. Based on this key problem, we performed three steps to come to solution with a mobile app.

1 Exploration and Analysis 2 Concept Transformation 3 User Interface Design

1 Exploration and Analysis

We interviewed 10 target users with an age range of 20 to 30, and asked them about their infophotos-management experience. Based on the interviews, we generated four key findings.

step 1

User Interview

Insight 1

There are three main reasons to take infophotos - take lecture notes quickly, take notes of interested events and capture inspirational photos.

Insight 2

It is hard to find the right infophoto when people needs it because there are always lots of infophotos in the photo album mixed with other scenics and portraits. But most people are too lazy to classify the infophotos and the photo album is not smart enough .

Insight 3

People tend to forget to review the infophotos. Usually, they forget to transfer the photos they took in the class and write down in the notebook or forget the date then miss some events.

Insight 4

People think that Infophotos take too much capacity of phone and they only get to handle of these when the capacity is full.

step 2

Also, we did a market analysis of its potential competitors which helps us to make sure the position of our product in the market. Through 2X2 dimensional analysis with in / out-built andhigh-convenient / low-convenient,we determined our product in the out-built convenient position.

Competitors Analysis

Qian PigNote

out-built

E

E

ePhotoChest

Evernote

E Memo (mac)

low-convenient

G Google photos

Next, we created the persona of our app user and described the present scenarios by customer journey map, that helps us to identify our target users and clarify their pain points based on the key findings.

Persona

high-convenient

in-built

step 3

S Scene

E Tidy

Major: graphic design Age: 25 Location: Taiwan Behavior: I am used to record the important information by taking photos, that why the photo album of my phone is always in full capacity. Since I am kind of busy with my study, and don’t have to much time to organize the huge amount of infophotos, so I often cannot find the infophoto I need at that moment and always miss very important events!

Goal: I hope there is an app which can help me classify my infophotos, and remind me of make use of them in time. Besides, it is necessary to remind to delete useless ones to release the phone space.

Customer Journey Map

Conclusion

9:00 AJA workshop

take a break

have a lecture

take photos of ppt notes

Pain point 1

hard to find the needed infophoto

go to a design exhibition

Touch point 2

Pain point 2

Touch point 3

Touch point 1 looking for the last-week notes in photo album.

Touch point 1

19:00 go home 19:30

13:30 Design exhibition

take photos of inspirational design

1- hard to needed find the infophoto 2- forget to transfer them in the notebook

Touch point 2

3- cannot take photos because the capacity ishappened to be full

Touch point 3

4- forget to classify infophotos took today 5- miss a graphic design speech tonight

go home

forget the infophotos Pain point 3

capacity is full

2 Concept Transformation

step 1

In this stage, we transfered user pain points to key needs, and then determined the key functions of our app, next we developed product information architecture, user flow, and wireframe.

Pain point 1

Define

hard to find the needed infophoto Pain point 2

forget the infophotos Pain point 3

capacity is full

Need 1

Classification

common classified file customized file Need 2

Clock

set a clock on the photo Need 3

remind of cleaning

My

Functions of our product

step 2

Default albums

Classification IA

User-defined albums New photo

Clock

Clock list

Information Architecture

Profile

My

Capacity Setting

Photo list

Clock details

Photo list

Photo details

Photo list

Photo details

Photo details

step 3

UI flow Start from tasks

Add a info photo

New photo

Classification

take a photo to a album import photos to a album

Default albums Classification

User-defined albums

Add a clock as a note

photo list

share

Clock details

edit the clock delete

Profile Setting

delete

delete

Clock Clocklists list

Capacity

share

add a new album

delete

My

add a clock

add clocks

add a clock

More

photo details

add a new photo delete a album

Clock

share

change my info set the notification change remind frequence change photo quality

3 User Interface Design step 1

UI style

Actually it is the most important part of this workshop. Before visualizing the app, we collected some pictures as UI style reference, and then decided the main color which presents the visual identity of our app. More details are presented down below.

APP ICON

Main Colors

Typography 中文字体

苹方 #387FD6

#FFC285 #FE7B70

UI ICON

#728399

#FFC285 #848CDE

#F3F8FA

#AFE76A #56AF2C

#48E4EF #17A8BE

#FFE296 #FFBA00

英文字体

San Francisco

step 2

Hi-Fi Wireframe Start from tasks 1

Add a info photo

Classification

Add a new photo by camera

Add a new photo by inputing

Photo list

Photos edit mode

Photo details

2

Add a clock as a note

More

Clock list

delete clock

Profile

Settings

add a clock

edit a clock

1

Choose a album as the camera shutter, which is the fastest way to classify info-photos.

2

There are three entries to add a clock.

step 3

Visual mock up

Classification

Clock

My

What I learned 1. User testing has a significant role on further deciding the usability of the app, and it whole process should be iterative.

2. Delivering a complete interface design should be based on a UI style, which including app icon, main colors, typography and UI icon.

03

U fresh A UX Case Study for fresh food e-commerce

In the past, people tend to buy fresh food in the traditional markets with limited opening time, or buy relatively fresh food at supermarket. Recently, With the rapid development of the e-commerce, more and more fresh food online stores have been brought to our life. I, along with the most young people I know, can not get up early to go to traditional markets for fresh food, also have a trouble to bring lots of fresh food back home and store them, or too busy to buy the fresh food. Over the months this year, I have tried a few fresh food online stores and my current preference is U fresh. This platform can deliver fresh food within one hour after I pay which meets my urgent needs, but I still had a few problems while using their iOS app.That’s why I decided to put my UX designer hat on to see if anyone else shares my problems, and tried to improve this app with this design thinking.

DATE- June 2017 - July 2017 METHODS- persona/ job stories/ usability testing (user interview) DELIVERABLES- wireframe prototype

DESIGN PROCESS

As I learned, in order to make sure if my redesign decisions were supported, I followed IDEO’S Human-Centered Design Thinking process. But in my experience, their process from EMPATHIZE, DEFINE, IDEATE, PROTOTYPE to TEST, is more suitable for developing a new concept. For U fresh, with limited time and resource, I adjust the process by Using TEST to EMPATHIZE the users, and then DEFINE the problems, IDEATE the solutions with prototype.

1 EMPATHIZE the users 2 DEFINE the problems 3 IDEATE the solutions with prototype

1 EMPATHIZE the users

Based on my firsthand experience and understanding of people who used fresh food e-commerce, I created a persona of potential U fresh user. It should be noticed that the persona was created with assumptions and not research-based but it helped me to clarify my target testing users, and also guided my design decisions.

Persona Behaviors - She lives a healthy life and loves cooking, so cooks by herself for the most time.

- During weekdays, she works from 9:00am to 6:30pm and sometimes overtime.

- She always cooks at night to prepare bento for tomorrow lunch.

- At weekend, she goes to supermarket or online store to buy lots of fresh food or for the next week.

Needs&Goals - She hopes the whole online fresh food shopping process will not take too much time.

- She wants to quickly buy the fresh food she wants to buy.

Age: 27

Location: Shanghai Occupation: Consultant

Job Stories

Based on the persona I created, I continued to adopt the Jobs To Be Done framework (which is revised on user stories ) to explore different situations when the persona uses U fresh, for the purpose of understanding user’s motivation and desired outcome. The following job stories are based on my firsthand experience.

1

When I don’t know what to buy, I want to browse the different categories of fresh food, put the fresh food I need into shopping cart, pay for them and track the order in a short time, so I feel the whole shopping experience is pleasant.

2

When I know what to buy, I want to find the fresh food as soon as possible, so I can get my order soon.

3

When my order don’t meet free-shipping requirement, I want to buy a fresh food with good discount, so I can make my order high cost-effective.

4

When I get spoilt fresh food, I want to ask help to client service to deal with it as soon as possible, so I can feel my fresh food and service are assured.

Usability Testing

Based on the job stories and my understanding of core functions of the U fresh app, I designed a few tasks with specific scenarios as follows (some scenarios with more than one task).

1

Complete the whole process of buying the fresh food and then cancel the order.

朋友来你家聚餐，你不知道要做什么菜好，所以打算先浏览一下，看到合适的生鲜食品放在购物车， 然后付款购买，再追踪订单状态，但马上发现有的菜家里还有，所以取消订单。

Find the target fresh food, then find a target discount fresh food, and find the client service for help.

X 3 X 4

2

下班回家路上，你想了一下今晚想做杏鲍菇炒蛋，所以要购买杏鲍菇和鸡蛋，找到它们，加入购物车，发现没 有达到免运费，但又没有其他什么特别想买的东西，就打算找一个今日特惠的生鲜食品来凑运费。然后拿到今 天的生鲜食品，发现鸡蛋碎了1个，于是你想找到客服询问如何处理这件事。

3

Find a group-buying and change the shipping address.

最近是杨梅季，你想买杨梅到公司尝尝，发现团购里面正好有团购杨梅的活动，于是团购了杨梅， 并修改收货地址为公司地址，且选择周末不收货。

4

Inviting friends to use the app to get the coupon.

朋友跟你抱怨因为工作忙碌很难可以买到新鲜的蔬菜，你跟她推荐可以用U掌柜，并要邀请她来用， 这样双方都可以拿到优惠券。

1- Firstly, download the U fresh app from the registration link I send, and finish registration.

2- Then, Finish the four tasks with specific scenarios one by one.

3- After that, give feedback about the tasks and other suggestions about this app in a short interview.

2 DEFINE the problems

Here is the overall of usability testing results for each task, and success rate means user succeeded without struggle :

Tasks

Success Rate

Complete the whole process of buying the fresh food and then cancel the order.

5/ 5

Find the target fresh food.

2 / 5

Find a target discount fresh food.

0/ 5

Find the client service for help.

4/ 5

Find a group-buying.

3 / 5

Change the shipping address.

5/ 5

Inviting friends to use the app to get the coupon.

2 / 5

Group pain points 1

Search & Sorting

- if I know what to buy, I want search it directly that would be the fastest way, but there is no search function.

- The fresh food list is messy, because sort is not clear. I want to know which one is hot-selling, high cost-effective and new arrivals. By the way, I will not pay attention to the subtitles mixed with contents.

- It is hard to find discount fresh food which I think should have high priority, especially discount today has to be the head.

- There should be a discount zone, but now it mixed with others.

2

Discount information

- The price tag is unclear. I don’t know it is original price or discount price.

- Discount fresh food should has its time period which influences when I will buy it to some extent.

- Discount food needs a remaining number, if I put the discount fresh food to shopping cart but when I check out, ‘sold out’ will make me crazy.

3

Group-buying

- The entry point of group-buying is not easy to find, because the icon on the tab bar below is not obvious, since the tabs on the top attracts more.

4

Client service

- For fresh food, there is much more quality problem, so the client service icon should be more obvious.

5

Invite friends

- I totally don’t notice the tab bar on the bottom because the categories on the top attracts more.

- The watermelon icon in the lower right corner is not consistent with the red packet icon on the tab bar below, which makes me confused.

6

Often buy

- I often buy some fresh food regularly, so I think the often-buy fresh food need a tag which helps me find them quickly.

Define key Pain Points

Next, I prioritized each pain points according to its importance to the users and U fresh business. My analysis of the importance to users were based on understanding of the existing and potential users, and my assumption of the importance to U fresh business were based on the understanding of online material of U fresh.

Most important to business

3

Group-buying

1

Invite friends

5 2

Search & Sorting

Discount information

Least important to users

Most important to users 4

Client service 6

Least important to business

Often buy

As a result, I decided to track these three pain points- Search & Sort, Invite friends and Discount information which are core functions of U fresh and both important to users and business.

1

Pain point 1

Search & Sorting

2

Discount information

5

Invite friends

Users had difficulty finding the target fresh food without search and sorting function.

Since there is no search function on the app, when a user knows what to buy, she still needs to find the category firstly and scroll the page until to find the target fresh food. In the usability test, all the users takes time to find the target fresh food. As for sorting, depend on the category, the app groups the fresh food with a subject, such as limited-time discount, hot-selling and new arrivals today, but no one on the usability test can find the discount food in a short time. Also, users had to spend time on scrolling to know different groups, so it is possible that the lower groups may lose their users since the whole page is too long.

Pain point 2

Discount information is not clear for users.

There are different discounts on the app, including sale only today (今日特惠) , buy one get one free(买一送一), 30% off (7折), 20% off (8折),10% off (9折) and bonus package (加量装). For now, discount fresh food only has a discount price, so It is hard for the users to tell it is the original or discount price. Next, users don’t know how long the discount can last, and user interviews revealed that discount time period can stimulate buying. Also, users need to know the remaining number of the discount food when there is not much left over, because it may make them disappointed and stoped to buy when check out and find it has sold out.

Pain point 3

Discount information is not clear for users.

Inviting friends to join in is one of the key function for a new app, which helps the app to get more users in a short time.

On the other hand, users can get coupons by inviting friends, which stimulate them to invites more friends continuously.

In the usability test, 3 out of 5 users cannot find a way. Currently, there are four entries to invite friends, including the banners on each categories and my page, tab bar, a hover watermelon icon on the lower right corner, and order successful page. According to the interview, all the users ignored the banners on the each category and didn’t discover the smaller banner on the my page. Also most of them didn’t notice the tab bar on the bottom because the categories on the top attracts more. Besides, the watermelon icon is not consistent with the red packet icon on the tab bar, which makes users confused.

3 IDEATE the solutions with prototype

BEFORE There is no search function on the app. Currently, except for the the one-hour delivery logo, users can change shipping address on the navigation bar. But usually, users will not change the shipping address after first-setting according to the user interviews.

Pain point 1

AFTER I deleted the shipping address, kept the one-hour delivery logo on the left and added the search bar with keyword tips. In this way, when users start to search, here come the options, including new arrivals today and discount today that are based on business perspective.

Search Sorting

BEFORE

AFTER

The app groups the fresh food with some subjects, but no one on the usability test can find the discount food in a short time. Also, users had to spend time on scrolling to know different groups, so it is possible that the lower groups may lose their users in this way.

I designed the sorting with some tabs, which including Overall, new arrival, hot selling ,discount and price ranking. The sequence is based on the consideration about business and user needs. In this way, users can check the list based on their buying consideration.

Pain point 2 Discount Information

BEFORE For now, except for name and size, discount fresh food only has a discount price. Based on the user interviews, users want to know the time period of discount and remaining number of the fresh food when it almost sold out.

AFTER I added the original price with a strikethrough, to differ with the discount price, and designed the deadline under the price, also added the remaining number to the fresh food which left less than 20 based on the user interviews.

Pain point 3 inviting friends

BEFORE According to the user interviews, even there are many entries of inviting friends on the app, but most of them are ignored.

Especially, the watermelon icon is not consistent with the red packet icon on the tab bar, which makes users confused.

AFTER First, I redesigned the icon to make it consistent with the icon on the tab bar.

Then I moved the icon to upper place and the icon can shake which attracts more in this way.

User Interface Design

Healthy product concept

Visual Communication

01 Illustration | Daily life Scenario 02 Illustration | Explorers Scenario 03 CIS | IDEAL Kindergarten 04 Poster | Smog Metropolis 05 Package | Dried Fruit Story

Illustration

01

Daily life Scenario Design

Middle - aged office workers

TIME - 2016 SUBJECT- Healthy product DELIVERABLES- Illustration for presentation

New to the workplace

unhealthy life, healthy life, It's a circle, it's daily life.

s

Prepared pregnant parents

Hard life salesman

Illustration

02

Explorers Scenario Design TEAM- Xiaorui- Hu, Yijin-Chow

TIME- 2015 SUBJECT- Creative industry DELIVERABLES- Illustration & Concept Animation

EXPLORERS is a new service provided designed fo Airbnb, which helps Airbnb travelers to find the nearby travelers who love to experience different culture, would like to deeply explore the local, and also want to save money.

With this service, EXPLORERS can make Airbnb travelers more connected with the local culture.

1- Airbnb today

2- is focus on living like a local. But do you ever had an upset airbnb experience?

3- You live in a local house, however you cannot feel belonging. It is your first time to visit taipei.

4- you cannot share the local transportation fare with anyone.

5- You have to give up the local tour, because you are happened to be alone.

6- It’s hard for you to make friends to share local experience.

7- Airbnb is a community. Wherever you are.

5:30 PM

100%

8- there must be someone just like you.

5:30 PM

100%

9- Now, Airbnbn provides a way that you can find partners to explore local together.

5:30 PM

100%

Chose a local event image to start explore.

EXPLORERS

10- It’s EXPLORES.

Creat an Explore Event

11- You have to give up the local tour, because you are happened to be alone

12- It comes out local elements as your event image.

5:30 PM

5:30 PM

100%

100%

5:30 PM

Andy

100%

Mon,June 15th,2016

I would like to go to Taipei 101. Jion me!

Judy

Richy

Mon,June 17th,2016

I want to eat Din Tai Fung Restaurant!

Wish Let’s explore local foods at Raohe Night Market.

Irene

Mon,June 15th,2016

I am looking for a partner to have dinner at night market.

explore

13- Type down when and what you want to explore.

5:30 PM

Mon,June 14th,2016

Does anyone want to go to Mt. YangMing togeth er?

Date Mon,Jun15,2016

5:30 PM

100%

100%

14- Press explore button to find explorers nearby.

5:30 PM

100%

5:30 PM

Invitation

5:30 PM

100%

100%

Invitation

Yo u r E v e n t

Irene

15- Choose the same wish.

Irene

Irene

Mon,June 15th,2016

I am looking for a partner to have dinner at night market.

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.

Date

Date

Mon,Jun15,2016

Mon,Jun15,2016

Wish

Wish

Let’s explore local foods at Raohe Night Market.

Accept

16- the same time.

Reject

Creat A New Explore Event

17- the same place.

Creat an Explore Event

Let’s explore local foods at Raohe Night Market.

Accept

Reject

18- the right partner.

5:30

5:30

PM

100%

100%

PM

EXP

EXP

L OR

LOR

ERS

ERS

5:30

5:30 PM

PM

100%

100% 5:30

PM 100%

5:30 EXPLO R ER

PM 100%

S

EXPLORERS

EXPL

ORER

S

EXPLO RERS

19- Let’s start a trip with a bubble tea and fried chicken in the night market.

5:30

20- Bring a paper umbrella and wearing a traditional garments in Japan.

21- In London, having a cup of coffee on street together.

PM 100%

EXPLO R ER

5:30

PM

S

100%

EXP

LOR

ERS 5:30

PM 100%

5:30

PM

100%

EXPLO R ER

EXP

22- Join a camel tour in a group in Egypt.

LOR

S

ERS

23- Or, preparing a ski suit with airbnb partners to explore Island.

24- In different country, you use a different local way to find and meet airbnb partners.

CIS

IDEAL Kindergarten

03

Corporate Identity System

TEAM- Xiaorui- Hu, Yuwei-Liu, Yuanting-Fan

TIME- 2014

Supporting Graphics

Logotype

Logo Applications

Tpyeface

Namecard

思源黑體

愛德幼稚園是北市唯一 結 合 生 態 的 幼 稚 園。

台北市汀州路三段24巷5弄12號 (02)2368-6489 (02)2365-3169 (02)2368-8147

Candara

c6489909@ms15.hinet.net www.idel.com.tw

AaBbCc123

Color

(02)2368-6489 (02)2365-3169 (02)2368-8147 c6489909@ms15.hinet.net www.idel.com.tw

C7 M56 Y28 K0

C6 M23 Y89 K0

C52 M7 Y89 K0

C61 M7 Y42 K0

C25 M52 Y5 K0

Kid-namecard

Kid-Uniform

Teacher-namecard

Supporting Graphics

(02)2368-6489 (02)2365-3169 (02)2368-8147 c6489909@ms15.hinet.net www.idel.com.tw

Poster

Smog Metropolis TIME- 2015 SUBJECT- Character design

04

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

Package

Dried Fruit Story TIME- 2014 SUBJECT- Package redesign

05

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

SHERI - HU