Embed Size (px)
DESCRIPTION
Download it for a better reading experience! It is worth the wait!
Citation preview
Portfolioof David Young | 杨天笑
CONTENTSInteractive Design
E-Recycling | Fonts Selector | Health Balance
Integrated Design Strategy| Meta U |
OthersGraphic Design | Advertising Creativity | 3D & Game
Interactive Design
E-Recycling
An interactive website helps people be aware of E-recycling.
KnowMoreAboutElectronicRecyclingCategory: Interactive DesignDuration: Jun 2011Other Team Members:Tianyu Ye, Tongyan Tang, Yuyang Liu.
* 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.
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.
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.
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 today’s 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 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.
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:
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.
Hg
PbCr
Hazardous materials Damage to human
Measures
Index
The situation
The measure
Damage to earth We try to use the image to convey the information and try to use interaction language, such as an interactive game.
Visual diesign
It didn’t 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: HELVETICAContent - Regular 8pt
TOPIC - BOLD 10pt
Typographic rule Green gradient# b5bc27# 9ba61d
Yellow# f3efb6
Yellow(with texture)
Interactive pageThe damage from the electronic waste to nature.
Information pageThe disease thatthe electronic waste may causetopeople.
Information pageThe ratioof the recycled electronic waste in last 5 years.
Information pageThe measurecan be adoptedby different roles.
Game pageA small gamecultivatesthe habbitofelectronic recycling.
Index page
HEREISTHE FINALWORK:
Sept 1: Click
Drag the scroll button to interactive
Image makes it easier to understand
Sept 2: Drag
Misson complete !
Interactive Design
Font Selector
A tool that helps designers to find the right font.
Font selector A tool that helps designers to find the right font.
Category: Interactive DesignDuration: Jul 2012 - Sept 2012Other Team Members: Tianyu Ye
* I participated in every parts of the project, including: problem analysis, 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 find your desirable font is to know its name.
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”.
CloUd databaseCreate 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 CategoryIntroduce different categories: style, year, company, and viewing history, to facilitate the search of fonts.
Clear displayProvide a clear view of fonts in shape and color. Enable flexible choice of letters for displaying the font.
easier to UseImplement dynamic control (e.g. voice, touch, gesture) for a more interactive experience.
no installed
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 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.
T
CLEARDISPALY
sans serifserif
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 Second catagory hierarchy Fonts hierarchy Details 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.
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.
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.
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
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 user’s 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 is same as in selection part.
slide
pinch
Slide to change background colorSince 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 trackingThe tracking space is a frequently changed property for font’s 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:
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 fit for the font dispalyed clearly.
“Clear display” is the most important rule for the UI design.
Interactive Design
Health Balance
A moblie application helps people to keep a balanced diet.
HealthBalance Category: Interaction Design
Duration: Jun 2011 - Jul 2011Other Team Members: Lei Zhao, Yetian Yu, 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.
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).
Q: Do you care about your health situation?
Q: Do you care about your diet?
Q: Do you have an exercise plan and stick to it?
Q: What do you think is the most important factor to maintain healthy life?
Q: Why some people do not care about their diets?
Q: Why some people don’t have an exercise plan or fail to stick to the plan?
Yes
Yes
YesKeep balance
Too complicate
No need
Diet
Don’t have to
Lack of urgence
No
No
NoSport
Only care about teast
Too boring
Sleep
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:
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?
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.
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.
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:
Focus on Balance routine monitoring
Competitive
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
1, Not fulfiled to individual
2, No consumption information.
Healthy Calorie Royal Cookbook
Persona
Person1 - miss Wang
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 find 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.
Wireframe
Here are some of the wireframes.It mainly divideded into two parts: intake and expenditure.
Interface design
intake Part
intake Part
exPenditure Partmenu - Balance
menu - Balance
exPenditure Part
Integrated Strategy Design
Meta U
An integrated design for MetaDesign Inc. campus recruitment event.
MetaDesign Recruitment Event.Category: Integrated Strategy Design Duration: Mar 2012 - May 2012Other 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.
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 task at hand: 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
the comPany: MetaDesign is a world’s 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 oFFice: 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.
Strategythe 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?
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?
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?
the research:
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
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.
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:
LogoVI designPoster designFlypaperEnvironment mediaSocial network App
1
4
6
2
5
7
3
8
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
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 event’s influence. We chose the local SNS, Weibo, and Renren (the Chinese twitter and Facebook), because each platform has millions of active students users.
recruitment Pages lecture Pages
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.
Others
Graphic Design
Product brochure & christmas card design for Audi.
Graphic DesignProduct Brochure&Christmas Card for
Category: Graphic designDuration: 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.
A brochure that demonstrates features of Audi’s new generation vehicle entertaining system.
Three different kinds of Christmas card.
Others
Ad. Creativity
Some interesting ideas. Don’t 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...
I don’t 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
The spirited guy
This is a simple advertising for Nescafe that I completed for a homework project at the Photoshop workshop.
Others
3D & Games
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 3DS MAX, 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.
