tianxiao yang's portfolio

7/30/2019 Tianxiao Yang's Portfolio

1/44

Portfolioof Tianxiao Yang (David)

CERTIFICATION:

I certify that the work included in thisportfolio is my own original work.

Work included which was conductedas part of a team or other group is

indicated and attributed as such theother team members are named and

a true description of my role in theproject is included. Signature:

.


2/44

HELLO!Welcome to Tianxiao Yang (David)s portfolio.Email:[email protected] Phone:+86 13810737158


4/44

Interactive Design

E-recycling


5/44

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


6/44

KnowMore

AboutElectronicRecycling

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

* As the team leader, Iorganized and participatedin the entire processes of thisproject, including conceptdevelopment, data collection

and analysis, visual design, andcomputer coding.

Description

This is an interactive website that helps

people to learn more about electronic

recycling. It was the nal project I made

for the course:interactivetechnictomultimedia.

The intent of this nal 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 ofelectronic devices, we initially focused on

some new gadgets, such as the emerging

IPHONE 4 in particular at that time.

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.

Background

Fast upgrading of technology, falling

prices, and shortened product lifecycle

have led to fast growing of electronic

waste around the world: about 50 milliontons 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 electricaldevices 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.


7/44

How we do it?

Phase I - Infomation organization

After collecting some information, we rst classied 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:

Phase II - Visualization

PrototyPe

In order to make theinformation 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.

Hg

Pb

Cr

Hazardous materials Damage to human

Measures

Index

The situation

The measure

Damage to earthWe try to use the image to convey the information and try to

use interaction language, such as an interactive game.

Visualdiesign

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.

Wood texture

FONT: HELVETICA

Content -

Regular 8pt

TOPIC -BOLD 10pt

Typographic rule Green gradient# b5bc27# 9ba61d

Yellow# f3efb6

Yellow(with texture)


8/44

Interactive page

The damagefromthe electronic wastetonature.

Information page

The disease thatthe electronic wastemay causetopeople.

Information page

The ratioofthe recycledelectronic wastein last 5 years.

Information page

The measurecan be adopted

bydifferent roles.

Game page

A small gamecultivatesthe habbitofelectronic recycling.

Index page

HERE

IS

THEFINAL

WORK:


9/44

Sept 1: Click

Drag the scroll button to interactive

Image makes it easier to understand

Sept 2: Drag

Misson complete !


10/44

Interactive Design

Font selector


11/44

A tool that helps designers to nd the right font.


12/44

Font selectorA tool that helps designers to nd the right font.

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

* I participated in every parts ofthe project, including: problemanalysis, wireframe creation,and visual design.

Uninstalled - You may not

have the set of suitable fonts

installed in your own font list.

Unorganized - The font

lists are poorly organized (in

alphabetical order) so that the

only way to nd your desirable

font is to know its name.

Unreadable - The fonts in

the font list are too small toexamine. 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.

CloUddatabaseCreate 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.

organizedCategory

Introduce different categories: style, year, company, and viewing

history, to facilitate the search of fonts.

Cleardisplay

Provide a clear view of fonts in shape and color. Enable exible

choice of letters for displaying the font.

easiertoUse

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

interactive experience.

noinstalled

disordered & indistinCt

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

The solution:To achieve the goal - create a tool that can help designers to nd

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.

T

CLEARDISPALY

sans serifserif


13/44

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 nd the right font easily and quickly.

comParison -Help users to compare their selected fonts clearly.

selectionPart

Main catagory hierarchy Second catagory hierarchy Fonts hierarchy Details hierarchy

This page lists all properties of

fonts. Users can rst 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.

When the user chooses one

category in the previous

hierarchical level, that category

will be expanded, while others

will be sent to the backgroundwith minimum display.

In this hierarchy level, users

can choose one sub-category

under main category.

After the user chooses

one sub-category from the

previous hierarchical level, it

will be further expanded to

display all of the fonts withinthat sub-category.

In this step, user can change

the letters for displaying the

font.

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.


14/44

comParisonPart interaction

Comparison list Details of 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.

When the user selects a

font, the tool will expands

information of that particular

font with more details. This issame as in selection part.

slide

pinch

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.

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.


15/44

UI design:

Orange# df483d

Gray# ebebeb

Dark gray# 464646

Black# 000000

colors:

Less color makes the users concentrate on the content.

sPacing:

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

the content.

1.5cm A height that can be t for the font dispalyed clearly.

Clear display is the most

important rule for

the UI design.


16/44

Interactive Design

Health Balance


17/44

A moblie application helps people to keep a balanced diet.


18/44

Health

BalanceCategory: Interaction Design

Duration: Jun 2011 - Jul 2011Other Team Members:Lei Zhao, TianYu Ye, Yingjie Chen, Yiyi Yin.

* In this project, I try to provide guidance onthe idea of maintaining a balanced diet - atraditional concept inherited from Chinesemedicine. After establishing this core concept,I participated in conducting the user researchand sketching the frameworks.

A moblie application helps people tokeep a balanced diet.

Research

After deciding to design a mobile app to help people to keep

healthy diet, we rst created an online survey to nd out what

kind of health problems are the primary concern to our target

population (Chinese with age between 20 and 40).

Q: Do you care about yourhealth situation?

Q: Do you care about yourdiet?

Q: Do you have an exerciseplan and stick to it?

Q: What do you think is themost important factor tomaintain healthy life?

Q: Why some people do notcare about their diets?

Q: Why some people donthave an exercise plan or fail tostick to the plan?

Yes

Yes

Yes

Keep balance

Too complicate

No need

Diet

Dont have to

Lack of urgence

No

No

No

Sport

Only care aboutteast

Too boring

Sleep


19/44

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:

thequsetion

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?

Personais 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.

PersonBis an ofce 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.

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:

FocusonBalance routinemonitoring

Competitive

1, Contain evaluation and advices

2, Clear information record3, 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 information3, Able to share

1, Not fulled to individual

2, No consumption information.

Healthy Calorie Royal Cookbook


20/44

Persona

Person1 - missWang

Person2 - mr. qiu

Scenarios

Age

Phone

Job

Transportation

Sport time

Problem

Weakness

Goals

Age

Phone

Job

Transportation

Sport time

Problem

Weakness

Goals

22

iPhone4

Student

On foot

2 hours / week

Gain weight

Lack of persistence

Lose weight

27

HTC G6

Programmer

By bike

0 hours / week

Declining health

Reluctant to do exercise

Keep a good sport habit

1

1

2

2

3

3

4

Miss Wang is having lunch at school.

Mr Qiu commutes on bike every day.

The app will automatically search the

database to nd out the information of

the food.

The energy consumed will be recorded to

energy balance bar in the app.

The energy will be added to the energy

balance bar in the app.

Take a pic or scan the information chart

of the food before eating.

The app will automatically detect the

distance and time he commuted by LSB.


21/44

Wireframe

Here are some of the wireframes.

It mainly divideded into two

parts: intake and expenditure.

Interface design

intakePart

intakePart

exPenditurePartmenu- Balance

menu- Balance

exPenditurePart


22/44

Integrated Strategy Design

Meta U


23/44

An integrated design for MetaDesign Inc. campus recruitment event.


24/44

MetaDesignRecruitment

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

* Led a team in conducting research, strategicplanning and design for Recruitment Event.Presented the nal solution to the seniormanagement at MetaDesign Inc.

thescenario:MetaDesign was launching a series of campus

recruitment events at different universities in China. The

recruitment aimed to nd talented junior designers and offered

them internship and trainings.

thetaskathand:Create advertisements in either print or

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.

Background

thecomPany: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.

theoFFice:MetaDesign at Beijing offers professional

environment, exciting opportunities, cross-disciplinary teamwork,

renowned clients, and an incentive corporate culture that

recognizes the importance of work-life balance.


25/44

Strategythegoal: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.

thequsetions: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 efciency?

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?

Talentedstudents:

- 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?


26/44

theresearch:

40 - The whole students

7 - Heard of it before

2 - Knowing about

what Metadesign doing

15 - Lecture or workshop

7 - Interview

3 - GPA

Metadeisgn

Relevant campus

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?

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.

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

ENHANCE AWARENESS GIVE WORKSHOP

GIVE WORKSHOP IN UNVIERSITIES AREA

TAKE ADVANTAGEOF GEGEOGRAPHY

theBrand:

We need to establish a clear brand for the campus recruitment event! There are so many similar recruitment eventsin 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.


27/44

DesignWhen 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.

target-Focus

Finger-Independent

target-Letter U

Logo:

Logo

VI design

Poster design

Flypaper

Environment media

Social network

App


28/44

1

4

6

2

5

7

3

8

Visual identity:

1. size: Details are adjustable in

different sizes for different usages.

2. ProtectiVezone:Emphasize the

value of the logo.

3. suBBrand:It should appear

with the same look and color at all

recruitment activities, and on all related

subjects or products.

4. enVeloP

5. idcard:For students who attend

the training. The QR number on its back

links their online information with ofine

identity (o2o).

6. coPyright

7. texture

8. attendance


29/44

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 eld 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.


30/44

Flyer

As yers distributed on the street are often ignored or threw away, our

strategy is to incorporate some unique design into our yer to capture

students attention and to make them keep it.

BeVisuallyattractiVe: 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 yer.

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

yer, we made a calendar on back of it. This also increased the possibility

that they would keep our yers for a longer period of time and hence to

develop a deeper impression to the MetaDesign company.

Environment Media

stickeroneleVatorButton: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 inuence in the university.

choPstickscoVer: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.


31/44

Social network

We planned to establish our social network to

broadcast our recruitment news and to enhance

the events inuence. We chose the local SNS,

Weibo, and Renren (the Chinese twitter and

Facebook), because each platform has millions of

active students users.

recruitmentPages lecturePages

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 anotice to the user one day before the lecture.


32/44

Others

Graphic design


33/44

Product brochure & christmas card design for Audi.


34/44

Graphic DesignProduct Brochure

&Christmas Card

for

Category: Graphic designDuration: Nov 2011 - Dec 2011

* I had been working at theinformation technology center of

Audi China as an intern, where I hadparticipated 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 theworks I design individually during my internship.


35/44

A brochure that demonstratesfeatures of Audis new generationvehicle entertaining system.

Three different kinds of Christmas card.


36/44

Others

Ad. creativity


37/44

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


38/44

Advertising

Creativity& Design. How to work

yourself off?

The intent of thisadvertisement

is to encouragepeople to enjoy the

sports rather thanto stay in ofce or

classroom...


39/44

I dont care

The complicate theory and explanationare on the wrinkle paper and the sealon it means it is been ignored by theNIKE spirit: - JUST DO IT

The spirited guy

This is a simple advertising for Nescafe that I completed for ahomework project at the Photoshop workshop.


40/44

Others

3D & Games


41/44

A 3D modeling car and a game scene design.


42/44

3D Modling

I nished this 3D carmodeling project withina few weeks by myself.Honestly, this was my rsttime using 3DMAX, soI followed some onlineinstruction on how to makeit the rst time. However,I found out that I couldcomplete it by myself afterI became familiar withsome basic methods of 3Dmodeling.

This experience not onlytaught me new skills,but also enhanced myunderstanding of volume,lighting, and texture.


43/44

Game Design

This was a simple 3D gamedesign built by the gameengine - Unity. The user

can control an object (Itried to use the 3D carbefore, however the effectwas not very good.) topass through the movingobstacles.

This was my rstexperience of designinga game. It deepened myunderstanding of time,velocity, and sensitivity ofinteraction.


44/44

The End.

tianxiao yang's portfolio

Documents