Hi, I am Chou Hsueh Chun This is my user inter face and user experience por tfolio from 2015 to 2019
， 我 是 周 雪 君
自 我 介 紹 剛從
台灣科技大學設計研究所畢業 個性 耐心、有毅力 優點
積極、勇敢、肯吃苦
善於訂定目標並踏實執行
特 殊 經 歷
米蘭理工交互設計交換學生 碩 三 時，到 義 大 利 米 蘭 理 工，學 習 交 互 設計相關的課程
學 習 領 域
中國騰
介面設計實習
碩 一 升 碩 二 的 暑 假，在 中 國 的 騰 介 面 視 覺 設 計 實 習 生 三 個月。
，擔 任
對UX和UI都有概念 UX的學業背景；UI的實習經驗
研究所學習的方向 使用者經驗、人機界面 設計、量化、質化研究
大陸的工作經驗 在大陸知名互聯網公司的實習經驗 歐洲的生活經驗 在歐洲學習和探險的交換經驗
我 的 U I U X
和 個 人 特 色 是 ？
周 雪 君
聯繫資料
教育經歷
實習經歷
擅長的軟體
關於獎項
作 品 四 是 什 麼
內 容 簡 述
U x Ma p p i n g
55
PP05 56
PP12 60
Mobike UX Mapping
First Time User-Index What is inside this map?
Topic
Goal
First Time User
Structure of Persona
“Apply for Transoportation Card”
User Journey
Main Screenshots of Applying Tra
Profile related to using Atm application Senario of using Atm application
Flows of user journey
Bike sharing service from Beijing, access in 180 cities around the world. User Type First Time User
Goal of User
Four Features of Mobike
“Apply for Transoportation Card”
Use Same App Use the sameapp to mobile in cities around the world.
Persona Profile
Convenient & Simple Download mobike, then scan to unlock the bike! After riding park up in any pulic. Easy & Secure Payment Top-up your in-App wallet securely at anytime!
Bio
Name Age Nationality
Harumi 23 Japan
Location Language Occupation
Milan Japanese, English Polimi Design School Student
Harumi this mo at ATM arrive t
Flow of Applying Transportaion Card
Mobike Movement Join the millonan mobiker choosing to go by bike and change their cities.
Take the reservation for Transportation Card
01.Search the info. of transportaion Card
Go to the Atm Point office
03.Search the nearest ATM Point office
05.Check the waiting list number
07.Book a one-way ticket to the Atm Point office
Empathy maps Think & Feel
Get a bike as quick as I can, convenience is the most important things! So I choose Mobilke, then I don’t need to go to station for taking the bike!
02.Download & Start the app
See
Hear
Lots of bike services, but which one is suit for me? Now I still want to use Mobike because it’s really convenience for me.
Discuss with friends or get some information online,then feel a little bit regret for using mobike service.
04.Apply the reservation for transportation card
06.Search the route to the ATM Point office
08.Take and fill application form the ATM Point Offi
Main Screenshots of Applying Transportaion Card on Interface 01. Find The Target ATM Point Office
02. Apply the Reservation and read the information of ATM Point Office
03. Search the Route to th
Say and Do
It’s more expensive than other company, but it’s convenience, and saves many time for searching bike stations. Besides, I can use it in different cities. User Experienc e 01. Home Page
Gain
Pain
expensive than others sometimes can’t find any bike get a broken bike
03. Office List
Too many information
Can’t find which office is the nearest
02. Apply for reservation
Convenience Don’t need to go to bike station
05. Introduction Page
06. Routline Search
Information is too much and unvisuable
04. Booking Page
The name isn’t related to reservation directly
0
Not easy to find the function and the design isn’t clear too
Can’t find the Booking button directly
07. Routeline Guid
Do not show the guid aimed station
Customer Journey Map STAGE
USE IT
ACCESS
FLOW OF MOBIKE SERVICE
GET INFORMATION
DOWNLOAD APP
REGISTER
PAY FOR SERVICE
AFTER USE IT
FIND A BIKE
UNLOCK THE BIKE
RIDE THE BIKE
LOCK THE BIKE
CHECK MY APP
OTHER SERVIECE
-Search & download the app -Read the instruction of the app
-Sign up(mail & phone)
Activity performed by users
-Advertisement -Websites -App Store -Social Media -Word of Mouths
-Pay online -Pay byCoupons -Pay for a month -Pay as I go
-Search on the map -Follow the direction
-Scan Qrcode -Input the bike number
-Adjust the seat -Put my bag -Ride the bike
-Lock the bike -Hear the sound”bee” -Confirm the ride on the app
-View the data of the ride -Check the payment -Check other data on my account(my wallet, my distance, my waste calories)
If something broken, -Scan the bike\Input its number -Select the broken part -Take a picture -message to Mobike by the app -View the Frequently asked questions
-App Store -Google App -Smart Phone
-Mobike App -Smart Phone -Website -Computer
-Online Payment System -Credit Card -Coupon -Mobike App -Smart Phone
-Mobike App -Smart Phone -Map
-Bike -Mobike App -Smart Phone -Mobile’s Camera -Mobile’s Flashlight -Scan Page -Input Page
-Bike
TouchPoints Involved interaction
-Computer -Smart Phone -Advertisement -Bike -Internet(Website, Social Network) -TV -Friends
-Bike -Mobike App -Smart Phone -Confirm Page
-Curious about using a new service -Confused about how the service works
-Normal process -Understand instruction
Download the
using
-Easy -Quick
-People are not sure about how to use this service
Activities
-Well Marketing Strategy -Present clear inform -Care about Evaluation
Opportunities
-Do some advertisement that can introduce Mobike’s feature
-Develop the app -Develop the web -Provide clear instruction
-Develop the app -Develop the web
Function
Clearless and Hard to find Function of Routine guidance is not clear and hard to find
-Is nice to give new user a choice for paying as they go -Pay as a normal online payment
-There don’t have many bikes near my home -The map is simple to read but can be clear and better
-The Scan button isn’t clear enough -Easy for using -Nice to connect the flashlight on scan page
-The bike is short enough for me -It’s nice that the bike has a basket for putting my bag
-Easy to lock the bike -Easy to confirm the trip -If I forget to lock the bike? -If I left something on the bike?
-People do not know how to get the coupon -People want to change their payment(from as I go to monthly). They can’t only pay the difference.
-If I can’t find any bike?
-The Scan button need do more highlight
-How often does the bike do security check? -How to check the bike’s safety situation? -If I get into an accident while riding the bike?
-If I forget to lock the bike, how to stop my trip? -If I left my stuff on the bike, how to find the bike or connect to the customer service?
-Develop the app -Develop the customer service system
-Develop the app -Develop the map -Develop the customer service System
-Develop the app
-Develop the app -Develop the security checking system -Develop the customer service System
-Develop the app -Develop the customer service System
-Let user contact with the service system in the app, and solve the problem faster
-Let user contact with the service system in the app, and solve the problem faster -A better map interface
-Let user contact with the service system in the app, and solve the problem faster -Develop Security Checking page in the app
-Let user contact with the service system in the app, and solve the problem faster -Develop Security Checking page in the app
-It’s nice to see such detail information on my page -The interface are quite clear
Unlike
Pain Points
-Bike -Mobike App -Smart Phone -Mobile’s Camera -Mobile’s Flashlight -Scan Page -Input Page
different with other company
like
Feelings and Experience
-Mobike App -Smart Phone -Map
Pain Points
-It’s nice to give these customer service pages, but the tool button needs more highlight -The icon and text layout are quite clear -The tool button needs to do more highlight, and that people see there has more nice service inside the app.
-Develop the app
Interface
Clearless Need More Detail
Clearless Clearless and Hard to find
Add more details of the timetable
Can’t fill in the transportation card application form in advance on app
Need to go back ho
The app doesn’t have th for going back homepag
Opportunities Function
Interface
-Develop the app
-Redesign the Tool button
User Usability
More Useful Details
Offer Application Form
Highlight the Point
Care about user usability of the interface design and do user test
Add more details of timetable
Offer application form for transportation card on app
Offer transportation card application form on app
Bike sharing service from Beijing, access in 180
部 分 是 什 麼
作 品 簡 述
Four Features of Mobike
Use Same App Use the sameapp to mobile in cities a
Convenient & Simple Download mobike, then sca
U x Ma p p i n g
Easy & Secure Top-up your in-A
Mobik Join th
Mobike
56
0 cities around the world.
around the world.
an to unlock the bike! After riding park up in any pulic.
e Payment App wallet securely at anytime!
ke Movement he millonan mobiker choosing to go by bike and change their cities.
部 分 是 什 麼
作 品 簡 述
Hear
Discuss with friends or get some information online,then feel a little bit regret for using mobike service.
U x Ma p p i n g Pain
expensive than others sometimes can’t find any bike get a broken bike
Mobike
57
e
Empathy maps Think & Feel
Get a bike as quick as I can, convenience is the most important things! So I choose Mobilke, then I don’t need to go to station for taking the bike!
See
Lots of bike services, but which one is suit for me? Now I still want to use Mobike because it’s really convenience for me.
Say and Do
It’s more expensive than other company, but it’s convenience, and saves many time for searching bike stations. Besides, I can use it in different cities.
Gain Convenience Don’t need to go to bike station
STAGE
ACCESS
FLOW OF MOBIKE SERVICE
部 分 是 什 麼
作 品 簡 述
DOWNLOAD APP
REGISTER
P
-Search & download the app -Read the instruction of the app
-Sign up(mail & phone)
Activity performed by users
-Advertisement -Websites -App Store -Social Media -Word of Mouths
-P -P -P -P
TouchPoints Involved interaction
-Computer -Smart Phone -Advertisement -Bike -Internet(Website, Social Network) -TV -Friends
-App Store -Google App -Smart Phone
-Mobike App -Smart Phone -Website -Computer
-O -C -C -M -S
-Curious about using a new service -Confused about how the service works
-Normal process -Understand instruction
-Easy -Quick
-Is ch go -P pa
like
Feelings and Experience
Download the
using
Unlike
U x Ma p p i n g
Mobike
58
GET INFORMATION
Pain Points
-People are not sure about how to use this service
Activities
-Well Marketing Strategy -Present clear inform -Care about Evaluation
Opportunities
-Do some advertisement that can introduce Mobike’s feature
-P to -P th to on
-Develop the app -Develop the web -Provide clear instruction
-Develop the app -Develop the web
-D -D se
-L se an fas
Customer Journey Map USE IT
AFTER USE IT
PAY FOR SERVICE
FIND A BIKE
UNLOCK THE BIKE
RIDE THE BIKE
LOCK THE BIKE
CHECK MY APP
OTHER SERVIECE
Pay online Pay byCoupons Pay for a month Pay as I go
-Search on the map -Follow the direction
-Scan Qrcode -Input the bike number
-Adjust the seat -Put my bag -Ride the bike
-Lock the bike -Hear the sound”bee” -Confirm the ride on the app
-View the data of the ride -Check the payment -Check other data on my account(my wallet, my distance, my waste calories)
If something broken, -Scan the bike\Input its number -Select the broken part -Take a picture -message to Mobike by the app -View the Frequently asked questions
Online Payment System Credit Card Coupon Mobike App Smart Phone
-Mobike App -Smart Phone -Map
-Bike -Mobike App -Smart Phone -Mobile’s Camera -Mobile’s Flashlight -Scan Page -Input Page
-Bike
-Bike -Mobike App -Smart Phone -Confirm Page
-Mobike App -Smart Phone -Map
-Bike -Mobike App -Smart Phone -Mobile’s Camera -Mobile’s Flashlight -Scan Page -Input Page
-It’s nice to see such detail information on my page -The interface are quite clear
-It’s nice to give these customer service pages, but the tool button needs more highlight -The icon and text layout are quite clear
different with other company
s nice to give new user a hoice for paying as they o Pay as a normal online ayment
-There don’t have many bikes near my home -The map is simple to read but can be clear and better
-The Scan button isn’t clear enough -Easy for using -Nice to connect the flashlight on scan page
-The bike is short enough for me -It’s nice that the bike has a basket for putting my bag
-Easy to lock the bike -Easy to confirm the trip -If I forget to lock the bike? -If I left something on the bike?
People do not know how o get the coupon People want to change heir payment(from as I go o monthly). They can’t nly pay the difference.
-If I can’t find any bike?
-The Scan button need do more highlight
-How often does the bike do security check? -How to check the bike’s safety situation? -If I get into an accident while riding the bike?
-If I forget to lock the bike, how to stop my trip? -If I left my stuff on the bike, how to find the bike or connect to the customer service?
Develop the app Develop the customer ervice system
-Develop the app -Develop the map -Develop the customer service System
-Develop the app
-Develop the app -Develop the security checking system -Develop the customer service System
-Develop the app -Develop the customer service System
Let user contact with the ervice system in the app, nd solve the problem ster
-Let user contact with the service system in the app, and solve the problem faster -A better map interface
-Let user contact with the service system in the app, and solve the problem faster -Develop Security Checking page in the app
-Let user contact with the service system in the app, and solve the problem faster -Develop Security Checking page in the app
-The tool button needs to do more highlight, and that people see there has more nice service inside the app.
-Develop the app
-Develop the app
-Redesign the Tool button
作 品 二 是 什 麼
作 品 簡 述
Mobile UI
29
P29 P14
P19 P32
30
工作流程
01 02 03
01 02 03
31
01
02
03
01
02
03
04
05
32
33
01
02
34
35
作 品 壹 是 什 麼
作 品 簡 述
Web UI
05
PP30 05
PP19 07
P 11 P32
PP46 25
工作流程
01 02 03
01 02 03
01 02 03
11
12
13
05
14
15
#DBE2EA
#FFFFFF
#001529
# FA A D 1 4
# 1 B 8 6 FA
# 0 0 0 0 0 0 (7 5 % )
# 0 0 0 0 0 0 (4 5 % )
16
18
Q1
Q2
24
1 A
1A 2A
B
1B 2B
C
1C 2C
a
1
b
2
c
26
2
作 品 三 是 什 麼
作 品 簡 述
Mobile UI,
40
P50 P40
P60 P45
P50
工 作流程
食
41
01
01
02
02
03
03
01
02
03
04
42
01
02
03
43
44
Regular 56px
Regular 48px
A1
Regular 42px
SF Pro Text
Regular 40px
Regular 36px
Regular 32px
Regular 28px
45
ABC123 ABC123 ABC123 ABC123 ABC123 ABC123 ABC123
01
02
03
04
05
06
07
08
46
#
#
#
#
#
#FF6D00
# 0 07 9 F C
#273238
01 01 02
03 03
04
47
04
01
01
01 02 02
48
01 02 03
UI
°C
ON/OFF
United States
United Kingdom
France
China 14%
36% 40% 127,560,000
30%
488,520,000
30%
Japan Taiwan 20%
3%
10%
20%
21%
23%
23%
How Dream Float Works?
DATA 18th NOVEMBER 2015
User can know about his/her information of sleeping situation.
Sleeping Condition
23 00 01 02 03 04 05 06 07 08 54% Light
Bed Time Rise Time Duration
Dream Float connect to the cloud and memories the sleeping data of user.
The sound will stop automatically when user fall in sleep.
An App to notify the user time to go to bed.
23% Deep
23:33 07:48 07h15m
When sound play in high tone,breath in.
When sound play in low tone, breath out.
Build Up
Carry your things ; carry your live
Surprise!
Win!
Chou Hsueh Chun’s UIUX Portfoliio
Hi, I am Chou Hsueh Chun This is my user inter face and user experience por tfolio from 2015 to 2019
， 我 是 周 雪 君