Yinan Zhang_Portfolio by 张逸楠

YINAN ZHANGï½&#x153;PORTFOLIO UX DESIGN/UI DESIGN/USER RESEARCH 2012~2016

YI NAN ZH A N G

UX DESIGNER｜UI DESIGNER｜USER RESEARCHER (06) 17 330 973 Roland Holstlaan 848 Delft 2624JH Netherlands

張逸楠

446778025@qq.com

2011

2014

Hunan U n i ve r s i t y B a c h e lo r

2015

Po l i techni co d i Mi l ano E xc h a n g e

Del f t Uni ver s i ty of Technol og y Ma ster

Keyshot

Solid thinking

Unity

NOW

Arduino

T H E S I X QUESTIONS OF HOW-TO From my perspective, the "how-to" question is the final question for a designer to answer, which concludes the insights and ideas throughout the research and design process, and explains the essence of the desired experience. The followings are the sum-ups of several of my design works so far, with my answers to the "how-to" questions in different design cases.

#1 HOW TO VEND TICKETS SMARTLY Research and redesign for GVB ticket machine Experience design ｜ P. 4

#2 HOW TO HAVE AN INTERNATIONAL LUNCH Cheer: Design for lunch experience in Aula, TUDelft Experience design ｜ P. 28

#3 HOW TO WAIT POETICALLY Deepn: Poetic experience in Delft train station Experience design ｜ P. 46

#4 HOW TO LET KIDS ENJOY GARDENING Flowry: Interactive gardening Experience design ｜ P. 56

#5 HOW TO STUDY WITH BIG DATA Fclassroom: Student portal of an education system Service design ｜ P. 62

#6 HOW TO MAKE AN EMOTIONAL TV Blush: Research on Kansei design Interaction design research ｜ P. 72

HOW T O VEN D T I C K E TS SMART LY Research and redesign for GVB ticket machine Experience design ď˝&#x153; 2016 This is a project for GVB, a Dutch company of public transportation. As an important part of the Dutch public transportation system, the GVB Ticket Vending Machine (referred to as GVB TVM), offers users a variety of travel products that allow them to travel through the Amsterdam metro area via bus, tram, ferry, and subway. The major content of this project is the assessment of functionality and ease-of-use of the current machines as well as considerations of a proposal for a redesign.

EXPLORATIVE｜ENPOWERING｜ENGAGING｜GUIDING

C ON T E XT OF GV B T V M

Train station

Purpose and function The purpose of the Amsterdam GVB TVM is to enable travelers to utilize the Amsterdam public transportation system. This transportation system includes bus, subway, tram and ferry lines. The GVB ticket machine offers a selection of products ranging from disposable travel tickets to the OV card with its topup and add-on services.

Metro station

Bus stop

Using context As these machines are usually located in noisy and busy public spaces, the usage experience can be overwhelming. This is especially true for visitors that are unfamiliar with both the machine and its infrastructure.

Local Novice Foreign Novice

3 6

Ecosystem The GVB is part of an ecosystem encompassing all public transport systems in The Netherlands. The different parts of the system are connected through their common delivery system, namely the OV card.

Local Experienced Foreign Experienced

User group With a complicated and diverse user group, we decide to divide the users by local/foreign and experienced/novice for convenience in preliminary research.

7 B

The current GVB TVM Here are the components of the current GVB ticket machine. 1. Privacy screen 2. Light 3. OV card slot(out) 4. Coin slot(in) 5. Bill slot(in) 6. Screen A. Menu column B. Error indicator C. Language selection D. GVB logo 7. Pin pad 8. Light indicator(inserting OV card) 9. OV card slot(in) 10. Ticket slot(out) 11.Change slot(out)

The current interface of GVB TVM

Flow 1 ｜ Reload e-purse/travel products Start screen

Flow 2 ｜ Buy a disposable OV-chipkaart

Reload e-purse Travel prod

Start screen

Add-up products

Top up

Default amount

Custom amount

Debit card

Credit card

Duration

Amount

Cash

Receipt

Disposable OV-chipkaart

Debit card

Credit card

Cash

Receipt

Flow 3 ｜ Buy a annonymous OV-chipkaart Start screen

Flow 4 ｜ Check data OV-chipkaart

Anonymous OV-chipkaart

Start screen

With saldo

Without saldo

Default amount

Custom amount

Debit card

Credit card

Check data OV-chipkaart

Transactions

View

Products

View

Cash

Receipt

Flow structure The flow structure can be divided into four major sections: reload e-purse/travel products; Buy a disposable OV-chipkaart; buy an anonymous OV-chipkaart; and check data OV-chipkaart.

PR OJE C T PLA N N I NG Desk research Literature research Test set-up First impression Project planning

User test analysis Design brief Interaction vision User test

Analysis and iteration Ideation and conceptualization

Workshop on preliminary design

Project start 2016. Feb

The project started in 2016, Feburary and finished in 2016, July. In order to ensure that the outcome of the design is feasible, complete, and effective, we have concluded two comparable user tests in the real-life using context, Amsterdam Central Station. In addition, a workshop and a recognitive walk-through session are performed to hear the voices from not only the real users but also experienced designers.

Second user test

Construction of workable prototype Presentation Recognitive walk-through

Project end 2016. Jul

D E SK R ES EARCH

Posts on Tweeter about GVB

Similar devices In order to gain a better understanding of factors influencing usability and the way they do so, an analysis of similar user interfaces has been conducted. The devices reviewed are the NS TVM, the RET TVM, which are two other branches of the OV card system, as well as an ATM and a ticket machine in Pathe theater. We compared these machines in four dimentions: complicated/simple, Multi-functional/specialized, guiding/explorative and graphic/text-heavy. From the research, we can see that these characteristics of the machines are related to their purposes and functions.

Online reviews The goal of the online review analysis is to see what people say about the GVB TVM online. From the results we can see that confusion and anxiety is a common feeling among many GVB users while using the machine.

USE R T E ST OF T HE C U RRENT M A C H I NE

Functional

Emotional

Scope This user study sought to identify interactions with the GVB TVM that reduce the ease of use, both functionally and emotionally. Different usage phases have been analysed, starting from identification of the TVM and the initial approach, and going to the completion of a transaction.

Given tasks Three tasks have been defined for the user test. Each task is chosen from a different flow as a frequently used function to cover most of the interaction patterns available. Each of them is described with a context to the participants. The followings are the selected tasks. a. (Re-)Charge an OV card You are an OV card user, today you need to top up your card to 10 euros with your credit card for a one-day trip in Amsterdam.

2 12

Test environment To ensure realistic results, field testing has been conducted on site. Amsterdam Central Station was chosen as the testing location. The time and day of the test have been strategically chosen in order to avoid peak travelling times, thereby increasing the likelihood of encountering participants willing to provide more in-depth insights.

b. Buy a disposable ticket You are on your holiday, and want to stay in Amsterdam for 3 days with a friend. Buy the right ticket with cash. c. Print travel history from OV card Your boss wants you to print your travel history for the statement of expenses. Every participant is assigned with one or two of the tasks according to their own situation.

Local Novice

Foreign Novice

x13

Total

Foreign Experienced

Local Experienced

A chart of participant groups

Participants As mentioned, several user groups have been defined, based on different backgrounds and usage patterns during the interaction with the TVM. The distinction is made between local/foreign and experienced/novice users. We define the dimentions as the followings. Local: People who are Dutch or live in Netherlands. Foreign: People from other countries and in a temporary stay. Experienced: People who use the machine regularly(more than once a week). Novice: People who donâ&#x20AC;&#x2122;t use the machine regularly. In order to ensure a realistic ratio of these groups in our test, participants have been randomly recruited on location. As randomly recruited participants may be in a hurry and therefore unable to be extensively interviewed, a second group of participants brought in by appointment has been defined in order to reduce the risk of falsified results. The choice has been made to aim for a minimum of 5 participants per user group, as research by Nielsen (1993) and Virzi (1992) showed that five participants are most likely sufficient for identifying most significant usage issues. As long as new insights were still being gained, further interviews have been conducted where possible. 13

R AW D ATA OF THE USE R T E ST During the test, we look for data with a combination of observation, measurement and interview. The time cost and steps taken are calculated from the test videos. Here are the records of task 2, buying a disposable ticket as an example of how the test data was collected.

Receipt Payment option Ticket amount Ticket duration

Regular flow

Goal: Receive product

Disposable OV chipkaart

Anonymous OV chipkaart With saldo Without saldo Select amount

Detour flow

Start

Payment option

Flows of foreign participants buying a disposable ticket Foreign novice Foreign experienced Get wrong product

5.67s

Average time per step

8.3/6

Average step/optimum step

5/6

Ratio of successful task

4.3/5

Average rate of satisfaction

Receipt Payment option Ticket amount Ticket duration

Regular flow

Goal: Receive product

Disposable OV chipkaart

Anonymous OV chipkaart With saldo Without saldo Select amount

Detour flow

Start

Time out

Flows of local participants buying a disposable ticket Local novice Local experienced Give up

PRO BL E M CL U ST E RIN G

SEPERATE SLOT FOR DIFFERENT

Negative comments/times

Positive comments/times

The reported problems are noted and clustered in order to find out trends in usage.

FUNCTIONS

SLOTS IN ONE

AREA

TOP

COIN SLOT ON THE

FITS THE PINPAD

SHOWS

TELLS WHERE TO START

CATCHY

B IG GVB-LIKE

CLEAR

HELPFUL FOR ME OBVIOUS FROM

DISTANCE

CLEAR

CLEAN & SIMPLE

Recognition

Appearance

UNCLEAR HARD TO FIND

MISLEADING THOUGHT IT WAS FOR THE

TRAIN

LEVELS

NO NEED TO LEARN

EASY TO USE Technology

GET USED TO ORGANIZED

SIMPLE CLEAR ABOUT

THE FUNCTIONS

Layout

STRUCTURED

Navigation

OUT-DATED NO REACTION NOT FRIENDLY I CANT FIND IT SOMETIMES TOO MANY WHAT IS A

UGLY

NEED SOME COLOR

COLD & ROUGH

LOOKS MORE LIKE A

CIGARETTE

MACHINE SIMILAR TO LOW QUALITY

FREEZE SLOTS NOT LOGICALLY VERY OLD SCREEN

FLIKERS

ARRANGED

ANGRY ABOUT THE

MESSY

A LOT

NS MACHINES UNWELCOMING FREQUENT REDO WASTE OF TIME

A chart of the statements from the test

COINS

SIMILAR

SLOTS

NO CLUE NEED TO EXPLAIN

AND GET STUCK SCARY OVERWHELMING FRUSTRATING

ALWAYS FORGET MY CARD

CONFUSING

REALLY

CROWDED

WHICH OF THE 2 CARD SLOTS HAVE TO PUSH SHALL I INSERT

HARD

HOW TO CHOOSE

CHIPKAART

C A U S I N G NEED MORE MISUNDERSTAND OVERVIEW

LANGUAGE NOT FRIENDLY

TO THE HANDICAPPED TOO TALL FOR

KIDS 16

EASY

SE V E R I T Y R AT I N G In order to prioritize the insights of usability issues, a severity rating is made in terms of the magnitude of the combined Nielson profile. Frequency: occurance of a problem. Impact: difficulty to overcome the problem. Persistence: the avoidability of the problem once it is identified. (Nielson, 1995)

Persistence

Impact

Frequency

1 Branding

2 Terms

3 Hard to browse

4 Slots

5 Fault indicator

6 Follow-up

A chart of the severity raiting of each issue

A N A LYSIS OF THE R E SULT

"We didn't know what it was. We guessed it was for the train." - Participant 18

"In general it is not clear what the difference is between the tickets, except for duration." - Participant 19

"... It doesn't do anything... or am I doing it wrong?" - Participant 7

Step 1. Recognizing the machine

Step 2. Navigating to the desired product

Step 3. Customizing the duration and amount

Problem: Branding. Lack of colors, labeling, and the presence of only very small logos makes it difficult to identify and understand the GVB brand.

Problem: Terms. Terminologies like "OVchipkaartâ&#x20AC;&#x153; are used without any explanation. Users have poor overview of what products are available.

Problem: Hard to browse. Screen is often delayed or unresponsive. It makes the long scrolling menu difficult to browse. It is also makes it hard to compare between choices.

Experience: The branding problem leads to a confused and unsecure start of the interaction, which makes a negative first impression. The outdated and bulky look also makes it less welcoming or trustworthy.

Experience: Users don't know what they are paying for, which leads to confusion and frustration. They tend to choose the more secure ticket rather than the cheaper one, and feel like they missed the best choice.

Experience: Users feel anxious and lose trust in the machine when the screen is delayed. The lack of trust will be a barrier for exploration as well as users are afraid of doing anything wrong.

Desired experience: The GVB brand is easy to recognize and leaves a strong impression. Users start their transactions with confidence.

Desired experience: Users are aware what each ticket means and feel at ease to explore the best choice that fits their needs.

Desired experience: Users feel free to explore and compare the products provided.

Redesign idea: Make the machine more engaging and "GVB-like".

Re d e s i g n i d e a : A d d m o r e a s s i s t a n c e f o r decision making. Graphic interface with icons as explanation.

Redesign idea: Simple screen structure to shorten the reaction time. Encourage comparison.

"Logical from left to right, but all those different slots makes it confusing." - Participant 9

"Accepts payment and debits money, but not does charge or give the bought product." - Quote from user on social media

"OK, but what should I do next?" -Participant 8

Step 4. Paying

Step 5. Receiving the product

Step 6. Finishing transaction

Problem: Too many slots. The physical interface is too complicated with various slots and the difference between them are not clear to the users. Most labels are only in Dutch.

Problem: No indicator for errors. When errors accur, the machine leaves users helpless as it does not give a feedback. Some users don't know that they can ask a GVB staff for help.

Problem: No follow-up instruction. As the user gets the desired product, the transaction is finished, but the user still moves on with GVB service, from which the current machine is isolated.

Experience: Users feel comfused as well as overwhelmed. Too many slots leave them unaware which one to interact with. Sometimes they try their cards in every slot to find the right one.

Experience: Users feel comfused as well as overwhelmed. Too many slots leave them unaware which one to interact with.

Experience: Users don't know where to start the next GVB service and have no emotional experience.

Desired experience: Users view the machine as logical and easy to understand. They always know where to insert or where to receive.

Desired experience: Users know what is happening when something unexpected happens and who to turn to for help.

Desired experience: Users get friendly enjoin from the machine and continue with the rest of GVB service.

Redesign idea: Combine the slots with similar functions, place them in logical order and use icons to explain.

Redesign idea: Fault indicator with clear instruction.

Redesign idea: Add a good-bye message at the end of the transaction.

DESIGN BRIEF

Interaction vision A list of qualities meant to ensure an overall positive, pleasant and comprehensible usage experience has been developed.

Explorative ｜ Have the freedom to try things out Engaging

｜ Easy to be involved

Enpowering ｜ Be in control

The redesign of the GVB TVM should be: • Explorative • Enpowering • Engaging • Guiding

Guiding

｜ Informed about what to do

A trip with navigation is chosen as a metaphor to describe this interaction vision.

Design goals Based on the gained insights from the user test, the ambition of our redesign enable the novice users to feel confident to explore while operating the ticket vending machine. To achieve this, we would like to: 1. Add more GVB features for brand recognition. 2. Use easy terms , rearrange the navigation structure and give clear explanation. 3. Simplify the menu structure. 4. Combine slots with similar functions and add labeling. 5. Add fault indicators for unexpected situations. 6. Add follow-up message to connect to next step of GVB service.

The surrounding environment and Amsterdam city image will also be taken into consideration.

IDEATION AND CONCEPTUALIZATION

Ideas A large range of ideas are generated on the basis of the finding from the user test. The ideas are categorized into software-related and hardwarerelated for further discussion.

1st test ｜ Paper prototype

2nd test ｜ "Wizard of OZ" prototype

3rd test ｜ Functional prototype

Concepts After generating the ideas, we put similar ones together and try to form an overall concept for the new ticket vending machine. The concepts are tested with quickly made life scale functional models to find out the pros and cons. The chosen concept is elaborated to be the final redesign after rounds of iteration.

R E DE SI G N PR OPOSAL AMSTER

DAM TR

ANSPO

RT TICAKMSTERDAM T RANSPO AM12SETTER RT TICK 0 cmDAM T ET R A N S AMSTER P O RT TICK DAM TR ET ANS PORT TIC

KET

Labeling The major function of the machine is clearly and specifically marked to avoid misunderstanding.

Layout The layout of slots is simplified and follows a left-to-right logical order.

200 cm

GVB Branding The new design of the machine is inspired by GVB logo to differentiate itself from other similar machines.

Embodiment

GVB 160 cm

Wording Friendly and easy words are used instead of the terms that are unfamiliar for novice users. Framework ? The flows are rearranged to ensure that there are no more than three options each page. This reduces the feeling of being overwhelmed. At the same time, it is ensured that all the functions can be reached with guidance within 3 steps.

WHICH WOULD YOU LIKE?

WHICH WOULD YOU LIKE? Icon The application of icons ? WHICH WOULD YOU LIKE? with understanding WHICH WOULDWOULD YOU LIKE? and thus speeds up the ? WHICH YOU LIKE? helps

Home

Hour ticket

Day ticket

Special ticket

Unlimited GVB travel within certain time

Unlimited GVB travel within certain days

Travel with a bike, with a baby or at night

Buy

Tickets

? Hour ticket

Day ticket Special ticket Travel with a bike, Hour ticket Day ticket Special ticket with a baby or at night GVB travel Unlimited GVB travel Travel with a bike, Hour ticket Hour ticketUnlimitedDay ticket Special ticket Day ticket Special ticket Hour ticket Day ticket within certain time within certain days with a baby or at night Unlimited GVB travel Unlimited GVB travel Travel with a bike, Buy Buy Unlimited GVB travelBuy within certain time within certain days Unlimited GVB travel with a baby or at night Travel with a bike, within certain time within certain days with a baby or at night Buy Buy Buy Buy Buy Buy Buy Buy Buy Buy Buy Buy

Info hierarchy The layout shows a clear hierarchy among interactive elements, important information and less important message. This helps to create clear guidance among the whole page.

Interface

WHICH WOULD YOU LIKE?

opration process.

Unlimited GVB travel within certain time

Unlimited GVB travel within certain days

Unlimited GVB travel within certain time

Home

TicketsHome

Tickets Home

Unlimited GVB travel within certain days

Travel with a bike, with a baby or at night

Tickets

Home

Tickets Tickets Progress bar The progress bar helps to quickly navigate through the process and have an over view of the whole process, which creates a feeling of being in control. 25

OV E R A LL E XPE R I E NCE

Storyboard Here is a brief illustration of the ticket buying process.

Movie For more information of the process, scan the QR code or go to the link https://youtu.be/T0-7w9YlrWg to see a movie of the project with more interaction details.

1. Recognizing While looking for a ticket macchine, the word "ticket" on the machine naturally catches the user's eyes.

3. Customizing Looking at the brief intro for each ticket, the user finds the best choice out of three ticket types without hesitation. He decides on one 1 hr ticket for himself.

5. Receiving the product The light indicator in the ticket dispenser informs the user to take his ticket from it.

4. Paying The screen and the slot shows a consistent light indicator. The user inserts his credit card in the slot for payment.

GOOD BYE

6. Finishing In the end, the machine shows a goodbye message, which reminds the user to take his card and ticket, provides a bus schedule and wishes him a nice journey. The user feels warm and respected.

2. Navigating With clear indicator on the welcome screen, the user easily finds the starting point of navigation.

HOW T O HAVE A N I NT ER NATI O N A L LUNC H Cheer: Design for lunch experience in Aula, TUDelft Experience design ď˝&#x153; 2015 Aula is the main hall of the Technological University of Delft(TUDelft), with a cafeteria that provides catering service to students from all falcuties. As the most public location on campus, Aula is the best place for international activities and bounding events. However, currently the trigger for communication is lacking and students tend to stay within their "bubbles" rather than communicating with people. This project focuses on the barrier of communication as well as design opportunity during Aula lunch time. A design proposal will be explained on basis of the research.

NATURAL｜CASUAL｜ACCESSIBLE

C ON T E XT OF A U LA

Lunch(11:45~13:30)

Dinner(16:45~18:30)

TUDelft

CafĂ¨(8:00~20:00)

TUDelft Staff

Purpose and function The purpose of cafeteria is to provide lunch and dinner for students and staff of TUDelft. Not only meals but also coffee and pastry are available in the cafeteria. The cafeteria is open in certain hours of the day.

TUDelft Student

Aula

Aula Staff

Regular meal

2 30

Take-away

Daily surprise (only for lunch)

International meal (only for lunch)

Catering service The catering service in the Aula cafeteria is provided by Sodexo, a catering company. Different types of food are provided. Among them,

Sodexo Staff

Sodexo

Stakeholder Since Amsterdam is a city with a strong international profile, tourists and international visitors present a significant part of the user spectrum, second only to local or national users. With a complicated and diverse user group, we decide to divide the users by local/foreign and experienced/novice for convenience in preliminary research.

The current situation Currently, students do not have much social acts in Aula during lunch time. From observation as well as interviews, results are mae that students perfer sitting within their cultural group or alone with their smart phones. This can be changed to enrich the lunch experience as well as enable multi-cultural communication via designing.

7/25

3/25

11/25

5/25

Donâ&#x20AC;&#x2122;t mind

Do you mind having lunch with a stranger?

Perfer to sit with friend

3/25

Perfer to sit alone

4/25

Okay but feel stress

Yes

Will you talk with him/her?

Only a brief greeting

14/25

No if not necessary

2/25

Depends on the situation

QUOT E S FROM USE R I N TERVIEW

“Wish I could speak Chinese, instead of English.”

"But It would be better if he also has black hair.”

All of the interviewees have mentioned that they feel awkward and nervous while talking with foreign people. It is partly because the communication is in an unfamiliar language. They always worry about their usage of English, and feel it hard to understand.

It is also mentioned that the difference in appearance is a reason for the anxiety. Being with someone who looks similar is clearly more relaxing.

“I don’t do that because I prefer to relax.” During the interview, all of the interviewees suggest that they are not willing to meet new people at lunch time, because they prefer some relaxing time in between of the lessons, while making new friends would possibly cause stress.

“Why not design something to improve relation with newly made acquentance?" Finally, one of the interviewees believes that some method to improve a relation between newly made friends may be more meaningful than to build a new relation

C UST OMER JOURNEY

Stage

Get a tray

Browse around

Line up for food

Line up to pay

Find seat

Have lunch

Return the tray

Goal

Get a tray

Look for available choices and find preferred food

Get food

Pay for the meal (preferably fastly)

Find a suitable place (location, table size, etc.)

Have lunch, relax and spend the time

Get the tray back to finish lunch

Interaction

Tray, trayshelf

Whole environment

The line, food, staff

The line, staff, POS

Table, seat, tray, whole environment

Lunch, company, people around

Tray, tray shelf

Time

Very short

±1 min

1~2 min

±1 min

15 min~1 h

Very short

5 4

:｜

Emotion

3 2

Journey map The journey map is made to understand the entire current lunch experience as well as to find touch points that have the potential to be a design opportunity.

Touch point During the whole process, we can see that there are certain touch points which can be potential medium of the design.

Design opportunity From the journey map we can see that there are certain moments when the users have negative feelings. This could be an opportunity to improve the experience. Lead to the new context

Line up for food Bored Hungry Worried if runs out

Main experience

Staff

7 :｜

Aula space

Find seat Prefer to find own table Worried if the place is full Tray feels heavy

Return the tray Quick Neutral Preparing for next class

Advertising Return to the realistic context

Browse around Curious Relaxed Get info

:｜

Get a tray Quick Neutural Thinking about last class

Have lunch Enjoy the food Relaxed Need topics

User

3 :(

Events

Cafeteria

:｜

Cafe

Line up to pay Bored Look around Chat if with a friend Introduce the design

D E SI GN BRIEF

Interaction qualities To improve the current experience, the desired interaction qualities are natural, casual and accessible. The redesigned lunch experience is intended to feel like a family dinner, with certain rituals acts and preferences to increase the feeling of belonging.

Natural

Casual

Accessible

Several table acts retrieved from movie<Little forest>

Sitting face-to-face

Table arrangement

Table manners

Food set

2 Assisting conversation

Design goal We would like to create a new lunch experience that triggers international students to easily start a conversation while having unch in Aula. To achieve this, the followings are the sub-goals during the design practice.

Creating atmosphere

Introducing culture

Strengthening the weak tie

IDEATION AND CONCEPTUALIZATION

Preliminary idea The initial idea is that a printed picture of a typical table set is printed on the tray to simulate a formal dinner. With this setting together with the international hot meal, users can experience the dining culture from around the world while having lunch in Aula. This would trigger conversation between them as it creates an atmosphere of family dinner and provides the food as an ice breaking topic.

Interaction prototype In order to actally experience the desired interaction, an interaction prototype session is held. With post-its and pens around, the group is asked to have a dinner together. During the dinner, it is noticed that some participants start writing or drawing on these post-its, put them on the cups and play with them during conversation. The session proves to be a great inspiration for the concept development.

D E SI GN PR OPOSAL

BOWL+TRAY

What does it consist? Cheers consists two parts. One of them is a heat-protection ring on the paper bowl of international hot meal with an oral table greeting printed on it. It is written in transliteration rather than its original language. The other item is a paper mat in the tray with a table setting printed. The greeting and the table setting are typical from one country, and can be changed along with the international hot meal menu.

DINNER TALK

How does it work? While having the international hot meal, international students are enabled to enjoy it in a simulation of the formal dinner. What's more, they can also experience the table manner by easily using a foreign greeting with the transliteration, which adds more social interaction to the lunch experience. As a result, Cheers creates a lunch experience with the simulation of a formal dinner, which reduces the awareness of the current culture difference as a barrier in communication, and triggers conversation by providing a topic.

CULTURL EXPERIENCE

Why it would work? Firstly, the dinner simulation creates a different context from the cafeteria. This would distract the students from the anxiety of international conversation. What's more, the table setting together with the international food brings up a topic of food culture as the ice breaker. In addition, the transliteration of foreign dinner greeting triggers interaction with people. Finally, the exotic experience creates a relaxing atmosphere.

M U LT I C U LT U R A L L U N C H E X P E R I E N C E

EMBODIMENT DESIGN

Paper bowl Considering the cost of renewing the current VI system of Sodexo, the bowl part of Cheer is designed as a heat-proof ring on the paper bowl. The size and color of the heat-proof ring is intended to fit with the current paper bowl Sodexo provides in terms of size and visual style. What's more, a same color from the tray is used on the bowl part to create consistency and to give affordance of placing it in the right place on the tray.

Food Paper bowl

Heat-proof ring Paper tray mat

Tray

“8 · S’MARKLEK” This is what Dutch people say at dinner, read it to a Dutch friend to surprise him/her!

NETHERLANDS Place your International hot meal here

Tray The table setting is printed on a paper mat for the tray with an intention to make it easily adaptable on the current Sodexo tray as well as to make it easy to change between different themes. The plates in the middle of the mat blank space for the paper bowl. Same color from the paper bowl is used here for consistency and user cue.

“AH’FIET · OLSUN” This is what Turkish people say at dinner, read it to a Turkish friend to surprise him/her!

TURKEY Place your International hot meal here

“CHI · ’HOW · HER · ’HOW” This is what Chinese people say at dinner, read it to a Chinese friend to surprise him/her!

CHINA Place your International hot meal here

M U LT I C U LT U R A L L U N C H E X P E R I E N C E

OVERALL EXPERIENCE

1 1. Going to lunch The user is going to the cafeteria with his newly made foreign friend. They are a bit nervous and trying to find a common topic.

2. Getting a tray With the printing on the tray, the user feels curious about what its purpose is.

3. Choosing food The user has Dutch food as an international hot meal and notices that the bowl can fit in the blank space on the tray.

Storyboard Here is a brief illustration of the Cheer lunch experience.

Movie For more information of the process, scan the QR code or go to the link https://youtu.be/7z6Q11S2FNE to see a movie of the project with more interaction details.

4. Finding seat While looking for a seat, the user has a look at the bowl, and finds the transliteration, saying that Dutch people do the table greeting as "8 smarklek".

5. Having lunch After sitting down, the user has his lunch on the typical Dutch table setting and says "8 smarklek" to his friend, feeling like a real Dutch dinner. They start talking about the dinner in their own countries.

6. After lunch After this facilitated lunch talk, they know more about each other and feel more used to the international conversation.

CONCEPT ANALYSIS

Functional

Cheers is a combination of emotional commitment and functional commitment, leaving the freedom for the users to decide whether they want to, or how they will be engaged in the international communication. On the other hand, it also bridges between daily routine actions and simulations of an unusual context. Through the decent yet guided intractions, users feel confident and in control during the whole experience.

Obvious

Emotional

With the food culture as a catalyst, Cheer helps to trigger and facilitate conversation between cultures.

Decent

HOW T O WAIT PO ET IC A L LY Deepn: Poetic experience in Delft train station Experience design ď˝&#x153; 2016 Delft station is the central station in Delft. With well-designed facilities, the station gives a modern and welcoming impression. However, currently there is nothing interactive on the platform, thus the waiting experience in Delft station is boring and isolated. In this case, the desired situation is a poetic experience, getting passengers overwhelmed with rich interaction, intense emotion and deep meaning. Deepn is a concept combining physical interaction and digital display. With the action of gently reaching deep inside the cotton surface, the passengers are facilitated to enjoy a moment of thoughts about humanity.

RICH｜OVERWHELMING｜THOUGHT-PROVOKING

SC OPE & A SSI GN MENT

Concept design

Coding

Interaction

Prototype building

Scope This project has its focus in conceptualization as well as iteration through prototype building. The functions will be performed with programming and end up with a workable prototype.

Emotion

Meaning

Assignment The key word of this project is "poetic". As explained, the desired poetic experience has to be rich and overwhelming, in terms of interaction, emotion and meaning.

Poetic experience

Bored

3 48

Context With three floors (two underground), Delft station is the context of the project. In the station, there is barely anything on the platform for the passengers to interact with while waiting for the train, which leads to the fact that the current train-waiting experience is boring rather than poetic.

Overwhelmed by thoughts

Design goal As the goal of this project, we would like to let the users have a moment of deep thinking while waiting for the train through a poetic experience.

PR OJE C T PLA N N I NG

Conceptualization

In-take Project planning

Rough exploration

Final prototype

Stand-along prototype

Concept iteration Brief user test

Nut-cracking prototype

Concept iteration Presentation

Project start 2016. March

Project end 2016. April

The project started in 2016, March and finished in 2016, April. With a focus on the riteration of the concept through workable prototypes, the project process includes four phases of prototype building, namely rough exploration, stand-along prototype, nut-cracking prototype and final prototype.

R OU GH E XPLOR ATION

Concept The initial exploration is based on the Simon Game, which is a game of pressing the buttons in the right order. We have add a new feature, which is having four people playing it at the same time face-to-face, each in charge of two buttons.

Pros It proves that people enjoy the cooperation during the game, and the moment when they have to decide who will press the button is overwhelming in terms of emotion.

Cons However, it is mentioned by the participants that the fact that they have to look at each other's eyes and may possibly touch each other's fingers is not enjoyable when playing the game with a stranger.

STA N D-ALONG PR OT OT YPE

Concept This concept is basically a maze game for two people, in which they each control two directions. The controllers are placed with a distance in between, so the players can not have direct communication.

Pros During the test, the participants find it interesting to cooperate with a annonymous stranger without seeing him or her. This creates a feeling of tacit agreement between strangers, which proves to be poetic.

Cons Despite the fact that the game is fun to play with, it doesn't show much clue about how to play. Players get confused in the beginning san sometimes give up without finishing.

N U T-C R ACKING PR OT OT YPE

Concept The nut-cracking concept is an interactive music device with mood making features. The interaction is inspired by the turntablism art. The user can choose his/her age with a slider and spin the wooden disk. A popular song from his/her childhood will be played, in order to create a mood of nostalgia. With the input led stripes and the wooden gears, the interaction with the prototype has its retro and gentle qualities, which adds to the whole experience.

Pros The interaction it self is creating the desired overwhelming poetic experience with the atmosphere of nostalgia, and it fits in the station context in that it doesn't take too much time or space, so the users can be involved as much as they want.

Cons On the other hand, the device does not apply to all of the users, as they have different memories of childhood songs, and some songs do not evoke any emotional react to people, for example, from another country.

1. Choose your age.

2. Spin the disc..

3. Enjoy your childhood memory. 52

FINAL C ON C E P T

Concept Deepn is an interactive story teller, designed to inspire ever yday commuters to take a pause from their busy lives. A moment to stand still, to reflect and to open up ourselves towards the world. With a gentle push on the cotton surface, the screen zooms in from a group of people's head shots to one person telling his/her life story face to face.

Design goal The goal of the concept is to evoke thinking of humanity with life stories of various people as well as direct but simulated eye contact. With the eye contact in the screen, users do not feel nervous but still has a overwhelming experience resulted from the close-up story telling.

Interaction The interaction is inspired by laying a hand on people's chest and feeling the heart beat. The cotton surface creates a sensitive and gentle touch. While having a hand deep in the device, people on the screen will come closer and tell their story. it works as a metaphor of reaching deep in people's hearts.

Practical design In order to fit Deepn in the context of the station, we decide to take e l e m e n t s of s t a t i o n f u r n i t u re s , including wood texture, steel connection parts and curved outline, and apply it on the embodiment of Deepn.

Movie For more information of the process, scan the QR code or go to the link https://youtu.be/ryqjrLrtM30 to see a movie of the project with more interaction details.

The interactive surface is made with elastic cotton material in order to enable users to reach deep inside and experience the sensitive feeling. The movies used are edited on base of <Human>, which is a documentary with open source. 55

HOW T O L E T KI DS EN JO Y G A R DENI N G Flowry: Interactive gardening Experience design ď˝&#x153; 2013 Exploring the nature proves to be of great help in the education of children interms of physical growth as well as mental development. However, nowadays, children in the cities have little chance of getting close to the nature. This project is aimed to bring the nature to the urban children and introduce them the joy of gardening. To achieve this, Flowry applies a story-telling method, as well as gamification elements, in order to make it persuasive for the city children, who are more used to play with a smart phone rather than taking care of a plant..

INTERACTIVE｜PLAYFUL｜STORY-TELLING

SC OPE & A SSI GN MENT

Smart device Concept design

1 3 58

Use flow

Interface design

Scope With a focus in not only product design but also the system around it, this project includes general concept design as well as specific user flow design. A preliminary interface is also included to present the real user experience.

Nature

Child

Smart device

Context In the current context, city children have easy access to smart devices. Smart phones and tablet computers are attractive to children because they are potable, interactive and playful. On the other hand, city children seldom have the chance to access the nature, as a result of unbanalization. Many families have plants at home, but they are not attractive to children because they are not interactive or dynamic.

Nature

2 4

User

Assignment As mentioned, the key words of this project are "nature" and "smart device". It is required to bring the nature to the user with the smart devices as an approach.

Interactive

Playful

Story telling

Design goal With the design, we would like to persuade urban children to take care of plants in an interactive and playful way through the combination of smart device and internet of things. Therefore, the desired qualities are descriibed as interactive, playful and story telling.

D E SI GN PR OPOSAL

General concept Flowry is a set with a flower put and a corelated app that indicates the watering activity of the child, and provides rewards for proper watering in the form of an interactive story with the plant as main character.

Flower pot part With input weight sensors, the flower pot is able to collect data about the watering routing of the child. The data will be analyzed to figure out if the child is taking good care of the plant. The data will be sent to the smart device.

App part The corelated app is in the form of an interactive story, with a personificated plant as its main character. On receiving the data of watering, new chapters of the stor y and extra content will be unlocked as a reward.

How it works Firstly, the interactive story makes the gardening process more rich and enjoyable. The rewarding system would further encourage the child to take care of the plant. On the other hand, the story with a personificated plant evoke empathy for the plant by adding personalities.

M OOD BOARD

With a purpose of understanding the desired style of the app interface, a mood board is made with images from the internet. From the mood board, the desired interface is described as humorous, vivid and cute.

Humorous

Vivid

Cute

I NT E R FA CE D E SI GN In interface design, the desired style is practically achieved with bright colors, bold lining and big icons. Two original characters are created with an inspiration of plant sprout.

Bright color

Bold lining

Big icon

HOW T O STUDY W I TH B IG DATA Fclassroom: Student portal of an education system Service design ď˝&#x153; 2015 In the age of big data, data collection and analysis is wide applied in many aspects of our lives. However, in the area of education, there is little cases where the technology is applied, and teaching has always been how it used to be. The aim of Fclassroom is to apply big data analysis in order to assist education, thus reduce the workloads for students and teachers, as well as facilitate the communication in between. In specific, this project is focused on the student portal, which includes mistake collection, test analysis, communication with teachers and study material database.

FRIENDLY｜SIMPLE｜RELIABLE

SC OPE & A SSI GN MENT

Use flow

UI design

Demo making

Scope The focus of this project lies in the user flow, ui and prototype making, which means that a preliminary demo will be required as its result.

Data collecting

Data analysing

Database

Assignment This project is aimed to apply big data analysis subtly in the daily routines of students, and collect data of students to build a database, which will benefit the education with further exploration and development in the future.

Not applied

Big data

Education

Context With the rise of technologies, big data is being applied in many aspects of our lives. The students are producing a large quantity of data, which will be of significant meaning when collected and analysed. However, it is not yet assisting education to its full potential. People are not aware of the value behind the everyday data. What's more, more and more middle school students own their smart phones and are getting familiar with them. This makes it easier to collect and analyse the data.

Friendly

Simple

Reliable

Design goal We want to assist middle school students to document their own study data at home with an app in an easy and effective way. There fore, the desired qualities are described as subtle, simple and reliable.

D E SI GN PR OPOSAL

Main functions The main functions of Fclassroom includes four modules, namely mistake collection, exam analysis, teacher contact and study material download.

Supporting features To support the main functions, there are also other features involved including account registration, account management and sending feedback to Fclassroom.

F R A ME W ORK OF USE R F LOW

12:30 pm

找回密码手机号码输入验证码

换一组

您的信息已绑定！您的密码已发送！请注意查看。

进入应用

12:30 pm

绑定个人信息

Password retake

App Logo

所在城市

所在学校

所在班级

姓名

学号

Log in The log in page contains normal log in, registration and password retake. It also requires a personal info input when the user is using a newlyregistered account.

username@example.com 12:30 pm 12:30 pm

12:30 pm

创建新账号

*************

短信验证码

请输入您的手机号码

密码

登陆

3 创建新账号

+86

再次输入密码

您的信息有误！请返回并修正。

短信获取验证码

忘记密码？

Phone number verification

Affordance for input 用户名/邮箱

username@example.com

Logging in animation

Default

登陆

Defalt

Input

登陆

Click

Input finished

登陆中

Logging

Personal info input

Fault indicators 账号未输入

密码未输入账号及密码不匹配账号不存在

2013.5.7 第一单元测试选择题

易错题

集合

12:30 pm

错题集 2013.5.7 第一单元测试

12:30 pm

选择题

数学

Mistake collection The mistake collection module is a major part of the app which enables the students to navigate through the data of mistakes by subject, type of question and personalized tags. The details of the mistakes include the original question, the scan of the exam paper, the mistake answer and also the correct answer with its explanations.

...

易错题

集合

4 原题下列哪个选项是正确的？

第一单元测试 2015.4.30

A.题目内容选项

下列哪个选项是正确的？

选择题

B.题目内容选项 C.题目内容选项 D.题目内容选项原题

第一单元测试 2015.4.30

下列哪个选项是正确的？

选择题

正确答案：A 知识点

A.题目内容选项

1. 知识点 2. 知识点 3 知识点 4. 知识点

B.题目内容选项 C.题目内容选项 D.题目内容选项

第一单元测试 2015.4.30

正确答案：A

下列哪个选项是正确的？

选择题

我的错题

我的答案：B 我的考试

我的老师

下列哪个选项是正确的？

选择题

下列哪个选项是正确的？

第一单元测试 2015.4.30

我的错题

Drop-down menu

我的考试

Pop-up menu

语文英语物理化学

Mistake details

我的老师

数学

解析解析内容解析内容解析内容解析内容解析解析内容解析内容解析内容解析内容解析解析内容解析内容解析内容解析内容解析解析内容解析内容解析内容解析内容解析解析内容解析内容解析内容解析内容解析

第一单元测试 2015.4.30

选择题

我的答案：B

下列哪个选项是正确的？

Drag down to refresh

Pop-up input space

下拉刷新 ...

数学

第一单元测试 2015.4.30 筛选

导出

刷新中

网络异常

12:30 pm

数学

12:30 pm

数学

成绩趋势

考试记录

第六单元测试 2015.6.14

第五单元测试

6.5

6.6

6.7

6.8

6.9

6.10

2015.6.5 12:30 pm

成绩上升中

第四单元测试 2015.5.30

我的得分：90

第三单元测试 2015.5.15

我的老师

班级平均：80

2015.5.7

滑动查看最近成绩趋势

第一单元测试

年级排名

2015.4.7

3 我的错题

我的考试

第二单元测试

My exams The exam analysis includes the position of the student in the class and the personal history of exams. Related suggestions will be given accordingly.

我的错题

班级排名

我的考试

年级平均：80

我的老师

我的错题

我的考试

我的老师

点击查看考试详情

Drag down to refresh 下拉刷新

Drop-down menu 数学

Drag up to load 加载中

语文刷新中

英语物理

网络异常

化学

网络异常

收到的留言老师甲

12:30 pm

联系人

新联系人

12:30 pm

联系人

老师乙

老师乙班级数学

数学

老师丙

2015.5.1 12:30

英语

关于上次考试的问题…

老师丁

物理

老师戊

老师丙

2015.5.1 12:30

确认添加

老师戊化学

老师己

生物

1 我的错题

物理

化学

关于上次考试的问题…

老师丁

语文班主任

英语

手机号码

2015.5.1 12:30

关于上次考试的问题…

老师甲

姓名

老师丙

老师丁

老师乙

新联系人

我的考试

我的老师

手机号

微信

18729485420

小明

1 我的错题

我的考试

我的班级

我的老师

考试追踪

家校联系

2015.5.1 12:30

关于上次考试的问题…

老师戊

Contact list

2015.5.1 12:30

关于上次考试的问题…

老师己

Add new contact

Contact

2015.5.1 12:30

关于上次考试的问题…

1 我的错题

我的考试

我的老师

My teachers The teachers module is a contact list of the responsible teachers that the students can easily contact with and reply to.

12:30 pm

家校联系

老师甲

老师甲 2014-5-7 12:30

2015.5.1 12:30

关于上次考试的问题…

老师乙

随着互联网技术的发展，大数据在教育中的应用逐渐成为一种趋势，这将改变目前传统模式。

2015.5.1 12:30

随着互联网技术的发展，大数据在教育中的应用逐渐成为一种趋势，这将改变目前传统教学模式效率低下，数据信息流动不畅通，缺乏针对不同学生特点的个性化方案的局面。在市场的需求下，这种以数据采集，数据分析为基础的新型教育模式将成为主流。

2014-5-7 14:20

好的。

删除

老师丙

2015.5.1 12:30

关于上次考试的问题…

老师丁

2015.5.1 12:30

关于上次考试的问题…

1 我的错题

我的考试

我的老师

我的班级

Check the message

Drag down to refresh

No alphabet because the number of teachers is limited

In put the first two blanks and the number will appear

考试追踪

1 家校联系

Reply the message

Pop-up message

Pop-up menu

添加成功教师不存在

删除联系人

网络异常

12:30 pm

个人信息

12:30 pm

修改密码

修改

输入旧密码输入新密码再次输入新密码

小明 username@example.com

输入验证码

换一组

无锡市第一中学高三（1）班学号：2012030111

12:30 pm

错题集高三数学 12:30 pm

数学

全部考试全部时间第六单元测试

2015.4.10 集合讲义

全部标签

来自老师甲

小明 2015.6.14

Personal info

username@example.com 下列哪个选项是正确的？第五单元测试

选择题

Other functions in the side menu The functions that are less frequently used are arranged in a side menu, including personal info, changeing password, downloading the packs of study material, updating, about, sending feedback and log out.

2015.4.10 集合讲义来自老师甲

2015.4.10 集合讲义

第四单元测试下列哪个选项是正确的？

来自老师甲

修改密码 2015.5.30

2015.4.10 集合讲义 6.5

来自老师甲

第三单元测试下列哪个选项是正确的？

6.6

2015.4.10 集合讲义

2015.5.15 版本更新

6.7

6.8

6.9

6.10

成绩上升中

来自老师甲

2015.4.10 集合讲义

第二单元测试

来自老师甲

关于极课下列哪个选项是正确的？选择题 2015.5.7

我的错题我的班级

我的考试考试追踪

我的老师家校互通

意见反馈

选择题

我的错题

下列哪个选项是正确的？退出登录

我的考试

Download study material

Send a feedback

我的老师

Opens the photo album

Opens the photo album 更改成功旧密码错误

Start downloading

Details of the study material 2015.4.10 集合讲义集合的定义. ppt 课后练习. doc

两次输入不一致验证码错误

发送

来自老师甲

我的资料包

选择题

能力趋势意见反馈

2015.4.10 集合讲义

Change password

2015.6.5 个人信息

选择题

12:30 pm

我的资料包

重点归纳. doc

PR OT OT YPE

To experience the process, scan the QR code or go to the link https://modao.cc/app/ mOMElQDqmCrK4RpABumQ to try an interactive prototype

HOW T O MAK E AN EMOTIONAL TV Blush: Research on Kansei design Interaction design research ď˝&#x153; 2013 This is a project with LG determined with research on the application of Kansei design in home appliances. Sadly the content will not be included here due to a confidential agreement with LG. A certificate from LG will be attached for general introduction of the project.

EMOTIONAL｜PERSONIFICATION｜POETIC｜KANSEI

PR OJE C T C E RT I F I CATE

As described in the certificate, I am in charge of television interaction mode design, prototyping, and presentation material editing.

UX DESIGNER｜UI DESIGNER｜USER RESEARCHER (06) 17 330 973 Roland Holstlaan 848 Delft 2624JH Netherlands

446778025@qq.com