APPLICATION DESIGNZhang Mu NiangGreen Wheelz

EMBODIED INTERACTION DESIGNLetters to Pelle

WEBSITE DESIGNCTQuan.comXiao Yuan Tong Low Carbon Travel

GAME DESIGNGravgemEinStein würfelt nicht!Fight the Landlord

PRODUCT DESIGNSilk Wardrobe

412

17

2832

35

4045

46

47

4

5

Despite of insufficient source of income, Chinese university students are often obsessed with impulse spending. This app aims to foster students’ habit to have better consumption plans.

The app enables users to have a clear record of each bill, including photos, the consumption type and place. All the bills are displayed on timeline to make it easier for users to track their consumption history. Users will be encouraged to save money through fulfilling virtual tasks. More tasks they finish, more virtual badges they can achieve. Those badges can be shared on social networks. Everyday, the system will remind users to go on with the habit of keeping accounts. If users can persist on doing it, the aim of the app is achieved.

In our design process we applied the User-Centered Design method to make sure our product can meet users requirments. Task and Reward machanism was also used for motivating users to cultivate good finan-cial habits.

BACKGROUND

INTRODUCTION

6

From the result, we found that the problems above are the most serious ones. It shows, most of people has the willing to do acount. In the individual interview, we discovered the fundamental need behind the accounting behavior is that they want to save money. For students it is especially important since they do not have strong economic strength. From observations and interviews with many college students, doing job to cover living expense is not common and their main source of money is from their parents. Therefore, they need more reasonable plan for their daily spending.

What’s the most serious problem that students encountered in the process of consumption and saving money? (5 - Very serious, 0 - Not serious)

USER RESEARCH (Survey & Interview)

In the interview, many students mentioned that they don’t like to input items manually. One student said:

“Once I tried to use a accounting app and it required me input what I have bought every time, that was annoying and I stopped using it.”

A girl who prefers to write consumptions on notebook said:

“I don’t get it why all accounting applications look so professional with a lot of tags I can’t recognize. I’d like to write things down by myself.”

7

PERSONA

Name: Qi ChenAge: 23Senior student inConmunicationUniversity of China

Living in Beijing, every month her parents give her money. She always shopping on impulse, so that at the end of each month life becomes embarrassment. She tried to use accounting software, but feels it doesn’t work, so give up acounting.

Name: Zhu YunAge: 21Junior student inScience and Technology University of Beijing

Living in Shan Dong province, his parents deposit a certain amount for his living expenses each term. The biggest spending is food and finance is never a concern to him. But recently he wanted to buy a very expensive mobile phone, so he starts to sav money.

After transcribed all the interviews and organized all findings from observation, we made affinity diagram to help us clear up the structure of those data and narrowed down our direction of further design. Based on the result, we generated six key elements as follow:

AFFINITY DIAGRAM

8

DESIGN PROCESS

Interview (Consolidation)

Each time when we finished the prototype we made informal interview with real user for consolidate our design idea and receive feedbacks from them. Those feedbacks will help us make our system even better time by time.For example, in one of our interviews, the user suggested us to improve the analysis feature. She said,

“ I d o n ’ t l i k e c h a n g e between tabs so often. I a lways on ly read the information on default page

sometimes I even forget there is another tab.”

After discussion, we removed the tab. Instead, user can change two views by rotating their phonefrom vertical to horizontal.

We believe that functional, practical software can also be interesting to use. Indeed, c u l t i v a t e g o o d f i n a n c i a l habits is a difficult thing, we want to change their attitude first. Refer to the result from user research, we knew that students have willing to save money. However, what they lack is a motivation to urge them stick with it.

Gamiffication as a persuasive t e c h n o l o g y c a n b e u s e d as one of the solutions for making save money a fun thing to do. We designed some predetermined tasks for them, which required saving certain amount of money, for example 500, and when the task is completed user will achieve a badge as reward and he/she can choose to share it on social network like Faccebook.

GAMIFICATION (Task-Reward machanism)

After user deposit or with draw money, the illustration here will change correspondingly.

I used hen laying golden egg as a metaphor. When user deposit money, the hen lays an egg; while when user withdraw money, an egg breaks.

On going task & completed task

Two ways to deposit / withdraw money:1. Drag and drop the round button.2. Input the amount.

Illustration:I would like to compare saving money with knitting a sweater, doing which you first need to have a good p lan, then be patient and keep “needling” little by little.

Choose other task

9

10

UI DESIGN

After analysed many accounting applications, we found a convention that people tend to use green and red to indicate income and consumption respectively. And lots of applications are using green as their main color scheme. To make our application different, I decided to choose blue-green as the main color because blue brings a feeling of calm, trust and peace and green is the color of balance and growth. In addition, instead of red we picked pink to be our secondary color. The blue-green and pink contrast sharply, which can effectively attract young people’s eyes.

Color Scheme

To make our application more attractive to young people, especially girls (regarding to the result from survey 73% college girls have intention to track their consumptions) I designed a mascot for this application.

The reson why I selected the chicken as mascot was because, in Chinese "chicken" and "accounting" are homophonic, so it is easy to build association with accounting and our app. Also, ch icken mother ’s image will allow the user to associate a good housekeeper, so make the app feels safe and reliable. In addition chicken’s image identification is simple and easy to remember. From the perspective of graphic design, its expandability is also very strong, thereby, we can use this image of the chick-

en to develop many other visual elements, such as this illustration:

Mascot Ilustration Design

OUTCOMES

11

Accounting PageMenu Task Page

1212

13

INTRODUCTION

In the last couple of years, persuasive technologies and gamification have been rapidly growing areas, which are used for purposes of attitude change and motivation.

One of the most common problems in today’s society is the environmental issue and people have multiple choices in terms of environmental responsibilities. In this project, we attempted to use gamification as an experimental solution for motivating people to commute by bikes instead of driving cars.

USER RESEARCH

Before deciding on which functions to use in the application, a questionnaire has been prepared to investigate the user requirements.63 respondents in total have participated to the survey.

Ten main functions, are determined as major questions and further each is divided into three or four more specific sub-questions. For each question the participants were asked to choose the answer from 1(dislike) to 9(like).

FINDINGS

Based on the analyze of questionnaire answers, the “must have” funct ions were mainly about being rewarded . Correspondingly the “should have” were mainly on how to achieve these goals, such as having single player quests, challenging friends or cooperating with them. Beside those main functions, the “could have” were mostly on some detailed additional ideas. The “would have” apparently reveal that people are no more interested in sharing or seeing on Facebook.

Let's play!

14

According to the results from survey, people would like to challenge or cooperate with their friends while riding. So, in our application, we provide users three play models to choose: “single player”, “challenges” and “co-ops”.

SINGLE PLAYERIn s ingle play model user can enjoy riding by himself/herself. A quest will be displayed, as soon as the user complete the task, he/she wi l l earn certain points and achieve special badges which will be shown on profile page.

When riding, the user has chance to get virtual items which can be used in "challenges" or "co-ops" model.

The description of the item will pop-up when user click on it.

Home Page Single Player

AVATAR

When user first time login the application, he/she needs to create a avatar according to the gender, age, height and weight. The body shape of this avatar can be changed as the system will constantly calculate user's calorie consumption while he/she is riding. This avatar will be shown on user's profile page.

Young strong man

Middle age heftier man

Create Avatar

15

CO-OPS

In challenges model, user will compete with his/her friend on a specific task. For example, who first finish riding 5km will win.

During the competition, user can select items to either power up himself/herself or attack his/her opponent. To use these items, user need to drag and drop it on his/her name or on opponent’s name. As shown in the picture, there are two kinds of items in different colors. The red one refers to attack while the green one is power up. Those items can be collected when user playing single model, otherwise user can also buy them with money.

The progress bar is shown on top part. User can swipe it to switch between his/her progress and the friend’s progress.

CHALLENGES

User can send co-op request to multiple friends. The friend list shows up when click the "friend" icon at right-up corner. This task could contain both certain distance and time limitation. Or, user can just define distance but left time as unlimited and vice versa. After the request is sent, his/her friends will get a new message in notification page, which is written in blue color as it is unread yet.

Send request Receive request

Challenges Page

16

ANALYTICS

In analytics page, user can not only see the statistic data of their own performance but also compare it with their friends. We want to utilize people's tendency to compare oneself with others thereby to self-motivate to ride the bike more frequently. Aiming to achieve the goal, a ranking function is also provided.

Analytics Page Friends List Ranking Page

PROFILE

Profile Page

The profile page shows user's status and achievements in this "game". User can also check their friends' profile by clicking the names on friends list.

1717

Outdoor play is important for the development of children both at physical level and mental level1. Nowadays, many children prefer to spend their time playing video games or watching TV at home instead of playing outside1. In this project, cooperated with other three classmates from Embodided Interaction course, we aimed to introduce IT Intervention to enhance the experience of children’s outdoor play at Pelle Svanslös playground at Uppsala, Sweden.

The Pelle Svanslös playground is located in the Carolina Park in Uppsala and was opened in June 2014. Inspired by a well known story of Pelle Svanslös books, the highly themed playground is built with swings, slides, a Merry- Go -Round, a Bakery Shop, a Police Office, a Pelle’s House, a Church, an Animal Hut, a Water Pump, and a small Pond. When our course began, the playground had been in operation for three months.

INTRODUCTION

A panorama of Pelle Svanslös Lekplats

1. Sturm, J., Bekker, T., Groenendaal, B., Wesselink, R., & Eggen, B., 2008, June, Key issues for the successful design of an intelligent, interactive playground. In Proceedings of the 7th international conference on Interaction design and children (pp. 258-265). ACM.

18

OBSERVATION & ISSUE

ISSUE: Most of the interactions with this playground are simple and predictable, children play as what the place tells them. Despite the Water Pump, the playground provides few opportunity for children to play together.

Simple Play ActivitiesFixed Object and Cleanliness of Playground

• The whole playground was highly themed as Pelle Svanslös. • All the objects in the houses were designed base on the theme and they were fixed. • Dirt seemed not allowed by adults. They spontaneously clean out the things that didn't fit to the playground.

ISSUE: The “cleanliness” of the playground seems to hinder children from bringing other resources to the playground. Besides, the current structure of the playground is restricted by the strong theme which in a way constrains children’s play.

• According to our observation, most of the play activities were simple and repetitive and they were very dependent on the facilities, such as drove the bus, pumped water.• The Water Pump was very popular among children as they could play together with it at the same time.

19

20

BRAINSTORMING According to the issues that we found, we set our GOAL as to support an open-ended play2 of children by encouraging them to create and communicate meaning of play.

Furthermore, we formulated our DESIGN QUESTION as:"How can interactive technology provides materials to allow more open-ended play activites?"

Based on the design question, a brain-storming was conducted in order to explore as much potential design solutions as possible. All ideas, written on posters, were collected together on a white board and categorized into several groups in terms of different patterns, such as, social interaction, creating things, role play, etc. Then we started analyzing and screening all these ideas.

After the discussion within our group and a feedback session with other students and supervisor, three major ideas emerged during the brainstorming:

Collecting ideas

Screening ideas Further discussion

• Role-playing as citizens of the playground,• Interactivity with natural material, • Letting the children paint.

2. According to Hopma, Bekker and Strum, open-ended play is “a form of play where game rules and goals are not predetermined. Instead, players can create their own game goals”.

21

In the interaction lab, we built a complete model of the playground to get a holistic view of the space and see how those ideas can fit in there. The mock-ups were built with strings to depict relationship between different playground areas.

MODELING

Big model made by all the materials that we can found from our Interaction Lab

Small model made by clay & paper

After we built the model, a design critique session was hold and during which we've narrowed down our concept ideas to one. We thought the Pig idea might be too simple as the play happens only in one place with predictable result children can easily get bored. Merry-Go-Round idea was also restricted since the only action children can do with it is pedaling.

DESIGN PROPOSAL

Therefore, the Postbox was choosen as our final decision beacuse the system facilitates play without limiting its meaning. Furthermore, it connects different places in the playground, allowing social interaction in the whole space.

DECISION

• The role-playing as a citizen idea was discarded after discussion because it was trying to introduce more physical objects whose functions and goals were already predetermined.• The idea of interactivity with natural materials seemed to be very promising at this stage.

• Letting the children paint was interesting. However this idea was not taken literally, but rather we wanted to take the general idea of letting children express themselves through a medium.

1. One of our initial ideas was about making the pig respond to, for example, the water pump to invite children to come and feed the pig. The pig will make a hungry sound or emit light.

2. This design idea was to build a tube in the middle of it with leaves inside. As they increased the speed of pedal ing, the leaves inside the tube would spin accordingly.

3. So, another idea came to the surface, what if the post box can actually “deliver” a post to the houses? A simple camera / scanner setup inside the post box and some displays in the houses could create such illusion. The letter could be available for picking up in the house.

SCENARIO 1. A boy sees a post box.2. The boy draws a postcard.3. The mail slot is blinking in order to promote him to put the mail into the mailbox through the hole.

4. He puts the post into box.5. He chooses a button which indicates the building to which he wants to send this mail. 6. After the mail enters the mailbox, the blinking stop and the system starts scanning and converting it into digital image. 7. Processes the image by adding some lovely stickers (e.g. image of Pelle Cat) and texts etc.8. Sending the post.

9. The house recieves the post. 10. The girl playing in that house is surprised by this mail.11. The post is displaying on the screen wall. She likes this postcard so she presses a button to print it out. 12. She takes the postard away with her.

22

RESULTS:GOAL: Preliminarily exploration of our idea.

METHOD:

In the first part of the experiment, one of our team member pretended to be a post man stood beside the postbox to help children complete writing a post card and send this post card to a house selected by children.

In the second part of the experiment,we remove postman and hide ourselves behind buildings while observing children’s behavior.

• Children were scared by the postman and stayed away from the postbox.

• After the postman was removed, children started approaching the postbox and drawing stuffs on papers. Some papers were left on the other places of the playground (picture left).

• There was one particular girl spent a long time on creating the postcard, then she took postcard and excitedly showed it to her parents. (picture below).

ITERATION 0

23

• The major part of the hole was covered by a front board. • Four clay-made buttons attached with hand drawing pictures, three of which represented buildings in the playground. • The question mark button, right corner, meant sending letter to a random building. • Colorful papers and pen were left on the top of the post box. • The back side of the postbox was covered with a wooden board which can be flipped up.

Front side of the prototype Back side of the prototype

GOAL: Preliminarily testing of the physical prototype and process.

PROTOTYPING v1.0:

METHOD:

STEP1: One of our group member is hiding behind the postbox when participants insert cards.STEP2: He/she can get postcard from the backside.STEP3: Take picture and send it to the tablet in the selected house.STEP4: Another group member stands in the building will show the image to the participant with iPad.

Wizard of Oz Technique

Our participant was a 5-year old girl (alias name Susan).After listening to the introduction of how to play by her mom, she wrote a postcard and sent it to the Pig House.

RESULTS:

ITERATION 1

24

1. Understand the system quickly: After she finished one session, one father and two children came by and checked the post box with curiosity. Susan started to explain how it works to them.

2. Familiarity with the place: Susan could matched icons on the button with the buildings in the playground easily. But she couldn't understand question mark button.

INSIGHTS FOR NEXT ITERATION:• From her understanding of the operation to this system, we found that more feedbacks were needed.

INSIGHTS FOR NEXT ITERATION:• We should replace the question mark with the image of another building in the playground.

GOAL: • Testing with younger age group. • Testing the light feedback when user press the button.

PROTOTYPING v2.0:

Changes from last prototype:• Four LEDS are installed under the buttons. They are controlled manually by the wizard everytime a letter comes in.• Question mark button had been removed from the board.

ITERATION 2

INSIGHTS FOR NEXT ITERATION:• Apparently, more durable physical buttons were demanded.

25

METHOD:The same methods from evaluation2 were applied with minor adjustments:• Intervention: The session began with an explanation to the parents on how the post box works so they can guide their children, but we didn't provide extra hint during play.• Wizard of Oz: The LEDS were lighten manually when postcards were put inside the postbox.

RESULTS:

2. Expectation at destination: Children expected to see the postcard from their own. There were few occasions where we showed them letters from someone else by mistake, they looked puzzled.

1. Letter sending behaviour: There were inconsistencies about whether to put the letter or to press the button first.

Another surprising finding was caused by a slip. After Marcus put his postcard in the postbox, the wizard did not blink the LEDs in time. Then he told his mother to wait for the system’s response instead of going to the destination directly.

Participants: one 3-year old boy (alias name Olof), and another 4-year old boy (al ias name Marcus). Both of them were accompanied with their mothers.

INSIGHTS FOR NEXT ITERATION:• The light feedback need to be better synchronized with user's behaviour.

INSIGHTS FOR NEXT ITERATION:• The tablet needs to be able to show multiple images at the same time and work more independently.

3. Creativity in content: The children showed amazing creativity on drawing the postcard. After they understood the concept of sending a postcard to somewhere, many meaningful postcards were created.

For example, Olof once wrote “Hej, Grisen! (Hi, pig!)” and sent it to the Pig House. Marcus d rew a f l ower and a l so a birthday cake with a message, “GRATTIS! (Congratulation!)”.

One of the children even drew a mouse and wrote “Till Pelle. (To Pelle, which is the cat in the story of Pelle Svanslös.)”.

26

PROTOTYPING v3.0:

ITERATION 3

Prototype 3.0 is designed based on the insights from previous tests, we are aiming at developing a more independent system without too much intervention from us:

• The buttons are now made by physical plastic material instead of clay.• Also, the buttons have their own assigned LEDs to give a more meaningful feedback. (example: red LED will light when the red button is pressed)• Cables enable the wizard to receive the input of which button is pressed.

• Frames for iPads are developed so we can leave the iPads inside the houses and watched them from a distance.

( Due to time constraint of the project and iteration of technical improvement, the third evaluation has not been completed.)

CONCLUSION We have come a long way from our close-to-naive observation of children to literally sending letters around for them in the playground.

During the whole design process, the initial goal of supporting open-ended play remains. But it is hard to say that our goal was fulfilled with our current design in a limited time period and with limited group of participants.

However, based on our evaluation results and insights metioned previously, in general, we can come to the conclusion that by providing the postbox platform, we can expect children to play in their own ways to create their own meaningfulness of play.

27

2828

Website Link

29

INTRODUCTIONI once worked as an UI designer intern in the startup "CTQuan”- an online platform helps startups f ind their investors.

As the only designer in our team, I was not only in charge of interface design but also responsible for interaction design. Through the open-style office, I can talk to the CEO directly. I can also see the working situation of all the coworkers as well. Since we were using extreme programming method, the website iterated every one or two weeks. Although it was quite stressful to follow the fast implement pace, I managed to keep the unnecessary rework at the minimum by communicate with programmer and project manager frequently and use user-centered design method.

However, I started everything from the Logo design. By choosing blue color theme and break angles instead of round ones, I succeeded in demonstrating the braveness, resoluteness and spirit of the entrepreneurs.

Business Card

Sketches

1. Triangle can create a stable and reliable sense;

2. The fashion paper folding effect is rich with childhood fun, whose clear folds give a taste of simplicity and resoluteness;

3. The Chinese name of “CT-Quan” has the implication of “circle”. Therefore, circular triangle is adopted.

DESIGN CONCEPT

LOGO DESIGN

UI DESIGN

The interface of this website has experienced quite a number of redesigns regarding to the changes of requirements. At very beginning, we wanted the welcome page be simple, just showing a big banner and login window. But after we got plenty of startups and investors joined into our platform we realized that the welcome page could be an advertising board to attract more and more companies come to our website. Besides, we show figures to convince people. The left picture shows how the welcome page finally looks like.

Since redesign is one important part of the design process circle. Take the welcoming page for example. Here is its evolution process.

30

The prototype kept updating along with the iterations of our website. Benefit from the open working environment, I could walk around and ask entrepreneurs in other startup teams to test our prototype and get feedbacks. And for investigating the requirements from users who are investors, since the CEO of our product is an investor, I’ve spent quite a lot of time talking with him and learning the basic process for investors to review business proposals and give comments. The website is keep getting better on both user experience and aesthetics looking. Even the system continually iterating, the soul and feeling of the product never change, it stays as clean, resolutely and trustworthy.

Prototype Tool: Axure

UX DESIGN

31

BACKGROUNDAs our campus is filled with plenty of events, including lectures, performance, competition and seminars, students sometimes miss the specific activitis they are intreseted in.

32

Based on the result of user requirement in pre-design phase, we focused on building whole model/frame as the first step. Zooming into this whole modle gradully, we came out with the integrated task flow, containing all probable nodes.

DESIGN PROCESS

In the next step, prototype design, I worked on one specific module cooperate with other team mebers. We made plenty modules one by one to inspect whether it works well in general and in specific situations.

The model graphic for Xiao Yuan Tong

The site map (tool: Mind manager)

The prototype design for website client-side (tool: Firework)

33

Then we move to the visual design phase. The look-and-feel of the whole product and effect of visual design on user experience are the main elements in this phase. Simple is the core notion for this design. We keep away from complex decoration to make this design a clear and useful one.

Interface design (tool: Photo shop)

In the mobile version design, we altered the interaction design to a large degree according to different user habits on different devices.

Prototype and task flow (tool: white board)

Visual design for mobile version (tool: Photoshop)

34

35

With our main designing direction confirmed, we began to search for relevant materials for tourism, and experience similar traveling websites. It was found the designing style of all traveling websites shared much in common, and most were unattractive. We thought that the interfacial design of the instructive website should be capable of arousing users’ desire to go on browsing. After selecting among numerous design plans, we happened to find a painting gallery in a kindergarten near our school. Children’s paintings were really impressive to me. Though naïve, they were quite interesting. Therefore, we decided to use children’s simple painting as the style of our website.

The theme of this project is about “low-carbon tour”, which is most talked about nowadays. Particularly, in Beijing with serious pollution, annually government devotes large amounts of spending to publicize low-carbon trip.

INTRODUCTION

36

Welcome page:When the users enter the website, a welcome page will be seen and the “earth” below keeps rotating. The website will start people on a global travel.

The interaction is very simple, even children can learn how to use it very quickly. The whole web page is like a horizontal scroll. Users can either drag or scroll the mouse or click on the left and right button on the keyboard to move forward. Alternatively, users can the navigation bar, with one click then the page will horizontally move to the corresponding location.

Main page:There are four parts in the website. There is a country standing for each part (As is shown in the picture, it is Australia.) There are several alternative transportations for each part (As is shown in the picture, it is of shipping transportation means.) When users select specific vehicle, the chosen one will roll to the center. At the same time, the CO2 calculator will display carbon emission of this vehicle. We hope the direct and visual experience can make users get awear of which transportation is more environment-friendly.

In order to make the page much more interesting, we add many animation effects, l i ke the wa te r- sp ray ing whales, dancing and singing birds, etc.

DESIGN

37

Tips:Each time entering a new part, there will be some tips shown automatically, giving a brief introduction of the transportation means. As is shown in the picture, it is instruction of bicycles and motors.

When users go backwards or forwards, tips will disappear automatically.

Album:When users c l ick on the bubble on symbolic buildings, there will be an album popping up. The main aim of this album is to make users have a better understanding of the specific city or country in practicing low-carbon tours.

Each album is designed like a postcard, which is related to the theme of tourism. All the pictures are the symbolic buildings or sightseeing of the specific country.

About us:This page introduces our design team. Its style is totally different from that of the main pages as it is designed rather for fun. We imitate the effect of the slot machine, which begins to rotate after users click on the handle bar.

38

The scr ipt language of the website is Action Script 3.0. The website’s main frame is designed through Flash Builder. For the smoothness experience of the website, we don’t separate each page by external load to skip to different pages. Instead, we adopt going forward to the “key frame” to enable the roll ing skipping of the pages. Therefore, we spend about 70% of our time in making the animation. For example: the bicycle and motorcycle make up the movie clip1, while bicycle is a movie clip, the wheel on bicycle is also a movie clip move frame by frame.

IMPLEMENT

39

40

Download Link

This was the first time I took part in game developing. The reason why we developed the game based on the platform of Windows Phone was that it is an emerging platform. This platform is characterized by quickness, simplicity and smoothness. So it is with our Gravgem. User can play it even by a single finger. Similar to Metro UI of WP, Gravgem encourages more sliding by finger rather than clicking.

INTRODUCTION

GAME RULES

1.To play the game, players can slide finger on four directions;

2.After the operation, the gravity direction of game is changed. Then, there will be corresponding change of the rolling direction. And all the gems will follow the direction and move. When the movement stops, more than two gems of the same color will be deleted. Thereafter, new gems can be moved. Therefore, the movement and deletion is repetitive and circulating.

3.There will also some barriers that cannot be deleted hampering the player’s game process. After all gems are deleted, the player will enter a new level. Otherwise, if there is one gem left which will not delete that means the fail. Points and appraisal will be given according to the player’s performance.

FUNCTION DESCRIPTION

41

UI DESIGN

The name of the game is the short for"Gravity Gem", so the design conception is mainly around the gem and the universe (because he mention of gravity makes people think of the boundless cosmos).

Overall, we design a boundless cosmos as the playing background for the players. As a puzzle game of different levels, each level means different challenges. At the Menu Page, the background brings a mystic feeling for the players. However, the game page is imitating landing on the surface of an unknown planet. The background designed likens to the surface of the moon. The secondary page acts as the transition between the main menu and the game page. The design of the background picture gives a taste of the big bang.

42

“Gravgem” now can be dowload from windows app store for both windows phone and PC version.

Download Link >

OUTCOME

NEW VERSION

After “Gravgem” released, we have received many feedbacks. Some people said their child very like this game, but the interface shuold be more lovely and the difficulty need to do some adjustments. So, we decide to make a new version of “Gravgem” named “Gravbub”(short for Gravity Bubble). The interfacial design attracts children for its increased fun. The brick wall will rotate while using the finger slide on screen. The new game is mainly intent for PC and Pad client-side. Currently, the game is still under development, and we just finished part of it.

Sketches

The main role of the new game is a swarm of cute space bubbles. They leave their own planet and start their wonderful journey to find new home on earth.Different from the "Gravgem", this game’s background will change with the progress of the game, and is also updated with the changing seasons.

The followings are UI design for winter version :

Home Page

Choose Level Page

All the bubbles have cute expressions and more animation effects are added.

Each background will use different colors and different themes. What they have in common is: They all have an lovely animal, maybe animal living in space.

43

44

45

EinStein würfelt nicht!

Home Page

Game Page

EinStein würfelt nicht! is the official game accompanying an German exhibition about Einstein in the Einstein Year 2005. It's a fast paced game for 2 players.(from wikipedia)

ABOUT THE GAME

DESIGN CONCEPT

Before we started designing this game, since the rules are very simple to learn, we targeted our user as children from 5-10 years old. Therefore, I chose to use hand drawing as the style of the interface and all elements were designed fulfill with fun of childhood, such as blackboard, sketch paper, in order to make it kid-appeal.Due to this game was named after the famous scientist EinStein, some elements shows feeling of science were also adopted.

We participated in the Conference of Marathon of Windows 8 Application and Development in Beijing, and have guidance by Microsoft Developer. Download Link

46

Fight the Landlord

Landlord and famer's image in old China.

Image of different house living by landlord and famer in feudal society in old China.

Game Page

Achievement Page

Fight the landlord is one of the most popular card games playe in China which based on the the history of Cultural Revolution in China.

This game has very strong connecting with Chinese folk cultures. So, when designing the interface, I made a briefly research on Chinese history during Cultural Revolution and collected lots of pictures from that time. For example, as shown in "Game Page" and "Achievement Page", there are two kinds of top-part design which are derived from the roof design of Chinese traditional architecture and thatched house respectively. In addition, many traditional textures were used on interface design.

47

INTRODUCTION

Fitting room is a dreamtime place for women, where each suit of dress is beautiful wealth. I believe that girls will try countless suits of dresses every morning after they wake up, and fancy that they are the most beautiful butterflies. However, which suit of dress on earth is what I want most? This is a very perceptual question. In my opinion, the best solution to it is to put all the sense organs into use, looking for beauties belonging to us with exquisite antenna peculiar to women.

Therefore, I try to design a concept fitting room. Women can find a favorite feeling through seeing (pictures), listening (to music), smelling (smell) in this space, with which the system then searches styles of dresses that fit this feeling.

48

WARDROBE DESIGN

I try to find a kind of material that can perfectly interpret the relation between wardrobes and women. Eventually, the design inspiration of this wardrobe comes from “silkworm” and “silk”.

Silkworm is the maker of silk. Woven reeling silk is the great invention of Chinese people. After studying the records of silkworms by the ancient Chinese, I found out that as early as when people believed in gods, silkworm god appeared as women’s image. The ancients thought that silkworms were the incarnation of women. As the cultivation of silkworms and the spinning of silk fabrics are always women’s job, thus, women’s love for silk has a long history.

In addition, “silk” is also a word highly with female temperament. The basic definitions of silk include: fine and tiny things like hair, fiber of lotus root and squareness; long thoughts or feelings like lingering affection and sad thoughts. Its existence seems insignificant, feeling slim and dimly, but it has tensile force and toughness that you cannot ignore. Just as the roles and powers of today’s women in the society. Therefore, I think silk is the best thing to make a kind of wardrobe designed for women to use.

Photographyer: myselfCamera: Canon 50DDate: Sep 29(th), 2012

49

Photographyer: myselfCamera: Canon 50DDate: Sep 29(th), 2012

50

The wardrobe is fashioned after the shape of silkworm cocoon, giving a light, soft, smooth and aesthetic feeling. Silk is among girls’ favorite clothing materials. Its appearance and texture are all quite good. Besides, it has good air permeability, suitable to be used as the wardrobe’s exterior material. When opening the wardrobe and getting the graceful dresses out of it, brings to people the feeling of the cocoon turning into the butterfly. That moment makes the female aware of that the chosen clothes are for her to turn into the “butterfly”, which will make her braver and much more confident.

51

FITTING-ROOM DESIGN

The design of the fitting room imitates the effect of silkworm cocoon hanging on the wall. There are no redundant decorations. All the pictures are created through the light projection. The color of the wall changes along with the music and illustration on the diplay wall. For example, the picture up is showing the theme of black-and-white, while down is the them of contrast version.

52

INTERACTION MODEL

Step One: perceptual search

Users will stand at the appointed region. Pictures of different styles will display through projectior. Music or voice effect of the similar art style will be displayed. Rooms of some styles (like spring, grassland, forest, etc.) will release smell of green grass or others. All in all, the fitting room will wake up all sensory organs of the users to search for a favorite feeling. Users can choose the style through the options on the floor. If they like a certain

option, they will enter to the next step; if not, more choices will be given.

Step Two: choose clothes

Based on the selection users make on the first step, the system will choose clothes of such styles that suitable for the users. Users can further choose among these clothes.

a. Here gives the information of the weather. While choosing clothes, the system should take into consideration the weather condition so as to make clothes selection easier for users.

b. Here gives the list of the clothes. Users can choose their desirable clothes through corresponding gestures. C will give more detailed information of the clothes.

c. Here is the display of the clothes. The left and right side of the main picture will recommend the accessories to match the clothes.

d. Here is the introduction of the clothes, such as the materials, styles, etc.

e. Here is a closer display of the clothes. Users can move or zoom in the picture of the clothes through certain gesture.

53