zhangyangchen's portfolio

Interaction Design

Kool(k)

Kool(K), is a Controller-Free Kitchen Environment by using two 3D depth cameras and sensors. It has the possibility to analyze all the values from different sensors of appliances and record the cooking process. Users can easily share their own timeline-based recipes which are automatically generated by Kool(K) with the world. Meanwhile, it encourages people to try and improve the recipes which are existent. Thus, it is also a Learning and Organizing System for cooking after using for a while. They can track their own cooking and food habits, collect recipes from the world, and organize and plan their cooking time of multi-dishes.


Background

As technology evolves, ubiquitous computers will also come in different sizes, each suited to a particular task in the kitchen. There is a design opportunity to design a smart system or appliance to inspire people to enjoy cooking.

This is a nine weeks individual project in collaboration with Electrolux design lab.

 

Question

On the wide scope of this project, I investigated several kinds of phenomenon, cultures and cooking methods in the kitchen. I also am interested in finding out what will happen when kitchen applications become connected.

I started with some interviews include an extreme user who is a Swedish chef and observing their daily culinary process after going through some papers.

Through the interviews, I found a conflicting situation why people like cooking but they usually have fast food or frozen food.

From these two doubts, I had a plan to understand them and to design something to supply creative ways to affect their cooking habits.


Understanding

I did a survey with my classmate Joachim to find out a few things we think would be very interesting to look at, namely how we manifest a food style, and how it may evolve and which influences it is subject to.

If you would like to know more about it , please download the result of the Survey from here: Cuisine thoughts

After collocating these information, I listed some key pints below:

Exoticism inspires their cooking.
People like cooking and sharing food with friends.
Recipe is a popular way to learn cooking, but it has its limited.

Ideation

Based on the research, I illustrate an information map to describe the process of cooking from three elements which are people’s activities, ingredients and appliances.

On this map, I pointed three design opportunities on three different steps during cooking.

Here is a storyboard below to explicate my initial idea that people can create and share “recipes” easily.

A dynamic recipe?

As for the scale of the concept, there are many aspects I have to consider. I decided to focus on the dynamic recipe. Since we are familiar with social network and it is not an innovation in this system.

The dynamic recipe is generated based on timeline by the system via receiving values from different sensors in the kitchen. Thus the benefit of this new recipe is that users have an overview of the whole cooking process.

Developing

In order to complete the system from technology to user experience, and integrate them into design, I played with sensors and a 3D depth camera which is Kinect in this case to make a prototyping for test.

In this phase, programming is most challenging part for me. I used a processing library for hacking Kinect to track people’s activities.

Gesture interface

Considering the situation of cooking, for example, a wet hand, I designed a gesture interface instead of touchscreen or something else.

Here is a short video to show which kind gestures have been used in this system.

 


GUI

I started with wireframes to design the UI. I would like to keep the interface simple and efficient. The purpose of it is to afford limited information to help cooking.

Result

Kool(K) is shown to Electrolux by projecting the UI animation on the worktop to simulate the scene in the near future as the photos on the left.

Please watch the proposal video at the top of this page.

Cat, Pad and Food

INFO

This week, We had a course called Mobile Hacking with Matt Cottam and Brian Hinch from Tellart.

The design brief for these five days of concept development and prototyping was to consider non-verbal communication and telepresence as constraints, while creating systems in which people could use their augmented mobile devices to interact with their pets when they were away from home.

 

CONCEPT

Erik, Maria and I worked as a team designed an application in which a light sensor allowed you to see if your cat’s food is running out on your iPad. Then by shaking the iPad you could shake a box of food back at home to call your cat, and by tilting the screen with the same gesture as pouring cat food from a box, you could refill the bowl. Meanwhile, a proximity sensor allowed you to see if your cat is closing or not.


DOCUMENTATION

Despite the model clearly being a sketch made of wood and hardware store parts, it was wireless and it worked.

Here is a video documentation about the process of this project.

Airborne

INFO

In this one week project, our aim is to design a flash game which can be played on multi-touch devices.
I worked with Joachim, and created an air-fighting game on iphone/ipad.

DEMO

Here is a version I made for web browser left. I used “mouseEvent” instead of “touchEvent” in this demo. 
Please click “START” to play, enjoy!

DOCUMENTATION

Here is a documentation of this workshop which gives an introduction to Multi-touch, with focus on designing and coding basic prototypes, working with touch-events & gestures, user interaction and final tests on a touch-device. And we explained the codes of this game in it.

Unet System

BACKGROUND

This project was done in collaboration with Sogeti, who was working with Social services department of Umeå Kommun (Municipality) to develop an IT system to support their daily work processes. The result is to deliver a final concept that shows how the collaborating department at the Umea Municipality can be assisted in making informed decisions efficiently.

We, Nirvana and I, as a team looked into the service houses within the social service department. Service houses in Umeå are where elderlies can live under daily supervision.

INITIAL RESEARCH

We visited one of them in Umeå which called Sofieborg Servicehus several times to understand their work. After five interviews with the elderly family and employees there, we got an overview of the hierarchy of Umea Municipality.

On the left there are two videos which one is clip from our interview documentations to show staffs working details in service house. Other one is the analysis on how is the current situation in terms of information sharing and what is the scope of it.

Based on interview and analysis, I made a flash chart to describe the hierarchy of service house and the information sharing in Umeå Kommun. Click each levels to look through the information details.


CONCEPT

Because the staff in retirement house are the front level to face the clients who are selectezd by hospital and selection committee, we focused more on them in our case. After ethnographic research and brainstormings, we set our goal of the project is how can we make the information sharing  between the Umeå Kommun’s different levels of management and the service house staff more efficient.

There is a graphic to show our solution for the goal. We designed four channels for all the related people in the system to reach the data base to get the information they need. It was important to make the system for each group that the information is not overload or lost.

All the tools that are included in this system are feasible and familiar to each group.

RESULT

Here is our story of the concept.

Starry Sky

INFO

I worked with Umevatoriet which is an observatory and planetarium to design a graphic advertisement.  The  main mission of the campaign was to inspire young people’s interest in natural sciences.

The goal of this project is exploring the possibilities of using graphic form, layering and animation in interface design. These approaches attempt to explore a visual structure for interfaces that break the traditional boundaries of GUI design.

Inside the observatory there is an artificial starry sky – a planetarium that makes it possible to view events in space. Furthermore, there are more exciting experiments and actives for children in Umevatoriet.

RESEARCH & ANALYZE

After interviewing with Umevatoriat and Umea citizen, I noticed that most of people, don’t know where Umevatoriat is but they felt a lot of interest to visit it. Thus, my idea is to find a solution to make the relation between city Umea and Umevatoriat closer.

One concept is that masking the solar system on the map of Umea. The position of sun is the same location of Umevatoriat. According to the map, I selected some pots on the earth orbit which are available in the city to install the outdoor advertisements. Blue circles display the sign locations in the center of Umea.

On the basis of this analyses, I separated all information into 3 different categories based on content and behaviors how to get information in normal life.

CONCEPT GENERATION

Considering the huge cost of building a lot of tangible dome screens around the city, I offered another solution using the screen of  a mobile phone to display information.

In order to add more interaction between  a physical real-world environment and the screen-based universe, I found another interesting technology Augmented Reality which I tested on my laptop with the cam.


DESIGN PROPASAL

The concept used mobile phones to browse information of Umevatoriat.  People in proximity of the mark area can spontaneously sign in, and connect to the Starry Sky application via their Bluetooth-enabled mobile.

Based on augmented reality and location service, citizens can easily browse current information about Umevatoriat and Universe in the mark areas around Umeå,

The mark on the ground is an abstract pattern  about Umeå map to evoke curious and help people without mobile phone to reach Umevatoriat.

Here is the video to show the concept.


Pacific Pet

BACKGROUND

This was a two weeks product design exercise, for a sound design course. 
We were asked to identify a product sound interface and characteristics are lacking or are of a poor design quality.

The objective was to analyze the existing sounds the product produced and envision how they could be improved. These could include new sounds and or lighting effects.

We began with a Mini Brainstorm to choose a theme which we were interested with.
We decided to design something for blood center, cause there is no any satisfy  sounds in the blood donation room  which makes people feeling nervous. We visited one blood center in Umeå to record some equipment sounds.

RESEARCH

There are more than 410 000 active blood donors in Sweden, today.
Erik is one of blood donors in our school.
We went to the blood center in Umeå follow him, and recored the sound during the process.

Based on analysis of Erik’s experience, we list all the design opportunities and try to find the potential among them.

Our main goal is to create an experience for the donors to feel about giving blood to other creatures for saving life. At the same time, the product makes donors  feel comfortable and calm. After sketches, we decided to add sound and light to pillow which can interact with donors.

PROTOTYPING

We spend couple days to make a prototype. Many tools were used in constructing the prototype. We attached touch sensors in the pillow to receive signal input and send to arduino. We also used VMusic2 audio player is an affordable and simple solution to playback audio in a controlled way. We just uploaded the sound we designed in Audacity on an USB flash disk and then issue commands to the player via serial communication. In the same time the same signal will control the LEDs inside, the light switch relates to the sound.

In this case, the challenge was that we want to this pillow can breath as a pet. We had to try various different mechanical construction to make the moving smoothly to the sound. Finally, we used a small powerful servo to make our idea coming true.

RESULT

Here is a video showing how it works and how the sound is.

Sound design for Electric Beetle

BACKGROUND & RESEARCH

In this second phase of Industrial Sound Design, we were encouraged to freely experiment with relating sounds to actions. It was a team work with John and Erik, I mainly worked on prototyping.

As a starting point we were asked to select an automobile brand and discuss what is characteristic of this brand. We would imagine that the company we had chosen has decided to produce an electric car, which basically has a silent motor. That’s the reason why we need create a sound that the car can emit so that pedestrians and bicyclists can hear it approaching.

Volkswagen old Beetle was our choice. We all agreed that Volkswagen vehicle was popular using for everyday life and Beetle was a fashion classical icon. Here is the theme board for our imagine electric beetle.

stick a magnet on the wheel for inputing the speed

PROTOTYPING

Then we began to search, record and edit sound by ourselves. For presentation, we made a prototyping which I am responsible for to show the sound relating to the actions.

I used a touch sensor, a distance sensor and a magnetic sensor which was used to count the rolling speed of the wheel to input the signal to arduino. In order to to replace the physical wired Serial communication (USB cable) with a wireless one, i used Xbee which provides wireless end-point connectivity to devices.

And I made a video dairy recorded the process of  this exercise from the begnning.

 

RESULT

Here is a demonstration to show how it present the sound which we designed for the vehicle.

Data Visualization for Control Room

BACKGROUND

Pöyry which is the collaborating industry partner in this project is a global expert in consulting and engineering.

In this project, a new fiber analyzer is available. This gives an opportunity to achieve large amounts of relevant quality date of the pulp every 20 seconds without testing the quality in a lab. This requires skilled operators but also tools to help them to sort out the crucial and relevant information to make it possible for the operator to run the process energy efficient and producing pulp with right quality.

INTERVIEW

By being guided around the paper factory and interviewing some operators, I got an overview of their working and the operator control interfaces in use.

Therefore, I have learned some important fact that it is a complicated work to find out problems from tons variable values. The quality result depends on the experience of the operator who has to be trained around 3 years.



RESEARCH

Due to the complexity of operator control system, my ambition for this project is to find a solution of data visualization which is not a replacement for existing control interfaces. It works like a screen saver which visualize the date to operator. The specific challenges of the concept are as follows:
a)    Find new advisable ways of visualizing the information to the operator so more information with trends or sometimes just singles values can be presented at the same time.
b)    How can distributions and uniformity be illustrated in time?
c)    How can operator get an instant overview and at the same time valuable information about the past?

In general, the challenge is to make the signal clear and intuitive.

Meanwhile, I started to read some articles in this area to know more about data visualization. Our class had also created a blog for sharing stuffs we found that collect to this project. Meanwhile, we had done user studies analysis, task analysis and mapped design opportunities together. I sorted out interesting points as follows:

During the research phase, I have stumbled upon a topic about “Performance Versus Preference”. At the end, I thought the final concept would not be too far away from the preference one. As I know, they felt comfortable about the existence interface. Thus, my research focused on Interpretation. For example, it make sense to define right direction as future, to define up direction means value increasing. So, the graphic would not be a problem for understanding even without any introduction.

CONCEPT

In this project, some properties measured or calculated in the analyzer are more important for the operator to constant oversee. They are
– Binding (reflected by the Tensile Index)
– Fiber length (reflected by Average Fiber Length and Tear Index)
– Energy Efficiency
So it would be good to see/monitor these three parameters at the same time at the first level. I put the other parameters at the background without taking too much attention.

There is an illustration on the left to show the concept.

INITIAL INTERFACE

Inspired by the water level, this concept uses a line instead of the whole production pipe line and several circles moving up and down to visualize value changes.

Depending how many production steps you have, the line is divided into equal slices.  If all the values of parameters are ideal, there is a straight line without any bulges. When one or more of them are changing too much, the circle will jump out and move. The color and size of the circle would also change according to the values.

PROTOTYPING

In this project, I used Processing to make prototypes reading the real values form the data base to test my concept. 
Here is the XLS data and processing file you can download.




FINAL PROPOSAL

In order to avoid  information overload (anxious) and underload (boring), operator can choose different levels of visualization on the left panel according to the situation. The main parameters of the paper quality  reveal on the right.

Operator can check the setting of this parameter to get more detailed information by moving his mouse on the circle. Computer has a data analyze program to show the relationship between different setting and parameters that could be a help system for beginner to find out the problems even without any experience. Meanwhile, the system highlights the relevant machines which affect the quality of the fiber or paper.

For example, if one refiner machine has been highlighted many times in a short period, the operator should go to the factory to check the physical machine probably.

Digital Camera Graphic Design

BACKGROUND

The assignment of this project was to design two digital camera interfaces include the behavior and appearance.

We started with mood boards and theme boards, explaining a feeling. The challenge is to through an expression explain and transmit the feeling without words, of rapid, light, precision robust, etc. Then, I picked two themes, precision and rapid, to design the graphic.

FEATURE DESIGN

Inspired by the beauty and form of classic cameras from the past, I designed the external appearance of Canon camera which could express the feeling of precision on the left.

The challenge was that I was not allowed to change any of the given measurements and not move the flash or optics. Thus, I was focus on the color pattern and texture.

Here is another theme below, that evoke a rapid feeling.

ICON DESIGN

In this part, I tried to keep the feeling by playing with proportion and the way icons appear on the screen.

Here is the process of designing the “Rapidness” icon family.


DYNAMIC BEHAVIOR

I tested the finger activities on a piece of cardboard which has the the same size as the camera, in order to find the balance between usability and “Rapidness” gesture. I noticed that the gesture which right thumb slides quickly on screen evokes a rapid feeling.

Here is a short video to show the concept, a gesture-based interface. The advantage of this interface is that users even do not have to watch the screen when they are used to the position of each options.

 

INTERFACE OF PRECISION

In this design proposal, I got the inspiration from old mechanic machines. There are some little details I added to this interface like “stop” feeling and “magnify” affect to express t “precise”.


Design is a Game

the photo of the game board

INFO

The aim of this project was to design a board game to expose the dilemmas working with other people. It was a 4-week project cooperated with the students from Southern University in Denmark.

interview

INTERVIEW & STORYBOARD

First week, I teamed up with Sor and Nirvana to visit  Sogeti which is a consultancy specializing in local professional IT services.
We had to find dilemmas in their working process and environment and tried to transform them into our game.

During the interview,  we found out some dilemmas like communication, decision making, human source, time limitation etc. Then,  we made the storyboard (drawing on the left) that depicts sample dilemmas.

After the  second week, we regrouped (I worked with Nirvana, Tao and Katherina) and picked a new dilemma (to grow or not to grow).

We listed all the games we like such as Monopoly, Chess, Uno (a card game), Five in a row and etc, try to find out why people like to play. We agreed that there are some key words should be used to characterize our game like strategy, simple, and fun. These became our basic ideas of our concept. After brainstorming, we set down with one direction and made a “mock-up” for testing.

Here is the new storyboard left, we felt this board game should play with 2-4 players.

MOCK-UP & USER TEST

After testing, we made the rules easier for a beginner. At the same time we began to make the pieces and play board with laser machine and saw.

FINAL RESULT

This game QBQ, means cube beside cube. Based on test user surveys, it was a success. The word “fun” was frequently mentioned by respondents and they also liked the idea of 3 dimensional moves.

 

 

 

QBQ being shown at an EU conference in Umeå, Sweden