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