Fen g Zhi chao
1. Design Projects Haier Innovative Network TV Haier Cloud TV Haier AC Remote Controller App Haier RF Operating System Haier World Graphic Standard Haier TV Apps EV Charger Sneaker Design Online Portfolio: http://www.coroflot.com/fengzhichao Relevant Videos
Child Tablet Video Player UI Design Cover Design
https://vimeo.com/user15452292/videos PDF download:
2. Basic Training
http://sdrv.ms/V5KnDe 3. Curriculum Vitae
Haier Innovative Network TV Based on an intuitive and user-friendly 3D interface allowing the multiplication of users' navigation possibilities, these televisions allow straight forward access to several different items at the same time as well as live interaction.
IF COMMUNICATION GOLD AWARD
How to overturn the traditional television user experience ?
MY TV function
With the MY TV function, there is total connectivity and interactivity between the Inter net, television, home electronics and appliance. Thus it is possible to operate and check the functionality of all compatible electrical appliances, turning the TV into the centerpiece of the household.
The front of the TV remote controller
A major innovation: the double-sided remote control design! This allows for more intuitive navigation. One side of the remote controller allows access to the key TV functions. The other side has an intuitive keypad for easy access to different available content and allows you to communicate instantly with your friends thanks to a multi-touch OLED screen.
The back of the TV remote controller
Haier Cloud TV 2012 NEW REVOLUTION
Haier Cloud TV is based on Android operating system. With the cloud computing technology, users can get music, videos, photos and news as soon as possible.
Haier Cloud Media Center includes online TV, weather report, Andriod TV apps, search and Haier Cloud Life. Service. Users can easily switch between the various functions.
I took part in the whole design process.
vimeo.com/user15452292/videos
Haier Cloud Media Center
Design Process The design process for new TV takes 5 steps: research, synthesis, concept design, foundational design as well as detailed design. I have been trained in the whole design process before joining the project. As far as I know, the simple process cannot only complete design works perfectly but also create some fantastic ideas which you have never thought before.
1
2
3
4
5
1.Research What's the problems of traditional television ?
Researches we did are not just about users, but also included comparative analysis, competitive analysis as well as trendscrape, which try to find out the problems of currently smart TVs and position Haier own market opportunities.
Too many buttons
TV external devices with different controllers
Complex interaction level
Hard to find what you want
Our user interview concentrated on the new
User interviews also showed that more and
smart TV users, while most mid-aged and older adults are satisfied the traditional TV contents, and they did not show interests about new Internet TV. Instead young people (18-26 years old) seemed to be the true target customers.
more young TV users use TV only as external displays of other media equipment or PC, but ignore the content and function of the TV itself. Largely because a lot of TV products separate the main function and the source menu.
Comparative analysis discovered that many successful electronic products such as iPhone and SONY PS user interfaces have the characteristics of sustainability.
Successful pedigrees products
Failed products without sustainability
Competitive analysis investigated the current smart TVs, most of the TV main menu is full of not important functions or ads. Due to the increase of the TV functions and contents, user has tired jumping in numerous rigid plates over and over again, but always can't really TV show to watch.
Most manufacturers are committed to integrate information clew and recommend to improve the user experience. Trendscrape found that in the field of mobile platform, notification center allows users to know the latest information, the applications can extend the same hobby users to connect each other, share experience, and store information in the cloud. But the trend in TV platform is not obvious.
only 20% video contents
80% icons and titles Cloud store
Phone apps of TV shows
2.Synthesis After the research, we summarized 3 design theories, which guide us directions of concept design in the next step, and 10 typical user scenarios based on the current smart TV functions. Then we analyzed and determined the main functions and menu levels.
1. Content is the first priority ! 2. Function menu must be simple ! 3. Less is more !
10 typical user scenarios
The key of interaction testing
1
Chose one channel from IPTV list, added to the collection
rapid screening functions
2
Switch to source menu, browse different source
unique browse way of switching source
3
Select online video from source menu
integrate the online video and TV menu
4
Watch TV programs, record the shows, upload to websites
one-stop share TV content function
5
Enter the news software, browse news and read the abstract
unique browse way of reading words
6
Memory some channels , and switch each other
Learn to use Lean-back Mode
7
Receive apps update, add it to the source menu, switch to the new source
Source notification/new source switch
8
Browse friends list, choose one to chat and share TV shows
New way to share TV programs
9
Set network automatically, download the profile, complete user settings
Easy to use for the first time
10
browse broadcast content through local area network
Rapid access to content of other devices
Menu level classification & analysis
3.Concept Design Concept I : Skyline Based on the first design theory : Content is the first priority ! We design the first concept ‘SKYLINE’ which I mainly participated in. And I created a ‘Nonhierarchical' concept which simplifies the traditional menu with an emotional way to browse the TV contents. Logical way of browsing makes the direction very clean, but in most situation user like to choose the program randomly and emotionally.
USER
‘Non-hierarchical' Concept This concept link the different categories of programs in the same menu level, make user choose program smoothly and switch category easily.
category program
content TV TV Online
Local video
Music
Photo
Xbox
USER
content
program category
PC Logical way of browsing
Emotional way of browsing
Concept I : Skyline
Main menu Only two levels are included in TV Menu: Main menu (categories of different functions) and Content menu(contents of each function). Users can switch the contents of different functions directly, instead of changing the different levels before.
Content menu
User usability Creativity Sustainability Technology diďŹƒculty
Concept II : Z-Space
Main menu Ordinary TV menu is based on a plane, while 3D technology allowed us to break the rules to create a new menu in the space. So concept “Z-Space” was trying to explore new space’s usability. In “Z-Space”, you can see more contents without switching the categories, and you can browse the information related to the program while watching TV.
Content menu
User usability Creativity Sustainability Technology difficulty
Concept III : Galaxy_web
Main menu In the galaxy, each planet has its own orbit. Concept “Galaxy_web” just arranged our information as planetary arrangement in the Milky Way. It was really interesting to see the contents moving like stars, while the drawback of this concept is that the limitation of orbit space cannot allow too much contents inside.
Content menu
User usability Creativity Sustainability Technology difficulty
Concept IV : Janus
Favorited menu
Content menu Main menu The inspiration of concept “Janus� came from the Gravity Sensor, which is really popular in the phone technology. If we can have a remote controller with gravity sensor, the TV menu could sense the directions of controller then demonstrate the different contents.
User usability Creativity Sustainability Technology diďŹƒculty
4.Fundamental Design After repeated discussion and testing, we finally chose the first concept as the basic concept for fundamental design and detailed design. The remote control is the most important part of interaction between user and TV UI, but most remote controllers are filled with too many unnecessary buttons. We reduce the remote controller buttons as much as possible, and made a mobile phone application software as a substitute for remote controller,which also got good feedbacks from user validation.
Remote Controller Concept : Less is more!
touch click wheel
Remote Controller App
Touch wheel/ button
menu search favorite
Traditional
High-end tends
concept user validation
5.Detailed Design In the end, we finished icon design and visual design, and made the guideline document the transformation work. Icons we made not have more than one condition, the system will identify the situation of the source and demonstrate different types of icons to let the user know the information. Also we made the Haier Cloud Media Center, which included all cloud applications. Users can watch TV, browse the Internet information, use different applications at the same time.
No Info Icon
Basic Info Icon
Main Menu
Image Info Icon
Haier Cloud Media Center
Dierent categories of icons
Setting
AC Remote Controller App IOS App 2012
We created a new remote control app for IOS to change the traditional mode of operation, and give users a unique user experience.
ON
OFF
What I did: Interaction
Vision
Motion Design
I tried my best to keep its original functions and design them in a natural way such as hidden sliding operation to shift the indoor temperature.
Quasi materialized vision design will allow the user to connect the images with feature of function in the mind easily and naturally.
It is really worth pointing out the motion design I made. Thanks to the IOS system, I can import videos easily. I used Adobe After Effects to create videos to demonstrate the fluctuations of temperature. And I believe these kinds of interaction design can bring more effective and interest user experience than the traditional remote controller.
motion demo on:
https://vimeo.com/user15452292/videos
RF Operating System THE HAIER REFRIGERATOR 2012
The new multi-touch interface makes users to set refrigerator settings more easily. RF OS also has the food menu function to make the users manage their food more reasonable. In this project , I am mainly responsible for making the product line planning, so that different grades of products have their own the functions and user interfaces.
What I did: Product-Line Planning
Low
Mid
High
Technologies
LCD Screen Touch sensitive buttons Proximity sensor
LCD Screen (7") Touch sensitive buttons Proximity sensor
LCD Screen, touch sensitive (9.7") Proximity sensor Motorized cover
UI Complexity
Casarte 86 More abstract, but very reduced
Rich images A bit more abstract, due to buttons
Rich images Simple interaction model
Design- added Value
Simplicity
Light in doors Music visualizer
Light in doors Music visualizer Clean look, due to cover
Haier World Graphic Standard 2012 FOR THE HaierHAIER WorldGROUP Graphic Standard is used in different kinds of Haier
products such as refrigerator, washing machine, air conditioner, etc. The purpose of this standard is to seek unity of the Haier products’ icon and fonts for the brand visual identity.
What I did:
Font Analysis
Icon Sketching
Brand Identity
Haier TV Apps 2011-2012 I designed some applications for Haier TV all by myself. These apps are available in Haier Smart TV app store now.
Douban Movie
TV Instruction eBook
Sina Music
Haier News
EV Charger FOR THE STATE GIRD CORPORATION OF CHINA 2010
Ideation Product Semantics The traditional fuel-servicing equipment just seems like a cube. I was inspired by pyramids and created the triangle appearance for the EV charger to change the products‘ visual communication.
innovation for human
eco-friendly energy
endless gold
How to break the original impression of the fuel-servicing equipment ?
User Scenarios
Children Tablet PROJECT IN 2011
This tablet is particularly designed for children, which I accomplished on my own. Within 3 weeks’ user research, I improved appearance as well as functions of the tablet to make children to grab and use it much easier and comfortable.
Research Target Users Children's needs change as they age, so I classified children according to the degree of their education. My target users are children between 6 and 12 years old, who are in elementary education.
Appearance & Material Most tablets weights are between 300g and 700g and made of metal or plastic. Long time using tablet will affect their physical growth and development, so weight reduction is necessary for children’s tablet.
Size & Interaction Deciding the size of the tablet is a very important part. Too small screens could damage children’s eyes, while too big could increase the weight. Normally tablet screen size is 10 inches which user test showed was a little big for a child. Therefore, I chose 7 inches LED screen, as the size is the most appropriate one.
Contents & UI Parents need to limit the time and contents of children's tablets, so that the tablet could help their study and growth instead of negative effects. So my design creates different user interfaces for children, parents and teachers respectively.
What kind of tablet do children really need ?
User Test
UI Design
I researched some primary school students, and went to one child’s home to do the user interview and tests.
In order to design p a re n t s m o n i t o r i n g functions, I separated children’s user interface from parent’s. Parents can log in their own interface to see the using time and history of their children.
Most places children use tablets are in the home, and the majority of they used tablets only for entertainment. but I also found that some teachers agreed that using tablets as an auxiliary way of study could be beneficial to students.
7 inches
I also designed the teacher’s interface for them to see students' homework and test results. In this way, this tablet could not only be a children's electronic product, but also a tool to help teachers communicate with parents.
Parents’ UI
Children’ UI
Teachers’ UI
Design Details
Hidden Switch
Improved PVC Materials
Moderate thickness
Front-facing camera
Color Analysis
Poster
Video Player UI USER INTERFACE DESIGN ASSIGNMENT 2010
Cover Design for FOR GOOGLE CHINA SOCIAL INNOVATION CUP
This is one of the designs I completed during the 6 months working as a design intern in Google. This internship gave me the first opportunity to join the real business design.
What I did: Design Proposals Graphic Design Print Development
Sketching Completed in my junior year
Sketching Completed in my junior year
Marker Sketching Completed in my sophomore year
Marker Marker
Marker Sketching Completed in my sophomore year
Marker
Needle Pen Sketching Completed in my sophomore year
Marker
Color Composition Completed in my junior year
Modeling Completed in my junior year
Model
Real product
Cut ABS
Make the base
Heat
Make the cover
Spray paint
Italy Pavilion Model Completed in my senior year
Thanks for watching