Digital interaction portfolio

User design experience design User experience

LITTER BIN

PROJECT 1 1 PROJECT

USER EXPERIENCE DESIGN

USER EXPERIENCE DESIGN

LITTER BIN

User experience design

LITTER BIN

PROJECT 1

USER EXPERIENCE DESIGN

PROJECT 1

User experience design

User experience design

1

LITTER BIN 'Makeing garbage sorting easier' Individual design

1

USER EXPERIENCE DESIGN

LITTER BIN

|

June 2019 - July 2019

User Userexperience experiencedesign design

1.Recently, the city government in China has successively passed the “Regulations on Urban Waste Management”.

2.Residents are troubled by mandatory regulations and the lake of classfication knowledge.

PROJECT PROJECT1 1

Hospitality industry and catering industry should not provide disposable products to customers， otherwise will be fined.

Individuals who are not classify garbage and do not listen to dissuasion will be fined 50 to 200 yuan.

The type of daily garbage is too much, it is difficult to distinguish.

For office workers, there is very little leisure time every day, and they have little energy to classify garbage.

Shanghai’s garbage is only released twice a day, sometimes it misses the rest time of office workers.

LITTER BIN BIN LITTER

USER EXPERIENCE EXPERIENCE DESIGN DESIGN USER

2

RESEARCH

PROJECT 1

User experience design

Scenario survey

In Wuhan, because there is no mandatory waste sorting regulation, most areas only place the trash cans anywhere, there is no fixed position, and many garbage bins do not have classification marks. In some streets or squares where people have a lot of traffic, there will be some discarded lunch boxes, paper balls, and even vomit. This shows that some urban residents still have no awareness of garbage classification.

Statistics

4 billion/year In 668 cities in China, 2/3 are surrounded by garbage belts.

1

If we can recover fully tap the resource potential inherent in the garbage, only Beijing can get economic benefits of $ 1.1 billion per year.

30%~40% of domestic garbage can be recycled.

3

China uses 4 billion plastic fast food boxes every year.

2

3

USER EXPERIENCE DESIGN

LITTER BIN

Statistic 1 : from THE PAPER 21-08-2018.

Statistic 2 : from www.cn-hw.net 02-2009.

Statistic 3 : from Chinese Journal of Environmental Management 26-07-2018.

User experience design

PROJECT 1

Individual survey In this individual survey, I used a questionnaire to survey about 50 people from different cities and different professions. Want to understand the perceptions and practices of people in different environments about waste sorting.

8%

54% 57%

Public area satisfaction

16%

44%

71%

Trash can category

Troubles 15%

28% 19%

43%

19% of people are very satisfied with the public areas in which they live.

About 57% of people are satisfied with the public areas in which they live.

16% of residents are not satisfied with public areas.

Only 8% of residents are quite dissatisfied with the public areas in which they live.

Classified trash can：28% Traditional trash can：28%

Fixed garbage collection station： 44%

Among the factors affecting waste classification： More than 71% of residents do not know how to classify.

54% of people think that their leisure time is too little.

About 43% of people do not have classified trash cans The proportion of residents who believe that others are not classified and other reasons: 15% respectively.

When people throw garbage outside：

57% Will throw garbage in accordance with the signs on the trash can

In the survey, 71% of people thought they needed the assistance of the garbage sorting app.

Only 29% of residents believed that no app assistance was needed.

43%

Will not throw garbage in accordance with the signs on the trash can

Surprisingly, none of the 50 people surveyed had the habit of collecting old batteries ！

LITTER BIN

USER EXPERIENCE DESIGN

4

PROJECT 1

User experience design

Interview In the questionnaire, I choose two typical people to interview.

Ivan

Linsei

Advertising profession Age：25

Student Age：21

Target people

Target people Most office workers with fixed timelines，they pursue efficient life and don't have much energy on garbage disposal.

It represents a group of students or family housewives who spend more leisure time, but often they are not very concerned about garbage classification, or they are often in an environment without garbage classification.

"I think the impact of the garbage classification method issued by Shanghai on me is very big. I am now trying to cook less at home."

"I really can't stand the unpleasant smell of the traditional trash can downstairs in the school dormitory!"

About Ivan：

About Linsei：

Ivan is a fashion writer in the advertising industry. His working hours are also fixed.

He lives in a single apartment and usually likes to cook，so there is more domestic garbage. But he has little time to do garbage sorting because he has very little leisure time.

The problem he encountered：

Linsei is a college student in Wuhan. She usually lives in a school dormitory. Therefore, there are many food wastes. Most students do not have the awareness of garbage sorting, and the school does not have a classified garbage bin. Therefore, the garbage mixes together and gives off an unpleasant taste.

The problem she encountered：

Making mistakes will be fined.

The garbage schedule set by the community coincides with the time of work, which makes it sometimes impossible to throw away the rubbish.

The function of the existing garbage sorting application is too simple.

Degree of anxiety 5

USER EXPERIENCE DESIGN

LITTER BIN

Waste was caused because no waste sorting was implemented.

When the garbage is left for a long time, it will emit an unpleasant smell and affect the environment.

Degree of anxiety

User Userexperience experiencedesign design

PROJECT PROJECT11

Ivan

Linsei

Painpoint 1

There are so many types of household waste that it is difficult to distinguish.

2

The government-stipulated garbage disposal time conflicts with the time of going to work.

Many people still don't have the awareness of garbage 3 sorting.

4

Sometimes some waste is not handled well.

5

There is not much time to do the classification.

To develp Make it easy for users to find the type of garbage.

Can have on-site service, saving users time.

Can be extended to more people to use this app.

Let users benefit from certain wastes.

LITTER BIN USER EXPERIENCE LITTER BIN USER EXPERIENCE DESIGN DESIGN

6

PROJECT 1

User experience design

Competitive Analysis I have chosen three current mainstream environmental applications.

Function

Highlights

Store

Social circle

The Conclusion

Disadvantages

What Garbage

Speech recognition

The function of the app is too simple

Garbage Classification

Photo recognition

Poor interface design

Yellow Dog

Recycling income

The function of the application is more complicated

The user interface should be concise and clear. Avoid users being disturbed by other useless information.

Increase user's viscosity through some practical application functions.

Increase the content richness of the application, and better solve the problems encountered by users.

Add user feedback function to the app, the information in this application can be more credible.

Content richness

Inspiration Interface aesthetics

1

5

10

User experience

Online social circle

What Garbage Garbage Classification

Online store

Yellow Dog

Information credibility

7

USER EXPERIENCE DESIGN

LITTER BIN

Reservation function

User experience design User experience design

PROJECT 1 PROJECT 1

Main Functions

Functional Architecture

Circle Online Store

Orders

Orders details

Log in Product details Identification result

Speech Recognition

Identification result

AI Recognition

Confirm reservation

Reservation function

Buy

Store Shopping cart

Home page Main interface Circle

Successful appointment

Detail

Secondary classification

Personal information modification

Category

Primary classification

Setting

Feedback

Notifications

Online store Users can buy some necessities for garbage sorting in the online store, or buy some other household items.

Two different ways of identification

Post

Circle setting

Result

Users can post their opinions and questions in the circle function, or comment or collect the experience of others, and discuss and solve the problem together.

Users can choose speech recognition and AI recognition to identify the type of garbage.

Users can even use AI recognition to check whether they correctly classify garbage.

Reminders

General Log out

Application focus

Operation Gestures

Usage frequency: users can often useďźŒhigh user viscosity.

& Click

Long press

Slide

Zoom in & out

Usage scenariosďźšthe scenes used are more common.

For users: easy to use.

LITTER BIN BIN LITTER

USER EXPERIENCE EXPERIENCE DESIGN DESIGN USER

8

PROJECT 1

User experience design

User experience design

9:41

9:41

9:41

9:41

9:41

01

9:41

9:41

9:41

9:41

9:41

The TIME you want to make an appointment.

8:00 am 10:00 am 2:00 pm 4:00 pm 6:00 pm 8:00 pm

TIME

10:00 am

ADDRESS Dapu Road No.88(Jinxietu Road), Huangpu Shanghai China

Do need to pack?

SUCCESS !

extra 15 RMB

Course fee

10 RMB

TOTAL

10 RMB

The staff is coming , please wait patiently .

Wechat pay

Sound

Share With Your Friends

Printer

Vibrate

Application

Reservation Now

Log Out

Printer to be recycled.

Card

Action

Questions

Quit

confirm

Submit

Book recovery now

Questions

circle circle

category

store

9:41

9:41

A

store

07 Setting

9:41

9:41

Waste bag

orders

Recyclable waste

A

Alice 7:43 am Who can help me to identify the garbage

9:41

store

9:41

182 Followers

Cancel

New

user

user user

circle

@mlatropine

60 Follow

category category

9:41

9:41

circle

circle

store

02 Identification interface

03 Reservation interface

Nate

category

user

circle circle

9:41 9:41

A

My post in the trash can.

Alice 7:43 am Who can help me to identify the garbage in the trash can.

Click to upload your images：

Intransit Intransit

Waste bag

Profile Mental waste

24.9RMB

Notifications

Recyclable waste My like

Rubbish bag 20*40 15pieces

Aluminium product

Choose the type of garbage：

The function of the mall is added to the LB, and the user can directly pu rch as e s om e h i gh quality daily necessities, which can also increase the viscosity of the user.

Recyclable waste

@

Favorites

B

the

Q W E R A S D F

the

T Y U G H

I J

123

C

space

L

Who can help me to identify the garbage in the trash can?

Will Smith

Voice-post is similar to the way we send voice messages with others.

Plastic products

Paper products

Submit review

5 mins ago

Banana peels and aluminum cans should be separated, honey.

Plastic products

Go like

04 Circle

Description

……

O P K

Paper products

Mental waste

B

the

Z X C V B N M

comment

Circle is a function that is based on a user’s problems or status during the garbage sorting process.

Users can post their own questions, favorites, experiences, etc. in circle to solve problems for other users who use the app.

aluminum alloy

Reservation recycling

USER EXPERIENCE DESIGN

LITTER BIN

grey

shopping

20 pack

14.90 /20 pack Pedal bin height 30 cm white

ADDRESS

Waste bag grey

Completed

20 pack

Waste bag grey

The distance between the staff and you is 2.3 km.

20 pack

Evaluation

14.90 /20 pack

white

category

Waste bag

Printer View more

Bottle brush circle

9:41

one

Call the staff

BUY NOW

Users can use feedback to improve the content richness and accuracy of categories.

C

Confirmation of receipt

Multi-sort Container

Green

Mr. Zhu +86 17723893892

Choose a delivery method express

Huangpu District

M

Product description

user

Edit

Dapu Road No.88(Jinxietu Road), Huangpu Shanghai China

Choose the commodity storage sites

Add to list

Rubber gloves

circle

category

store

user

Discount 10%

Glass

Product size Environment & materials Details

circle

D

category

store

user

05 Category circle

category

circle

category

store

user

TOTAL

Similar products

Electronics

shopping

user

Rubbish bag

Multi-sort Container

Can

Rubber gloves

06 Online Store

24.9RMB

Contents & description

Submit Questions

Interaction

Product details circle

9

After comprehensive understanding of what function does the application contain,a wireframe is made to make sure the contents & interactions of different pages. Here I take the user journey to show how it works.

Tap to share with AirDrop

Message

Agreement And Privacy

Speak……

Printer

8:00 am

Following and Followers

General

AI

Today

Reminders

Payments

The user selects the sound or AI to identify the type of garbage.

Recognition result

Time to take out the garbage ！

Pause All

Notifications

About

Enter your ADDRESS

Payment options

Alipay

The user fills in the time and address and then pays for a garbage collection appointment.

Wireframes

Now

EASY

Nate

Nate

CHECK your reservation information.

PROJECT 1

category

store

user

LITTER BIN

USER EXPERIENCE DESIGN

10

PROJECT 1

User experience design

User Interface

Visual identity

Title/display Avignon/PingFang SC

Text/content PingFang SC

11

USER EXPERIENCE DESIGN USER EXPERIENCE DESIGN

LITTER BIN LITTER BIN

LITTER BIN Making garbage sorting easier

ABCDEFGHIJKLMN ABCDEFGHIJKLMN abcdefghijklmn abcdefghijklmn 123456789 @#Â¥%&...

User experience design User experience design

PROJECT PROJECT 1 1

User Interface

LITTER BIN LITTER BIN

USER EXPERIENCE DESIGN USER EXPERIENCE DESIGN

12

PROJECT 1

User experience design

User experience design

Storyboard Use the Litter Bin to scan to see what type of garbage the printer is.

There is a lot of garbage....

The printer is recyclable.

Find the type of garbage through the Litter Bin

Litter Bin

The printer is recyclable, so don't make mistakes, let employees recycle the printer. ď˝œ

Recycle this printer, it is no longer useful to me.

PROJECT 1

The classified garbage bag is running out, buy some on the Litter Bin.

Send status via circle

now

Your recycling order has been completed.

Complete recycling 13

USER EXPERIENCE DESIGN

LITTER BIN

The employee performs the recycling step

received the package

purchasing....

Browsing....

Reservation recycling LITTER BIN

USER EXPERIENCE DESIGN

14

PROJECT 2 PROJECT 2

Service design Service design

Service design

EBIKE

2

'Let people fall in love with electric bicycles!'

Individual design | May 2019 - August 2019

15

SERVICE DESIGN SERVICE DESIGN EBIKE

EBIKE

Service Servicedesign design

BACKGROUND

PROJECT PROJECT2 2

LITERATURE RESEARCH

Number of college students：1.3

In many campuses in Wuhan, the modes of large number of student's trip in schools is getting more and more attention.

WUHAN

million

Number of universities：89 There are seven schools with an area of more than 1000000 m² ！

1.3 km

2.2 km

3.3km 2.4km

Huazhong University of Science and Technology

Wuhan University

Wuhan University and Huazhong University of Science and Technology are the two most famous universities in Wuhan, and their area is also very large. But this may cause inconvenience to students or faculty members.

According to the survey, most students commute on campus every day for about 40 to 60 minutes.

EBIKE EBIKE

SERVICE DESIGN SERVICE DESIGN

16

PROJECT 2 PROJECT 2

Service design Service design

DESIGN PROCESS

1 2 3 4 5

Research User research Find painpoint & define problems

Provide design solutions

Research Analysis In the field survey, the survey area is also set at the two representative schools of WHU and HUST.

Questionnaire Insights

Offering map Stakeholders

Concept New system map Blueprint Development

Interface Use scene New journey map

SERVICE DESIGN EBIKE EBIKE SERVICE DESIGN

Main waysďźš

electric bicycle

Campus bus

bicycle

walk

Persona

Model

Touchpoint 17

FIELD RESEARCH

PEST ANALYSIS

P

E

S

T

In Wuhan, the government has not vigorously promoted the sharing electric bicycles.

Due to the setbacks in the previous shared bicycle program, the capital investment of the shared products by enterprises and the government is not satisfactory.

In the society, some people have caused damage to the shared bicycles and caused damage to the bicycle ecosystem.

Due to some imperfections in technology, it also causes inconvenience for users to ride.

Service design

PROJECT 2

QUESTIONNAIRE

CURRENT SITUATION ANALYSIS Electric bicycles in Wuhan have been the product of the rise in the last two years. The coverage area is not extensive. It has the advantages of convenience, but there are also some unavoidable shortcomings.

I conducted a questionnaire survey of about 100 students and faculty members at four universities.

1.The proportion of respondents who used shared electric bicycles was

ADSVANTAGES

USER

DISADSVANTAGES

LOW COST

Scan code

Billing by time, each time it costs less than the bus.

Sometimes the scan code is not very fast.

Free

Returned location

Anytime, anywhere, independent of the route.

According to the mobile phone positioning system, sometimes the inaccuracy will cause the return failure.

Eco friendly People go out to use the clean energy of electric bicycles. This kind of GOVERNMENTS behavior is friendly to the environment and it is worth encouraging.

Order disorder If the relatively free way of riding a bicycle is not well regulated, it is easy to cause chaos in the traffic order and even a safety accident.

as high as

95% ďź

2.usage frequency

51% Every day

3.How the user chooses the distance to ride (electric bicycle).

8%

39%

0-2km 2-4km

53%

30%

19% Less than 3 times a week

3-5 times a week

4.Attitude towards the development of shared electric bicycles.

23% 52%

>4km

25%

Keep a wait-and-see attitude.

Be optimistic.

A pessimistic attitude.

In the questionnaire survey, most of the respondents pointed out some advantages and disadvantages.

A large number of abandoned shared bicycles.

investors After experiencing the boom of shared bicycles two years ago, many problems were exposed, which made investors suspicious or wait-and-see attitude towards shared vehicles.

1. The price is cheap.

2. Energy saving and environmental protection.

3. Easy to use.

1. Single type.

2. A high deposit is required.

3. It is difficult to find a shared electric bicycle available.

4. Some electric bicycles are maliciously damaged by others.

EBIKE

SERVICE DESIGN

18

PROJECT 2 PROJECT 2

Service design Service design

INSIGHTS Here are several critical sayings spotted in on-spot observations(with short interviews)and deep interviews,from which I can find insights for service or UX problems.

Optimize the APP to improve the user experience.

Optimizing the system ďźŒlet is more straightforward for users to find available electric bicycles.

Change the charging mode of existing electric bicycles.

Use a way similar to a personal credit system to reduce the deposit.

Look for an upgrade or change the original parking method.

Look for an upgrade or change the original parking method.

Looking for a better connection method.

19

SERVICE DESIGN EBIKE EBIKE SERVICE DESIGN

View the power of each bike directly on the app.

Service design

PROJECT 2

PERSONA Based on the research, I created a persona.

AGE: 22 OCCUPATION: Stufent TIME ADEQUACY: Free

Eddie

MONEY:

Busy

Shortage

Sufficient

Eddie is a college student, grade is a junior, because he is nearing graduation, so he has more things, often go out to field trips, class or do things. Because the campus area is relatively large, it takes a long time to walk, and it is also very tired; the campus bus sometimes can not meet his time needs, so Eddie likes to use electric bicycles.

USER JOURNEY CONTEXT

BEFORE USING Finding electric bicycles

Electricity situation

USING Scan code

Account Balance

AFTER USING

Find a parking spot

The accuracy of parking spots

Confirm return

STEPS Sufficient

Insufficient Check the account balance.

THINKING

OPPORTUNITY

Is there an electric bicycle nearby?

Find electric bicycles.

Can the remaining electricity meet my route?

Is there any other bicycle with sufficient electricity?

Power display.

Is the QR code damaged by others?

Is the bicycle occupied by someone else?

Connection method.

Is the account balance sufficient?

Is there a place to park nearby?

Balance reminder function.

Connection method.

Did I park my bicycle in the prescribed area?

Did the app confirm the return and stop billing?

How to park more efficiently.

FEELINGS

MODE CURVES

PAIN POINT

PAIN POINT

EBIKE

SERVICE DESIGN

20

PROJECT 2 PROJECT 2

Service design Service design

SERVICE OFFERING MAP

Need to turn on Bluetooth

It is not clear whether it is occupied by others

BEFORE

High deposit

STAKEHOLDERS

Financial support

Promotion

Hard to find available bicycles

USER Need to open the app to check the battery

The parking area is very blurry

income Use

MANUFACTURER

GOVERNMENT

Produce

Coordinate

SERVICE VALUES From perspective of Service Provider

From perspective of Service User

EFFICIENCY

CONVENIENCE

Invest ELECTRIC BICYCLE

INVESTOES

Technical Support Find the charger directly in the app and check the battery level.

DEVELOPER

Free of deposit after completing student certification

Eliminating the need for manual battery change

Cooperate

PROMOTION PLATFORM

Financial support Financial support

SERVICE DESIGN

EMPLOYEE

Add long-term rental features

FUTURE

21

Emplyment

EBIKE

Promotion

income

Service design

PROJECT 2

CONCEPT

EBIKE is an application that focuses on sharing electric bikes on campus. It is mainly optimized for service design in the previous shared electric bicycle application. The purpose is to improve the efficiency of use, increase the convenience of users, reduce the cost of labor, improve efficiency and profitability in terms of providers.

Users can pay some money to rent a long term, eliminating the trouble of finding a car every time.

1 The user can be exempted from deposit after passing the student certification.

2 Identity authentication

can also reduce the phenomenon of uncivilized use of bikes to a certain extent.

Users can directly view available electric bicycle charging piles through the app.

Very intuitive to know if the vehicle is occupied by others.ďźˆThe electric bicycle being charged means that it can be used.

Charging piles replace the traditional manual battery replacement method, reducing the economic expenses of hiring staff and improving the efficiency of maintenance.

Users only need to charge the shared electric bicycle to complete the ride, and the system stops billing.

EBIKE

SERVICE DESIGN

22

PROJECT PROJECT 2 2

Service design Service design

SYSTEM MAP Provide promotional funds

Economic benefits from users

INVESTOES

Capital investment

Capital investment

Capital investment

R&D information and technical drawings

DEVELOPER

EMPLOYEE

MANUFACTUERE

Production related products

Based on user-developed information.

The new system shows close links between the parties in the entire cycling ecosystem. I define new touch points, such as applications and devices, and streamline the role of maintenance personnel within the system, which increases efficiency and reduces manpower investment.

Equipment maintenance

Association

APP

ELECTRIC BICYCLE Deposit and rent

Personal certification and acquisition positioning/ Bicycle information and parking spot information

Electric bicycle that can be used Financial support

Cooperation

Tax

GOVERNMENT

USER

PROMOTION PLATFORM

Information flow Financial flow Material flow

Advertising, posters, flyers, etc.Promotional information

Promotion information and promotion methods

23

SERVICE DESIGN

EBIKE

SERVICE DESIGN

EBIKE

Service Service design design

PROJECT PROJECT 2 2

SERVICE BLUEPRINT The service blueprint is primarily aimed at the journey of the user using the electric bike from start to finish. Optimize the pain points in this process, making the user's use process more convenient and fast.

The user is ready to use electric bicycle

Look for available electric bikes.

Open APP.

The user browses the map and sees the available electric bicycles and quantity of electricity.

The user views the route.

Enter the pairing code for the electric bicycle.

Back stage system receives instructions.

Analyze the positioning of bicycles nearby.

Analyze and calculate the best route.

Receive information, connect to the charging pile and unlock the bike.

Mobile phone network signal + Bluetooth assist system

The user goes to the parking spot.

Map location support system

Unlock electric bike.

The user views the available return locations.

The user returns the electric bicycle.

Shows the most recent available parking spots.

Comfirm

Start billing.

Analyze the best parking spots.

Stop billing and the charging pile begins to charge.

payment system

Map location support system

Cycling

EBIKE

SERVICE DESIGN

24

PROJECT 2

Service design

INTERFACE FOR EMPLOYEES

INTERFACE FOR USERS

1 Log in

4

Service design

6

PROJECT 2

Forgot the password

Log in in Log

1

Register Bicycle number

1

3

Input Number

Route

Repair time：06/04/2019

It is

Stuff

2

Employee version

days before regular maintenance.

2

Broken Record

Electric bicycles with problems

689088

Editing

688845

My Long Rent

1 Home Page

2

Start Up

4

My Position Countdown

Clock In

Remaining time：15 days

Location

Start Up

Renewal

Homepage Home Page

Uploading

687011

Power 100%

2

687011

Renewal 3 Yuan

Withdrawal Don't want to continue renting?

2

Feedback

'Let people fall in love with electric bicycles!'

5

Itinerary Record My Itinerary Appeal

Maintenance Records Employee version

689015

Number 689060

Number

6

Recharge

689060

100% 87% 100%

Balance： 3 yuan

My Wallet

3 Personalinformation information Personal

689060

Number

Recharge Deposit

My Itinerary

7 Authentication

My wallet

Successful Certification Input Number

Setting

Authentication

You have 3 yuan left in your balance You can ride for 30 minutes.

My Long Rent

Setting

Log Out Walking

Align front of student card within frame to scan.

Riding

Customer Service

12 mins

0.8 Km

Passing two intersections on the way

Start navigation

Log out

Customer service

3 7

25

SERVICEDESIGN DESIGN SERVICE

EBIKE EBIKE

EBIKE

EBIKE SERVICE DESIGN SERVICE DESIGN

Question

26

PROJECT 2 PROJECT 2

Service design Service design

SKETCH

Charging

85%

The battery display on the charging pile can intuitively show the battery status of the shared electric bicycle, and the user can understand more directly.

The charging pile has a charging line protected by a waterproof cover, and the charging line has the function of leakage protection.

The number of charging ports can be changed depending on the user's usage and the intensity of the electric bicycle.

Users only need to charge the shared electric bicycle to complete the ride, and the system stops billing.

27

SERVICEDESIGN DESIGN SERVICE

EBIKE EBIKE

Service Servicedesign design

PROJECT PROJECT22

THE NEW USER JOURNEY BEFORE USING

Finding electric bicycles

Eddie

A new electric bike search mode.

Electricity situation

Upgrade the battery display system.

USING

Scan code

Account Balance

Use a more efficient connection.

Smart balance display.

PAINPOINT

AFTER USING

Find a parking spot

The accuracy of parking spots

Confirm return

Adding charging post hardware changed the parking method.

PAINPOINT

MAIN OUTCOMES

Mobile UX/Iinteraction re-design

Service Improvenments EBIKE EBIKE SERVICE SERVICE DESIGN DESIGN

28

PROJECT 3

Product & UI/UX Design

3

Product Design and UI/UX Design

HoSi

Put down your phone and sleep well.

Group Work Role: Product Manager, Interaction and Graphic Designer March 2019 - May 2019

29

PRODUCT & UI/UX DESIGN

HoSi

Product & UI/UX Design

PROJECT 3

BACKGROUND

Smartphone have become an indispensable daily product for millennials, and their dependence on smartphones is beyond imagination, so how to improve this situation. * Millennials are defined as people who are age 18-34.

PRODUCT & UI/UX DESIGN

HoSi

30

PROJECT 3

Product & UI/UX Design

LITERATURE SURVEY Excessive use of smartphones can easily irritate the brain, making the brain too active and making it difficult for people to fall asleep, resulting in poor sleep quality.

Insomnia

The danger of overusing smartphone before going to bed.

People often use their smartphones before going to bed to put their pillows behind them, which may cause discomfort in the spine for a long time.

Cervical spondylosis

The screen light source of the smartphone makes people's skin prone to oily pores and even acne.

Skin condition

Screen light will irritate people's eyes in the dark environment, and may cause damage to the retina in the long run.

Retina 31

PRODUCT & UI/UX DESIGN

HoSi

Product & UI/UX Design

PROJECT 3

USER RESEARCH I surveyed about 100 people aged 19-30, among the 100 respondents:

When do they sleep at night?

I didn't have anything to do while lying in bed before going to sleep every day. I wanted to use a smartphone for a while to pass the time, but Fang Yimei 22 it was easy to forget the time.

Student

85%

85% of people fall asleep at 11:00 to 1 am.

89%

I sometimes get excited after I finish my mobile game, and the game will always appear in my Wang Ye 26 mind, which will affect my sleep.

Designer

57%

Among respondents, the proportion of uses smartphones before bed is as high as 89%.

How long they use their phone before bed?

Of these 85% of respondents, half of them fall asleep after 12 am.

50%

57% of respondents believe that using a smartphone before bed has an impact on their sleep.

Sometimes I will watch my favorite TV series and see it late, which makes me sleepy the next morning, which affects my learning efficiency.

He Yuankai Student

20

The alarm clock of the mobile phone is hard to wake me up in the morning.

Peter 28 Fitness coach

46% 30-60mins

30%

24%

>60mins

<30mins PRODUCT & UI/UX DESIGN

HoSi

32

PROJECT 3

Product & UI/UX Design

GOAL

ç&#x203A;Žć &#x2021;

Based on research on interviews and literature, design a smart sleep device called hosi, which works with our smartphones to reduce the addiction on the phone before going to bed and promote a healthy sleep cycle.

LIGHT

SPEAKER

Light that can change depending on the environment or control.

Will not irritate the eyes.

*

Voice assistant.

White noise.

Smart wake up alarm.

Transition time music.

HoSi 33

PRODUCT & UI/UX DESIGN

HoSi

*

The transition time means that the user can set a period of time, and the hosi will start to remind the user that he is going to sleep at the beginning. At the end of the transition time, the hosi will enter the sleep setting.

Product & UI/UX Design

PROJECT 3

DESIGN EVOLUTION

DESIGN & SKETCH

草稿

PRODUCT & UI/UX DESIGN

HoSi

34

PROJECT 3

Product & UI/UX Design

EXPLODED VIEW PCB Control center and speech recognition module.

Metal bracket Supports the overall weight and can be folded to save space.

Cable Users can select the type of cable and interface according to their mobile phone type.

Diffuser The diffuser uses an acrylic matte texture that softens the light.

Wireless charging and battery Users can choose HoSi's charging method (wireless, Android, IOS), and there is a battery in the body to maintain the output.

LED Board The light board uses LED lamp beads with a brightness range of 2-400 lumens to meet various scenarios.

Aluminum alloy body

3D MODELS

PRODUCT & UI/UX DESIGN

Voice assistant.

White noise.

Smart wake up alarm.

Transition time music.

Button

The body is lighter and easier to move.

35

Speaker

HoSi

Switch button and adjustment button.

Product & UI/UX Design

PROJECT 3

USER INTERATION

Add Device The user establishes a connection with HoSi by using the Bluetooth function and immediately turns on the use. * * *

Home Page On the home page, the user can choose to adjust the lighting, timeďź&#x152; and sound.

Light Users can control the lighting of the HoSi, or set the scene, and hosi automatically adjust the light according to the scene.

Sound & Time The user can select time and sound, white noise and set the situation.

Setting Some basic settings of HoSi.

Connect via Bluetooth.

Can use Siri and Google Assistant.

Support for Apple Homekit.

PRODUCT & UI/UX DESIGN

HoSi

36

22:00

Product & UI/UX Design

PROJECT 3

1.Sleep reminder When the hosi enters the sleep reminder, the light will dim and the voice will alert the user.

23:00 2.Turn on sleep mode The user inserts the smartphone into the charging pad, and the hosi automatically switches to the user-set sleep mode.

23:00 3.Sleeping light and white noise In sleep mode, the hosi emits a dark red breathing light and white noise to help the user fall asleep. The length of time can be determined by the user.

4.Smart voice assistant

02:00

Hosi's voice assistant helps users to use basic features at night without picking up their phone.

07:30 5.Wake mode In the wake mode, the hosi simulates the form of daylight, emits a gradual white light, and plays an alarm clock.

PRODUCT & UI/UX DESIGN

HoSi

37

Product & UI/UX Design

PROJECT 3

HoSi can act as a normal light and Bluetooth stereo during the day. After the sleep mode is turned on, the brightness of the light is reduced, and the sleep light is red, and the white noise set by the user is played to help sleep.

Users can connect smart watches to HoSi for more accurate sleep monitoring.

23:00

Melatonin

Red Light

White Noise

24:00

Function Curve PRODUCT & UI/UX DESIGN

HoSi

38

PROJECT 3

Product & UI/UX Design

After dawn, the sound plays an increasingly strong alarm, and the light simulates the sunrise effect.

When the user removes the mobile phone, the effect ends and becomes the normal mode.

HoSi is suitable for office workers and students who have mobile addiction before going to bed and are willing to change and develop good sleep habits.

07:15

Melatonin

Simulated Daylight

Function Curve 39

PRODUCT & UI/UX DESIGN

HoSi

Alarm

07:30

WeChat mini program design（Sustainable）

PROJECT 4

WeChat mini program design（Sustainable）

Paper Ring Individual design | December 2018 - January 2019

WeChat mini program design（Sustainable）

Paper Ring

40

PROJECT 4

WeChat mini program design（Sustainable）

The huge waste of resources is a serious problem facing the society. Sustainability is a more appropriate way to alleviate this problem, so how can ordinary people participate more directly and actively in this process?

41

WeChat mini program design（Sustainable）

Paper Ring

BACKGROUND While working for H&M, I learned about the brand's sustainable plans, working with recycling organizations to recycle people's discarded fabrics and recycle them.

X There are a lot of idle items around college students.

Books and notebooks

Express box

Shopping Bags

Throw away Most people will eventually discard these idle items.

So how do we deal with these items in a sustainable manner?

WeChat mini program design（Sustainable）

PROJECT 4

LITERATURE SURVEY

RECYCLED PAPER

Recycled paper is made from waste paper raw materials and is known as environmentally friendly paper with low energy consumption and light pollution.

COMPARED WITH GENERAL PAPER

THE STATUS QUO OF RECYCLED PAPER IN CHINA. People's understanding of recycled paper is not enough.

The recycled paper market in China is not mature enough, and the small demand for the people has caused the company not to produce a large amount of recycled paper.

1

The color of recycled paper is more friendly to the eyes than ordinary white paper.

The cost of producing recycled paper is actually higher than that of general paper.

The pollution caused by the production of recycled paper to air and water is much lower than that of ordinary paper.

Eco-friendly because the raw material of recycled paper is waste paper.

China's waste paper recycling rate is too low, the domestic recycling process is not mature enough, and the waste paper recycling rate is 50%, far lower than other developed countries.

2

1

Environmental protection begins with green chemistry, Cao Liangliang, Science Guide to Science, 2011

2

Recycled paper protects the eye of the earth, Li Ying, ENVIRONMENT, 2008 (12)

WeChat mini program design（Sustainable）

Paper Ring

42

PROJECT 4

WeChat mini program design（Sustainable）

INTERVIEW

TRADITIONAL RECYCLING Garbage collector

Waste paper

Idle item

I have had some interviews with my classmates, friends, and professors.

Waste paper acquisition station

Recycled paper factory

Sorting and reproduction

Among those interviewed, the proportion of people who correctly handled idle books accounted for only about 6%.

Throw away

DISADVANTAGES: Traditional recovery step is complex and requires more manpower, people are in a passive state in these stages.

Recycling Idle books Continue to idle

55% 15~20kg 33% 5~15kg 10% <5kg 2% >20kg

About the weight of idle books Among the majority of respondents.......

How do you deal with idle books?

ONLINE RECYCLING

Deal with? I never deal with them , I just piled them in the corner.

Although I really want to deal with these books, I don't know where I can donate, and I can only throw them away hahaha.

I don't get any benefit from donating books or recycling them, so it's better to keep them.

INSIGHT There are very few online recycling applications available on the Chinese market. These applications have some drawbacks:

1. It is difficult for people to benefit from it.

2. The ultimate goal of the recycled book is not clear.

3. Need to make an appointment, the time of recycling is not flexible enough.

43

WeChat mini program design（Sustainable）

Paper Ring

1. How to make it easier for people to recycle idle books.

2. How to get people to get benefits directly from the recycling process.

3. Streamline the recycling steps so that the stakeholders get more benefits.

WeChat mini program design（Sustainable）

PROJECT 4

JOURNEY MAP During

Before

r

pe

a dp

n

Deal with? I never deal with them , I just piled them in the corner.

sa ok bo ts. e Idl duc pro

After

a s in ok te bo a l u le d m i . cu ed ore ac are. ard dm up sc l to ot c i n a e d a n . su tak be ore cts ca oes ts ly e uc e m rodu on ery nd d es r d v h a n p o t s a r ca er It i ner ith ere rp , it r Th pap pe lw co d pa ea ally d n i d an F to an ce. a ks ort oo h sp eff b f c o e Idl o mu ot al to es gs. k a It t thin e idl

er

nd

Although I really want to deal with these books, I don't know where I can donate, and I can only throw them away hahaha.

a ks oo . b s e Idl duct pro

p pa

s.

ard

er

ycl nd rec p a cle. e p a th y to ng. ing rec ycl t to les cycli c k d e i c n i r e p ne intme the he r to nli ver lete t taff n o appo o s a p d nd n ing Fin ke a Ha com ycl ec nd r ma a the . r or it f doo a W the up

ew tr

Ge

y.*

ne

I don't get any benefit from donating books or recycling them, so it's better to keep them.

*The price of waste paper recycling in Wuhan in 2018 is only 260 dollars per ton.

ok bo ts. e l Id duc pro

a

dp

n sa

ere

h sw nd rie e is. f k As chas r pu

the

rap

sc

fi cts ssi du cla pro . r r o f n pe pa atio ing ait nd n st a W o s cti ok bo olle dle rap c i c nd Se the s to

ittl

yl

.

on

ti ca

r pe

er tv

o em

Ge

WeChat mini program design（Sustainable）

Paper Ring

44

PROJECT 4

WeChat mini program design（Sustainable）

Painpoint

User Requirement

1. Because it is difficult to get benefits from traditional recycling methods, the enthusiasm for the recycling of idle books and paper products is not high.

2.The number of traditional waste recycling stations is small and difficult to find.

3.Online recycling needs to wait for recycling personnel, and the time is not flexible enough.

45

WeChat mini program design（Sustainable）

Paper Ring

To Develop

1.It can make people more directly benefit.

2.It can be more flexible in terms of time, according to people's wishes.

3.It allows people to find a recycling location without wasting a lot of energy.

1. Design second-hand book trading function.

2. People can get benefits more directly in some form.

3. Design an independent recycling machine.

WeChat mini program design（Sustainable） nd ha d- o n t co se ion he rmat t ter fo En ok in . bo sold be

ok

o

at

ch

We

e

fac

in

Ma

er int

ter gis e R e. d co

fo

l

na

rso

e rp

b nd ha . nd tore co Se ine s l on

n s tio ok ca rvice bo ts. o l e e ne. dl uc i the -s g i rod ity w self ach n i l p e bil i V the g m ila cyc aper a e v n a R of ycli w dp an Vie rec

FUNCTION PROCESS

l na

rso

pe

”

y erg

n

“e

cu

Ac

ain

G

rg

ne

“e

y”

.

de

co

E

te

ing

it Wa

fo

rs.

ye

u rb

e

ic erv -s e. f l in se he ach ot gm t Go yclin rec r nte

la mu

PROJECT 4

t ver s. on ook c b o y t ote erg per n n e a ing d p Us ycle rec

g

hin

ig We

rm nfi

ing

ycl

rec

Co

Need to operate on the self-service recycling machine.

FUNCTION ELEMENT Second-hand book online store for people to trade second-hand books.

Show the user the road and distance to the selfservice recycling machine.

Scan the QR code or enter the user code to start recycling.

Get "energy" from idle books and paper product recycling.

Use enough "energy" to exchange for recycled paper notebooks.

DATA ELEMENT Trading function User credit Destination distance.

"Energy" calculated data.

The price of second-hand books.

WeChat mini program design（Sustainable）

Paper Ring

46

PROJECT 4

47

WeChat mini program design（Sustainable）

WeChat mini program design（Sustainable）

Paper Ring

WeChat mini program design（Sustainable）

USE SCENE DISPLAY

PROJECT 4

The paper ring aims to make it easy and convenient for people to recycle their idle books and paper products. In view of the fact that people generally can't get the benefits from waste paper, paper ring has optimized this, people can get more direct benefits, and can mobilize people's enthusiasm and make a contribution to sustainable development. At the same time, it can better save the intermediate links of recycling and save unnecessary costs for manufacturers.

Paper Ring is a WeChat mini program, just log in from WeChat, no need to download, convenient and fast.

WeChat mini program design（Sustainable）

Paper Ring

48

PROJECT 5

Daily Works

OTHERS Some daily works June 2018-June 2019

49

DAILY WORKS

Daily Works

PROJECT 5

PHOTOGRAPHY AND INSTALLATION ART

Throughout the university, I learned a lot of expertise: photography, video, interactive design, programming, and more.

I believe that they not only exercised my professiona l skills, but also improved my understanding of the professional field of digital media art and the capture of artistic beauty.

DAILY WORKS

50

PROJECT 5

Daily Works

APP INTERFACE AND WEB DESIGN

Listening to music is my favorite way to relax, so in the coursework,I chose to redesign my two favorite music apps.

1 2

In the internet art course, I chose to redesign the Spotify web version.

In the interactive media art course, I redesigned Apple music for the user experience and optimized some of the less satisfying features.

*these personal project do not reflect the plans of Apple or Spotify.

51

DAILY WORKS

Daily Works

PROJECT 5

PROCESSING

//first create points int num=100; float r[]=new float[num] float theta[]=new float[num]; PVector v[]=new PVector[num]; float dst[]=new float[num]; float dst1[]=new float[num]; float[] easing=new float[num]; float move_dist; boolean mo=true; void setup() { size(600,600); // theta=30; for(int i=1;i<=num-1;i++) { v[i]=new PVector(random(width),random(height)); r[i]=random(1,5); move_dist=random(20,40); theta[i]=random(180)*PI/180; easing[i]=random(0.06,0.9); } frameRate(30);

int n = 10000; float[] m = new float[n]; float[] x = new float[n]; float[] y = new float[n]; float[] vx = new float[n]; float[] vy = new float[n]; //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: void setup() { fullScreen(); fill(0, 32); reset(); } //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: void draw() { noStroke(); rect(0, 0, width, height); for (int i = 0; i < n; i++) { float dx = mouseX - x[i]; float dy = mouseY - y[i];

} void draw() {

float d = sqrt(dx*dx + dy*dy); if (d < 1) d = 1;

background(0,0,0); fill(255,255,255);

float f = sin(d * 0.04) * m[i] / d;

for(int i=1;i<=num-1;i++) { v[i]=new PVector(v[i].x+cos(second()+random(20,30))+random(-1,1),v[i].y+sin(second()+random(20,3 0))+random(-1,1)); //r[i]=random(1,5); }

}

for (int i = 0; i < n; i++) { x[i] += vx[i]; y[i] += vy[i];

for (int i=1;i<=num-1;i++) { noStroke(); ellipse(v[i].x,v[i].y,r[i],r[i]); dst[i]=dist(mouseX,mouseY,v[i].x,v[i].y); for(int j=1;j<=num-1;j++) { if(dst[j]<=60) {

}

}

stroke(255,255,255); stroke(255,255-dst[j]); strokeWeight(1); line(mouseX,mouseY,v[j].x,v[j].y);

if(mo) { for (int j=1;j<=num-1;j++) { dst1[j]=dist(v[i].x,v[i].y,v[j].x,v[j].y); if(dst1[j]<=60) { stroke(255,255,255); stroke(255,255-dst[j]); strokeWeight(1); line(v[i].x,v[i].y,v[j].x,v[j].y); } }

vx[i] = vx[i] * 0.5 + f * dx; vy[i] = vy[i] * 0.5 + f * dy;

if (x[i] < 0) x[i] = width; else if (x[i] > width) x[i] = 0; if (y[i] < 0) y[i] = height; else if (y[i] > height) y[i] = 0; if (m[i] < 0) stroke(255, 208, 3); else stroke(140, 255, 154);

}

}

point(x[i], y[i]);

//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: void reset() { for (int i = 0; i < n; i++) { m[i] = randomGaussian() * 16; x[i] = random(width); y[i] = random(height); } } //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: void mousePressed() { reset(); }

DAILY WORKS

52