Portfolio -- Collection of undergraduate works

CONTENTS

PORTFOLIO

1. PLAYFUL BUS STOP City bus stop interactive board design

2. LIKIT Restaurant interactive feedback system design

XIAOQING HU

3. PHYSICS AR MINILAB

Augmented Reality app design

4. AVAZING STADIUM Creative soccer stadium design

5. SMART MIRROR Interactive mirror concept

PLAYFUL BUS STOP City bus stop interactive board design | 2017. September

INTRODUCTION The bus usually delays due to heavy urban traffic. This leads to the fact that the passengers have to wait longer time than expected, and therefore may generate negative emotions. By gamifying the design of bus stops, this project aims to improve the passengers’ experience in the waiting time. On such bus stops, the passengers not only can obtain instant bus schedules, but also can play interactive games with striking mechanisms.

In this way, they can entertain and interact with each other, making their waiting time no longer boring.

Color Scheme #

BACKGROUND

INTERVIEW

In Beijing, the terrible urban traffic situation poses great influence on the running state of buses. The heavy traffic jams extensively occur in main roads during the rush hours. This greatly lengthens people’s time on the way, posing passive impact on the people who regularly travel during this time slots.

To make detailed understanding of these problems, I went to the bus stops and carried out a survey.

I observed the passengers who are waiting bus on the bus stops and interviewed 25 of them.

Have to arrive 10-30 minutes earlier since the arrival time of the bus is uncertain.

Increase people’s negative emotions.

The long waiting time will produce long queues.

I think that the bus company should build an independent channel such as an app, to deliver instant bus and transport information to the passengers.

When I am waiting for a bus, I have nothing to do but to kill the boring time by attaching myself to the phone.

I've been waiting for 30 minutes, which makes me feel bad. If only I could be promptly informed of the traffic condition in such cases.

The interview questions include the waiting time, the way of killing the waiting time, the impact of waiting time on their emotions, and the information required for waiting bus.

Then, I sorted out the survey and interview and produced the figure.

PERSONA

EXPERIENCE MAP Stages

IDEATION

Go to the bus stop

5min

10min

Waiting for the bus 15min

20min

25min

Bus arrived

30min

arrive at the stop

persona1 persona2

wait in line

Jim Han 32 - Office Staff

Working for a large enterprise, every day Jim goes to work on time. He punches in at 9 a.m. and punches out at 6 p.m.

He usually comes to work by bus. After 5 minutes walk from his home to the bus station, he commutes to the company by bus 205, with which he is very familiar.

Emotions get on the bus

go out

patience to the limit

Kelly Seona 22 - Undergraduate Student

Kelly is in her first year of graduate study. Sometimes she attends some outof-school activity in varying places when she chooses to take bus. She is not familiar with every bus route she takes.

Feelings

Needs

Prepares to take the bus.

Feels a little anxious.

Begins to feel anxious and worries about if he get to the right place.

Wonder where the bus is. feels very anxious and plans to take other transports

The information about The current position of the bus; The arrival time of the next bus.

Feels angry if the bus still hasn’t arrived.

Asks why the bus is so late.

may have left

The traffic condition on the bus route.

The notificaitions of emergeny/special conditions.

The time and distance to reach the destination.

By analyzing the user requirements, I came out with an idea to design an interactive bus stop with functions of information delivery and interactive entertainment. This design should meet passengers’ requirements of obtaining relative information while providing opportunities to play a simple game and get some benefits to release their potential bad mood.

BRAINSTORMING

USE FLOW

The Vent Device Includes a display screen and a soft striking mechanism can be hit.

Information Screen Provide instant bus information such as scheduled arrival time, road conditions, and so on.

No.1

Bus Arrival 342 109 205 91

1min 3min 5min 10min

Real-time bus information

Road conditions

Make new record to win vouchers

No.2

No.3

Striking mechanism

Hit

vent emotions Emergency traffic information

Competition

pleasure of winning

Rewards

change mood

Ready

Bump to start

Heaviest hit to the soft ball

Break the record

Guide to collect rewards

Succeed to collect rewards

Back to beginning

Remind when the bus is coming

INTERFACE DESIGN

Bus stop

Chaoyang Gate

MODELING

201 To Anheqiao North

205

Soon Arrived

19:32 Friday 20 .

To Yuanmingyuan

398 To Zhongguancun

403 To Huajiadi

-4

2°C

Air Quality Unhealthy

622 To Wangjing

12,13 min 9 1,9,15 min 12 3,6,9 min -20 10,13 min -8 4,7,9 min 5

LIKIT Restaurant interactive feedback system design | 2018. June

INTRODUCTION With the thriving of internet, people are increasingly attached to mobile phones. They are staring at the mobile screen even when they have a meal. They are so fond of clicking “like” on social media that they sort of neglect communication in the real world. Based on observation of this phenomenon, this project proposes that we show “like” offline other than online, in hopes that people are guided to concern more about interaction and communication in the real world, and arouse their awareness of disassociating their life from the internet.

Color Scheme #

BACKGROUND

USER RESEARCH

Nowadays people are inclined to obtain and share information through social media, especially for young people.

Through field investigation and interview, I found that people tend to be influenced by some factors when it comes to selecting a restaurant or ordering dishes.

Online media has dramatically changed the way consumers discover food.

other people’ s recommendation

Customer Journey Map Stage

Stepping out Deciding to dinner. where to eat.

Arriving at Ordering restaurant.

Eating

After the meal

Take photos of dishes.

Publish meal evaluation in social media.

comments on social internet

feedback on relative internet platforms grades comments pictures

50%

People show their emotion such as “like”, “useful”, by clicking “like” on internet platforms. Clicking “like” becomes the simplest and fastest way to give feedback on certain information.

Learn about food from sites like Twitter and Facebook.

40% 84%

Learn about food from websites, apps, or blogs.

Trust online reviews for dining decisions.

Search for Restaurants on the Internet.

Persona Lisa / 24 / work for 3years / 15000rmb/M Occupation: Media Practitioners Social media: INS(fans 3w), Twitter • Likes to stay with her friends in her spare time.

• Frequently use social software, and is glad to share her explorations.

• Often post delicious food on social media.

• Prone to refer to social network when making choices.

Choose restaurant after site comparison.

Restaurant specials on the menu.

Observe what other people are eating.

Check Online

Feelings

“Go to the restaurants recommended by my friends.”

“When the specialty is not so recommended on the internet, I will hesitate if I will order it.”

“This dish looks great. Let me take a photograph and share it on the internet.”

Pain Points

• May not keeping with one’s taste.

• Takes time to sort out the information from so many recommendations.

• Menus without pictures of dishes.

• Information on the menu different from that on the internet.

• Takes a long time for information update on the internet.

• Misled by the comments on online platforms.

• Have no idea the name of dishes.

• Few people notice it.

PRODUCT ANALYSIS

CONCEPT Based on the above research and analysis, I want to substantialize the behavior of “clicking like”, moving it from online to offline. In this way, people can concern more about communication and interaction in the real world.

I name the product “Likit”. Customers could use it to “like” their favorite dishes and instantly share the information with other users in the restaurants.

Show preference for dishes with Likit.

strong points

User can clearly see the ratio of positive comments in all comments.

On the homepage of the restaurant, user can access the menu and check the popularity of the dishes.

The ranking list of recommended dishes is put in a striking position on the homepage of the restaurant, with the top three highlighted.

The comments are displayed chronologically, which can help the users to obtain the latest information .

User can click a specific dish to see pictures shared by other users, as well as their comments on this dish.

The detailed comments with both description and photos are marked as quality comment and put at top of the comment area.

There is only description in the weak comment areas, which makes it hard points for the users to have direct information.

Most of the latest comments are long paragraph of descriptions, which takes time to browsing.

Some quality comments were posted long time ago, and may be diffent from the recent situation.

Eat in restaurant find some delicious dishes.

Send information to screens.

‘Like’ the dish get information about it.

For people to get information from others.

Share the information with others in restaurant.

20

Results

Which one can help you understand the meaning of the product better

16

4

IDEATION

FLOWCHART screen Dormancy state

Multi-Likit with app

• Likits for each dish.

• Transmit the “like” information to an app.

Disadvantages: • Difficult to hold so many Likits; • Users are not completely detached from the mobile phone.

(display use guidance)

Favorite dishes in 12h

Menu page

The dishes ordered Favorite ranking week & season screen workflow

Manualphotographing Likit

Self-sensing Likit

• With a tiny camera.

• Shoot the dish to like it.

• Show “like” on small screen on the table.

• An NFC sensing patch.

• Put the Likit close to the dish to like it.

• Show “like” on small screen on the table.

Disadvantages: • Inconvenient to operate; • Difficult to be recognized: the photo is not clear enough for the dishes to be identified.

Likit workflow Information transfer

Show details of a dish

Display feeeback of ‘like’

Likit

Dormancy state (light off)

Opening state (light flicker twice)

Complete ‘like’ (light on)

INTERFACE SKETCHES

PROTOTYPING

INTERFACE DESIGN

DEMONSTRATE

Today 11:00

12:00

Week

Step1

Season 13:00

14:00

Seasoning Fruit Salad Add to cart

2

Step2

Step3

PHYSICS AR MINILAB Augmented Reality app design | 2018. Februray

INTRODUCTION This project is focusing on the design of an augmented reality app which can enable students to do experiments whenever and wherever they want.

In China, the middle school students cannot freely access the physical lab, they can only do experiments on specific experiment courses. In such cases, the experiments fail to equip the students with opportunities to flexibly put what they acquire into practice, enlightening them. A “mini lab� that is accessible at any time can solve the issue. It provides the students with independent operation environment by creating simulated experiment scenes and presenting the feedback in real time.

Color Scheme #

PERSONA

COMPATITIVES Jackson Age: 14 Grade: 8 School Middle School in Beijing.

Average school hours: 9H/Day. Average study time at home: 3H/Day. Length of studying Physics: 6 months.

Schedule of Physics class: 2 classes per week; 10 experiment classes per semester.

“Compared to the theory courses, I like experimental classes more, because the hands-on experience is more interesting . But there are so few experimental classes.”

Painpoints

Multiple modes of teaching Exercise practicing function Experimental explanation available

Needs

Few experimental operations and short operation time fail to let the students to really grasp the experimental content.

Repeated operation at any time.

Few experimental opportunities and simple instructional mode reduce the students’ passion for learning.

More experimental opportunities.

Students have no chance to independently design and study experiments.

INSPIRATIONS

Experimental operation section Simulation of real experimental environment Independent design experiment function

Conclusion Design experiments freely.

Not including both theoretical knowledge and experimental teaching.

Experimental learning is neglected.

The way of teaching is simple.

IDEATION

INFORMATION STRUCTURE

Before

student

laboratory

make experiments

school After

scan a plane

student

school

home

coffee house

app

FLOWCHART

INTERFACES EXPERIMENTS

Study and do experiments anywhere with a tablet or a phone.

Mechanics

Electricity

Optics Magnetism

ELECTRICITY

Conductor + Use method Diagram 1 Diagram 2 + Measure + Reading + Connect + Placement

APPARATUS

Optics Magnetism Electricity Mechanics

Negative contact Positive contact

PROTOTYPING & TESTING The prototype is made with unity3d and vuforia and tested on Android mobile phone.

testing vedio https://youtu.be/R7qK6EybJAQ

CODING

Screenshots in Unity

AVAZING STADIUM Creative soccer stadium design | 2017. April

INTRODUCTION This project is aiming on bringing the football fans a better experience of watching match in the stadium.

I find some problems when I watching match on the scene, the information of players and teams won’t be introduced, and audiences can’t see the players clearly, this condition will bring troubles to them to understand the game. This project design a brand-new concept court combining the advantages of TV broadcasting to solve these inconvenient problems and to bring a better watching experiences and a more passionate atmosphere to football fans on the scene.

Color Scheme #

CASE STUDY Nike new-type basketball court "House of Mamba" Technology

Laying LED screen under the court and covering protective layer above it.

Effect

Information about running route and the best shooting position displayed on the screen.

Purpose

Help players to train through the revealed routes, positions and so on.

I designed a questionnaire about the habits of watching games, including the usual way of watching games, ideal way of watching games and elements affecting the feelings of watching games. And I get 68 effective questionnaires totally.

RESEARCH NBA League finals awards ceremony

Football games television transmission

Project the frames on the court by the 3d projecting techniques.

Using the AR television transmission technology to connect the real-time frames with the computer-generated images.

In my survey, 70% audiences’ ideal watching games way is watching games on the scene, and only 25% audiences often go to the scene to watch football games.

Take the court as the screen to shoot videos and pictures on it.

Present the competition process and results more clearly.

Ways to watch the recent 10 matches

Convey the information to the audiences and heighten the atmosphere.

Make audiences who watching the television transmission games know the situations better on the scene.

The favorite way to watch matches

25%

46%

29%

12%

70%

18% Have no time

go to the scene Audiences think the atmosphere and live commentary are the most important when watching games on the scene.

The main reason of not going to the scene: there is too little competition information on the scene, which is less convenient than watching TV at home.

webcast

30

Far distance

Too little Tickets are too information to expensive. understand

TV boardcast When watching games on the scene, audiences focus mostly on the starter’s data, team formations and the recent situation of the team.

starting line-up formation recent results of the team referee information coach information other

ppl atmosphere commentary sound food seat

70% 64% 52%

PERSONA

CONCEPT

User Groups

•

Behaviors

• • •

•

Goals

•

•

Needs

•

Basically pay attention to every game of their supportive team.

Usually watch games on TV. Go to the scene to watch games when there’s plenty of time.

Focus on news about the teams.

•

Enjoy happiness in the process of watching games.

Adjust their lives through these exciting feelings got from the games.

•

Information about the opponent team’s players and other teams.

Feel a little unconformable when watching games on the scene for there are no commentary or playbacks.

•

•

• •

• •

Go to the scene to support their supportive team almost at every game.

Carrier some items standing for the supporters when watching games.

Aim at giving the strongest support to their team.

Companying the team to go through all the growth and frustration.

Enjoy the scene’s happiness in cheers.

Every home game should have good atmosphere on the scene.

Feel the cheering of the court when the home team galling.

Get acquainted with other fans.

PLAYER CONCEPT

STADIUM SETTING

Introduce the players’ information on the court before starting, and connect the 360-degree solid images of players together with players’ abilities numbers which is a more visualized way to present to the fans on the scene.

Circular holographic projection film screen Before the match starts — Show information of players and teams During the match — Show the score and to commentary contest

Player virtual figure

During the break — Show awesome playback The End of the match — Show the Result

Players’ basic information & statistic data

Virtual Reality football field Before the match starts — Show players’ position The End of the match — Show the Result

Numerical visualization number of player’s abilities

SMART MIRROR Interactive mirror concept | 2017. June

INTRODUCTION When I took the internship, I found that the intense work would make office environment very depressed and busy staff often didn’t have time to adjust their own status, which is detrimental to their physical and mental health in the long term. In response to this phenomenon, I designed a smart mirror which can link people’s mood and weather, detect facial expression and provide feedback of the weather element from mirror. At the same time, it can adjust people’s mood in a short time and get relaxed for a while during work pressure.

Color Scheme #

BACKGROUND

FIELD RESEARCH

In the city, Minor depression has become normal psychological phenomenon among white-collar workers.

I observed 3 important public areas in office and analyzed how people behave in different space and the way they use the public equipment.

Continuous overtime

High-intensity work

Long-time working

Compressed rest time

Investigation on health status of white-collar

76%

Work accounts for

sub-health

60%

over-worked 2.5%

Office whitecollar average weekly overtime survey:

healthy

1-3h 3-5h 5-10h 10-15h >15h no overtime working

60% of the entire day.

Problems: Have no time to adjust mood Respond to constant pressure.

Observation

Coffee room

Printer room

Washroom

Coffee machine usually takes up more wall area.

Will cause the crowding if other object is placed around it.

Big printer and the related equipment are placed there.

The space is usually small and stuffed with disordered goods.

Usually spacious and big mirror is installed on the wall.

The environment is relatively simple.

Staff often read via phone or chat with others when waiting for coffee. People won’t stay here for long time.

Focused on what they have on hand. Staffs usually are still in work state when printing documents.

use the washing room regularly

Almost everyone who uses the washing room would look at themselves in mirror. The behavior seems more like a subconscious move through which people are ensuring whether their outlook is decent or not.

CONCEPT Via facial identification technology, we can tell people’s expression by looking at the mirror. Corresponding weather element can be shown according to the expression shown on mirror background. Again by watching changes of weather element, it can evoke people’s consciousness to adjust their mood.

INTERVIEW I interviewed 20 staff working in the office. I invited them to watch 17 short videos containing different environments, weather, and natural element. At the same time their thoughts, priority focus point, and impact on their psychology would be recorded when they watch the videos the first time.

Conclusion

Some elements which are applicable to people.

Sunshine

Green leaves

Light rain

Blue sky

TESTING

PROTOTYPE

I put the prototype, the mirror in the classroom. When people look into the mirror, the background of the mirror would change accordingly based on their various expressions. I would observe how they react with the mirror through camera.

According to the testing, I found that users would be confused by the changes on the background of mirror since they can’t link the changes of weather elements with emotional changes of themselves.

I improved my design and added smart cartoon images, enabling cartoon image to communicate with people and help them understand what’s happening faster.

When nobody is there, it's a normal mirror.

When someone looks in the mirror, it’ll interact with the person.