CERTIFICATION:

I certify that the work included in this portfolio is my own original work. Work included which was conducted as part of a team or other group is indicated and attributed as such the other team members are named and a true description of my role in the project is included. Signature:

Portfolio

of Tianxiao Yang (David)

HELLO!
Welcome to Tianxiao Yang (David)s portfolio.
Phone: +86 13810737158 Email: tianxiaoyang123@gmail.com

CONTENTS
E-recycling | Fonts Selector | Health Balance

Interactive Design

Integrated Design Strategy

| Meta U |

Graphic Design | Advertising Creativity | 3D & Game

Others

E-recycling

Interactive Design

An interactive website helps people be aware of E-recycling.

Know More About Electronic Recycling

Category: Interactive Design Duration: Jun 2011 Other Team Members:
Tianyu Ye, Tongyan Tang, Yuyang Liu.

Description
This is an interactive website that helps people to learn more about electronic recycling. It was the final project I made for the course: interactive technic to
multimedia.

Background
Fast upgrading of technology, falling prices, and shortened product lifecycle have led to fast growing of electronic waste around the world: about 50 million tons of E-waste produced each year. Many developed countries export these E-wastes to developing countries, which become a huge threat to environment and human lives there. Yet, most of those abandoned electrical devices contain some valuable parts and materials. Hence, the correct approach to solve the electronic waste problem is to recycle them in appropriate manner. It becomes urgent to teach people knowledge and skills about recycling.

The intent of this final project was to apply the interaction design principles and ActionScript 3.0 to build an interactive website for a chosen subject. As all group members are big fans of electronic devices, we initially focused on some new gadgets, such as the emerging IPHONE 4 in particular at that time.

* As the team leader, I organized and participated in the entire processes of this project, including concept development, data collection and analysis, visual design, and computer coding.

However, when we did more research on the product life cycle of these electronic devices, a new topic came to our mind. We became curious about where the old devices eventually go when a new generation comes out. After some quick research, we realized that this became a more meaningful topic and have a great sense of urgency as part of todays environmental crisis.

How we do it?
Phase I - Infomation organization
After collecting some information, we first classified and organized them in order to convey the idea accurately. Our goal was to let people be aware of two things: the hazard of the electronic waste and the measure to deal with it. So we divided all the information into two categories: the situation and the measure. The information structure is given below:
Hg Pb

Phase II - Visualization PrototyPe

In order to make the information be more focused, we arranged the two parts of information vertically: the entire contents are organized on a long sheet and divided into portions, and people can view one port at a time as they navigate through the website. We try to use the image to convey the information and try to use interaction language, such as an interactive game.

Cr

Hazardous materials

Damage to human

Damage to earth

The situation

Visual diesign

Index
The measure

It didnt take us long time in creating a green design that contains a strong sense of ecology. In addition, we designed elements in simple styles, which helped us to meet the tight timeline and saved us plenty of time in coding in production.
FONT: HELVETICA Content Regular 8pt

TOPIC BOLD 10pt

Measures

Typographic rule

Green gradient Yellow

# b5bc27 # 9ba61d

# f3efb6

Yellow

(with texture)

Wood texture

HERE IS THE FINAL WORK :

Interactive page
The damage from the electronic waste to nature. The disease that the electronic waste may cause to people.

Information page

Information page
The ratio of the recycled electronic waste in last 5 years.

Index page

Information page
The measure can be adopted by different roles.

Game page
A small game cultivates the habbit of electronic recycling.

Sept 1: Click Drag the scroll button to interactive

Sept 2: Drag

Image makes it easier to understand

Misson complete !

Font selector

Interactive Design

A tool that helps designers to find the right font.

Font selector
The problem:
Uninstalled
- You may not have the set of suitable fonts installed in your own font list.

A tool that helps designers to find the right font.

Category: Interactive Design Duration: Jul 2012 - Sept 2012 Other Team Members: Tianyu Ye

* I participated in every parts of the project, including: problem analysis, wireframe creation, and visual design.

The process of selecting a desirable font is a painful experience:

no installed

To achieve the goal - create a tool that can help designers to find the desirable font more easily and quickly, the previous problems we mentioned should be resolved, and some new forms of interaction should be create to simply the font selection process.

The solution:

Unorganized - The font

lists are poorly organized (in alphabetical order) so that the only way to find your desirable font is to know its name.

T
serif sans serif

CloUd database

Create a centralized database that contains thousands of fonts for users to choose from. The problem of a certain font type not installed on a local computer will never happen.

organized Category

Introduce different categories: style, year, company, and viewing history, to facilitate the search of fonts.

Unreadable - The fonts in

the font list are too small to examine. Even if you can, in most softwares, the font is not going to be displayed at your desired letters, but only at the default word SAMPLE.

DISPALY

CLEAR Provide a clear view of fonts in shape and color. Enable flexible
choice of letters for displaying the font.

Clear display

easier to Use disordered

&

indistinCt

Implement dynamic control (e.g. voice, touch, gesture) for a more interactive experience.

Wireframes:

Basing on the priceples, we drew the sketches and the wireframes.

The structure is divided into two parts: selection & comParison.

selection - Help users to find the right font easily and quickly. comParison - Help users to compare their selected fonts clearly. selection Part

Main catagory hierarchy This page lists all properties of fonts. Users can first select one main category based on their targets into the next level. Items in the category are listed vertically so that the user may jump to a different category at any hierarchical level whenever they want.

Second catagory hierarchy When the user chooses one category in the previous hierarchical level, that category will be expanded, while others will be sent to the background with minimum display. In this hierarchy level, users can choose one sub-category under main category.

Fonts hierarchy After the user chooses one sub-category from the previous hierarchical level, it will be further expanded to display all of the fonts within that sub-category. In this step, user can change the letters for displaying the font.

Details hierarchy After the user selects one font from the previous hierarchy, details of that font will be shown. It will provide a link for the user to buy or to share the font. And the user can also add the font to their favorite list.

comParison Part

interaction

slide

Slide to change background color

Since the tool is designed for smartphone and tablet, touch and gesture are good ways to add interaction. The tool offers the way to switch between three commonly-used colors by gestures for displaying fonts, which helps users to gain more comprehensive understanding of the fonts.

Comparison list After adding the fonts into the comparison list, the users can compare the fonts as it is shown above. In this view, nothing but only the selected fonts are displayed, because the users focus in this step is to compare rather than to search.

Details of comparison list When the user selects a font, the tool will expands information of that particular font with more details. This is same as in selection part.

pinch

Pinch to change tracking

The tracking space is a frequently changed property for fonts display. Using the pinch gesture implemented by the tool, the user can easily and intuitively adjust the tracking space to the right level.

UI design:
colors:
Less color makes the users concentrate on the content. Orange
# df483d

# ebebeb

Gray

Dark gray
# 464646

# 000000

Black

sPacing:
1.5cm A height that can be fit for the font dispalyed clearly.

Clear display is the most important rule for the UI design.

0.9cm The optimal and minimun width for click. Save more room for the content.

Health Balance

Interactive Design

A moblie application helps people to keep a balanced diet.

Health Balance
A moblie application helps people to keep a balanced diet.
Research
After deciding to design a mobile app to help people to keep healthy diet, we first created an online survey to find out what kind of health problems are the primary concern to our target population (Chinese with age between 20 and 40).
Keep balance Yes No Q: Do you care about your health situation? Sport Diet Sleep Q: What do you think is the most important factor to maintain healthy life?

Category: Interaction Design Duration: Jun 2011 - Jul 2011 Other Team Members:

Lei Zhao, TianYu Ye, Yingjie Chen, Yiyi Yin.

* In this project, I try to provide guidance on the idea of maintaining a balanced diet - a traditional concept inherited from Chinese medicine. After establishing this core concept, I participated in conducting the user research and sketching the frameworks.

Too complicate Yes No Q: Do you care about your diet? Only care about teast Dont have to Q: Why some people do not care about their diets? No need Yes No Q: Do you have an exercise plan and stick to it? Too boring Lack of urgence Q: Why some people dont have an exercise plan or fail to stick to the plan?

Interview
We selected dozens of people for our interview. We asked them questions by telephone or by email. Here are two people from our interview that represent two typical situations:

Features
After analyzing the data collected from the online survey and interview, we conclude that the most important factor of keeping healthy is keeping balance between energy intake and consumption; and this process should be routinely monitored. So we decide to design an app to have two functions:

the qusetion

1 - Why do you think keep balanced diet, sport and sleep is the most important factor to maintain healthy? 2 - What is your plan to keep your body healthy? 3 - Do you need someone to motivate you to stay on top of your plan?

Focus on Balance

routine monitoring

Person a is a university student who is living on campus. He

thinks that controlling his diet is the most important thing for him to keep healthy, because as a student he has sport class every week and he spends at least 40 minutes walking to school from his dorm. So he is not worried about lacking exercises. He is a little bit overweight, so he really cares about his intake. I always spend a lot of time deciding which kind of food is healthy for me. I really hope someone can give me some suggestions about that. He said in the interview.

Competitive
Healthy Calorie Royal Cookbook

1, Contain evaluation and advices 2, Clear information record 3, Both input and outlay 1, Lack of food information 2, Bad use experience 3, Can not share

1, Contain the feature of foods 2, Elaborate information 3, Able to share

Person B is an office lady. She cares a lot about her health,

and she thinks keeping balance between intake and calorie consumption is important. However, the work pressure always prevents her from staying on her exercise plan. I need to be urged. She mentioned in the interview.

1, Not fulfiled to individual 2, No consumption information.

Persona
Person1 - miss Wang
Age Phone Job
Transportation

Scenarios
22 iPhone4 Student On foot 2 hours / week Gain weight Lack of persistence Lose weight

1 2 3 4

Miss Wang is having lunch at school.

Take a pic or scan the information chart of the food before eating. The app will automatically search the database to find out the information of the food. The energy will be added to the energy balance bar in the app.

Sport time Problem Weakness Goals

Person2 - mr. qiu

Age Phone Job
Transportation

27 HTC G6 Programmer By bike 0 hours / week Declining health Reluctant to do exercise Keep a good sport habit

1 2 3

Mr Qiu commutes on bike every day.

Sport time Problem Weakness Goals

The app will automatically detect the distance and time he commuted by LSB. The energy consumed will be recorded to energy balance bar in the app.

Wireframe
Here are some of the wireframes. It mainly divideded into two parts: intake and expenditure.

Interface design
exPenditure Part intake Part

menu - Balance

exPenditure Part

intake Part

menu - Balance

Meta U

Integrated Strategy Design

An integrated design for MetaDesign Inc. campus recruitment event.

MetaDesign Recruitment Event.

Category: Integrated Strategy Design Duration: Mar 2012 - May 2012 Other Team Members:
Lei Zhao, Mian Wang, Wanjun Chu, Yingjie Chen.

* Led a team in conducting research, strategic planning and design for Recruitment Event. Presented the final solution to the senior management at MetaDesign Inc.

Background
the comPany: MetaDesign is a worlds leading agency in brand
design. It helps companies to promote their public perceptions by designing their brands and communicating the identity of companies and their products to customers in print or digital format.

the scenario: MetaDesign was launching a series of campus

recruitment events at different universities in China. The recruitment aimed to find talented junior designers and offered them internship and trainings.

the oFFice: MetaDesign at Beijing offers professional

the task at hand: Create advertisements in either print or

environment, exciting opportunities, cross-disciplinary teamwork, renowned clients, and an incentive corporate culture that recognizes the importance of work-life balance.

digital format to promote the campus recruitment event. The entire project included the design of colors, shapes, typography, images, and testimony and the production of real materials with headline and body contents.

Strategy

the goal: We spent a lot of time in clarifying the ultimate goal for the campus recruitment events in campus. Recruitment is just a method, but the goal, according to our communication with MetaDesign, is

To discover talented students at targeted campus.

the qusetions: If the answer to any one of the questions below is negative or unsure, it will be impossible for us to establish a good strategy for MetaDesign to achieve its recruitment goal.

To discover:
- Is the company well-known? - Have Chinese people been familiar with the concept of brand consulting ? - Can the hiring information be conveyed efficiency?

Talented students:
- Who are the people that the company is looking for? - What is the effective way to evaluate their capability, GPA, interview or other methods? - How does the company know whether he/she is suitable for the job or not?

Targeted campuses:
- Should the company launch its recruitment events at all universities in China or just at some targeted schools? - What is the difference between campus recruitment and professional job fair?

the research: To discover: In this section, we took 40

students as our sampling group and design a series of the questionnaires. Q: Do you familiar with Metadesign?
40 - The whole students 7 - Heard of it before 2 - Knowing about what Metadesign doing

Talented student: We found 17

teachers as our sampling group and designed a series of the questionnaires. Q: Best way to select the good students.
15 - Lecture or workshop 7 - Interview 3 - GPA

Targeted campus: We searched on

the internet and found the all the campus which have relevant major. Q: The relevant campus in Beijing.
Map of Beijing Metadeisgn Relevant campus

ENHANCE AWARENESS

GIVE WORKSHOP

TAKE ADVANTAGE OF GEGEOGRAPHY

GIVE WORKSHOP IN UNVIERSITIES AREA

the Brand: We need to establish a clear brand for the campus recruitment event! There are so many similar recruitment events in the university. The question is on how to attract more students to attend the one given by MetaDesign. Because MetaDesign itself is a brand consulting & design company, the project should take advantage of this. We decided to give the recruitment event a new name MetaU, which means MetaDesign + You or University. Besides a new name, we also realized that some marketing efforts were necessary to promote this new name into a well-known brand that is linked to MetaDesign Company.

Design
Logo:

Logo

When our team began to design marketing materials, each member is responsible for a particular task. However, one of our principles is to design the entire strategy as a whole, therefore before the design process actually started, I established a VI guideline, which provided the standards for the shape of the logo, color, and some other basic elements.

VI design Poster design Flypaper Environment media Social network App

target - Focus

Finger - Independent

target - Letter U

Visual identity:
1. size: Details are adjustable in
different sizes for different usages.

2. ProtectiVe zone: Emphasize the

value of the logo.

3. suB Brand: It should appear

with the same look and color at all recruitment activities, and on all related subjects or products.

4. enVeloP 5. id card: For students who attend

the training. The QR number on its back links their online information with offline identity (o2o).

6. coPyright 7. texture 8. attendance

1 4 6 2 5 8 7 3

Poster design
As a major media type at campus, poster plays a vital role in all kinds of event promotion. Considering that MetaDesign is not very famous in many universities, our main task is to attract as many students major in the field of strategy, design or communication as possible, and to let them join our presentation to gain more information regarding MetaDesign and its integrated design works.

Flyer
As flyers distributed on the street are often ignored or threw away, our strategy is to incorporate some unique design into our flyer to capture students attention and to make them keep it.

Be Visually attractiVe: According to some studies of psychology,

human face is the most attractive picture among all kinds of images. So we decided to use a portrait on our flyer.

Be useFul: To add one more reason for our potential clients to keep the

flyer, we made a calendar on back of it. This also increased the possibility that they would keep our flyers for a longer period of time and hence to develop a deeper impression to the MetaDesign company.

Environment Media
sticker on eleVator Button: When the recruitment began in
universities, the specially designed sticker on elevated button will give directions to the employees. At the same time, it will help to enhance the recruitment influence in the university.

choPsticks coVer: Cafeteria is the place where students are

gathered most of the time and the chopsticks are what every student uses each day. So we intentionally used chopsticks as one of the environment media for our marketing effort.

Social network
We planned to establish our social network to broadcast our recruitment news and to enhance the events influence. We chose the local SNS, Weibo, and Renren (the Chinese twitter and Facebook), because each platform has millions of active students users.

App
It contains two parts: recruitment & lecture

recruitment: In this part, students can obtain

recruitment information. They can also share or mark the information using the button on the top.

lecture: It is designed to make students more easily

to acquire the lecture information. By clicking the button, the system will automatically add a reminder, which will send a notice to the user one day before the lecture.

recruitment Pages

lecture Pages

Graphic design

Others

Product brochure & christmas card design for Audi.

Graphic Design
Product Brochure & Christmas Card for
Category: Graphic design Duration: Nov 2011 - Dec 2011 * I had been working at the information technology center of Audi China as an intern, where I had participated in the HCI project for designing the Audi product brochures. Besides that, I had also worked on a couple of graphic design projects. Below are some of the works I design individually during my internship.

Three different kinds of Christmas card.

A brochure that demonstrates features of Audis new generation vehicle entertaining system.

Ad. creativity

Others

Some interesting ideas. Dont be serious, just for fun : )

Advertising Creativity & Design.

How to work yourself off? The intent of this advertisement is to encourage people to enjoy the sports rather than to stay in office or classroom...

The spirited guy This is a simple advertising for Nescafe that I completed for a homework project at the Photoshop workshop.

I dont care The complicate theory and explanation are on the wrinkle paper and the seal on it means it is been ignored by the NIKE spirit: - JUST DO IT

3D & Games

Others

A 3D modeling car and a game scene design.

3D Modling
I finished this 3D car modeling project within a few weeks by myself. Honestly, this was my first time using 3DMAX, so I followed some online instruction on how to make it the first time. However, I found out that I could complete it by myself after I became familiar with some basic methods of 3D modeling. This experience not only taught me new skills, but also enhanced my understanding of volume, lighting, and texture.

Game Design
This was a simple 3D game design built by the game engine - Unity. The user can control an object (I tried to use the 3D car before, however the effect was not very good.) to pass through the moving obstacles. This was my first experience of designing a game. It deepened my understanding of time, velocity, and sensitivity of interaction.

The End.