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