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.