2019

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

， 我 是 周 雪 君