Portfolio of Wenzhu Zou
description
Transcript of Portfolio of Wenzhu Zou
Content Commercial Website DesignFreelance Designs • SocialMenu Mobile App • One Penny Entrepreneur WebsiteGraphic Design
1416171718
SmartProducts -- Kitchen Assistant Web AppUI Harmonization For Electron MicroscopesSleep Enhancement -- Warm PillowRedesign TV Remote Control for Elderly
158
11
WENZHU ZOUUSER EXPERIENCE/INTERACTION DESIGNER PORTFOLIO
[email protected] +31 645 119 285www.wenzhuzou.com www.linkedin.com/in/wenzhuzou
About Wenzhu Zou
She is a highly motivated and creative UX/Interaction Designer. She got her Professional Doctorate in Engineering degree of User-System Interaction from Industrial Design, TU/e. She has experience of working with multidisciplinary teams in Philips research, FEI, etc. on the Interaction design, UX design and Usability Engineering. She has the abilities of- Proficiency in user-centered design method and creation of inno-vative conceptual designs;- Experience with performing concept prototyping and user test;- Skillfulness in translate ideas into tangible concepts;- Well acquainted with both quantitative and qualitative usability research methods;- Excellent skills in Adobe Creative Suite (Photoshop, Illustrator, InDesign, etc.);- Effectively work in a multidisciplinary team.
Her ambition is to contribute her expertise to create successful products and positive user experiences.
i
1
Smart ProductsPhilips Research 02/2011—04/2012
IntroductionThe SmartProducts project is a European Commission’s 7th Framework Programme conducted by ten partners from industry and academia, aiming at developing the scientific and technological basis for building "smart products" with embedded "proactive knowledge" in order to improve people’s quality of life. Philips led the Smart Kitchen application scenario.SmartProducts website: http://www.smartproducts-project.eu/mainpage/vision
My role: Work Package Lead & Interaction Designer
SmartProducts website: http://www.smartproducts-project.eu/mainpage/vision
2
I worked with nutrition specialists and software engineers on refining the kitchen scenarios starting from user’s needs, and developed the flowchart. The scenarios include meal plan for next weeks, supermarket shopping experience, cooking with the help of cooking guide and food intake tracking. Different smart kitchen appliances are applied in each scenario to guide people healthily eating.
Flowchart It shows the flow from making meal plan until cooking and recording food intake.
User makes meal plan for several days through the Cooking Guide System
Meal plan list
Follow Plan?
Eat at home?
Eat outside. The real food intake cannot be measured automatically. User needs to update the meal planner manually.
Input food info manually?
Change recipe
Cooking with Chopping Board?
Real food intake info measured by chopping board
generate
adapt
No
Yes
No
Yes
No
Yes
No
Yes
I defined the basic concept and information architecture for the Smart Kitchen Assistant application, sketched and created hi-fidelity mockup for every single page of the application. The Smart Kitchen Assistant is a web application which enhances user’s awareness of healthily eating in each step. For example, in the step of making meal plan, the Smart Kitchen Assistant uses various persuasive elements to help user to select healthy recipe, like target setting, persuasive messages, healthfulness color indication and avatar. In addition, I applied the usability princi-ples to the UI design.SketchTool: Illustrator
SmartProducts
SmartProducts website: http://www.smartproducts-project.eu/mainpage/vision
3
SmartProducts
I coached the development team including 3 Software Engi-neers with SCRUM method to ensure that the HTML5 kitchen assistant application is successfully implemented. This applica-tion is the core of the smart kitchen system. It guides user’s meal planning and cooking, and tracks user’s food intake by working with other smart kitchen appliances. A follow-up user test validated the usability and effectiveness of iPad kitchen assistant application.
PrototypeHTML5
Usability TestingMethod: Co-discovery, qualitative research, thematic analysis
I designed tasks and conducted the usability testing to evaluate the Smart Kitchen Assistant application. The test was executed in the Experience Lab of Philips. 20 users participated in the test. The positive user feedback and the analysis results provided the improvement proposals for the next version of The Smart Kitchen Assistant application which are demoed to the EU com-mittee review.In addition, I also helped the project partners complete another user test about the smart kitchen system in Philips’ Experience Lab. The user test and result were contributed to the project deliverables.
SmartProducts website: http://www.smartproducts-project.eu/mainpage/vision
4
SmartProducts
Smart Chopping Board
Smart Steamer
Smart Kitchen Assistant
Smart Kitchen Concept Map
As the Smart Kitchen Work Package lead, I organized the work package telephone meeting among 5 academies partners once every two weeks to ensure the work progress. In the project consortium meetings I was the chairman of the Smart Kitchen work package leading the discussions and making procedure decisions. Besides, I monthly reported the progress to European Union Committees. In the Smart Kitchen system final integration I played a key role in planning and organizing the system integration and demonstration with the project partners from 5 academies in Europe.
AchievementThe Smart Kitchen application scenario obtained positive user feedback proved by usability testing. The Smart Kitchen system is successfully demonstrated in the final EU review meeting, and received high appreciation from EU committee members. The performance of the work package led by Philips achieved the project requirements.The Smart Kitchen System is placed in the Kitchen Lab of Philips Experience Lab as one of Philips Consumer Lifestyle product prototype shown to the visitors and been used in other research.
5
UI Harmonization IntroductionA joint project of FEI Company, VanBerlo Design, and the TU/e, aiming at creating harmonized user interfaces for FEI’s two main types of electron microscopes in order to improve the usability and user experience of FEI’s products, and create strong company brand.
My role: Usability Engineer & UI Designer
FEI, VanBerlo 01/2010—09/2010
6
UI Harmonization
User-Centered Design method and iterative design process are applied in this project. Two rounds of design and user test are conducted.I collaboratively worked with R&D team in FEI, which includes Principal Systems Architect, Senior Application Development Scientists and experienced Electron Microscope technicians and specialists on defining user requirements, analyzing the system structure and user task.
Iterative Design Process
User Analysis•who users are•their key tasks
User and task descriptions
Goals:
Methods:
Results:
Brainstormed designs
User-centered design
Evaluatetasks
Usability testing:Participatory interaction
Heuristic evaluation
Refined designs
Graphical screen design
User involvement
Interface guidelines
Testable prototypes
Completed designs
Testable prototypes
The 1st round of design and testing
User AnalysisPhases: Completion
Usability testing:Participatory interaction
Heuristic evaluation
The 2nd round of design and testing
Graphical screen design
Interface guidelines
high fidelity prototyping methods
high fidelity prototyping methods
User Analysis•who users are•their keyy tasks
User and taskdescriptions
Goalsll :
Methtt odsdd :
Resultstt :
Brainstormeddesigns
User-centereddesign
Evavv luatetaskskk
UsUU abilii ill tyttet stitt nii g:Partrr itt cipii atoryrinii terarr ctitt oii n
Heurirr sii titt cevavv luatitt oii n
Refineddesigns
Graphicalscreendesign
Userinvolvement
Interfrr aceguidelines
Testableprototypes
Completeddesigns
Testableprototypes
design and testingp
UsUU abilii ill tyttett stitt nii g:Partrr itt cipii atoryrrinii terarr ctitt oii n
Heurirr sii titt cevavv luatitt oii n
design and testing
Graphicalscreendesign
Interfrr aceguidelines
high fidelityprototypingmethods
high fidelityprototypingmethods
I explored users’ needs through contextual inquiry method by interviewing 4 application technicians and specialists in FEI and observing their operation with the different types electron microscopes. 4 design principles are selected as the guideline for the UI harmonization.
Design Principles
Usability principle Brief description of the principle Consistency Making elements uniform — having them look and behave the same wa
Minimizing cognitive
load
allowing a user to efficiently perform a task with a smallest amount of
mental activity on working memory at an instance in time
Efficient Interactions minimize the number of steps to complete a task
Effective information
presentation
All language used in a system should be concise and unambiguous;
Maintaining all the necessary information in an appropriate screen
density; and
Maximize Readability
Meaningful Use color contrast on text
Use font sizes that are large enough to read
Use various font weights for emphasis
7
UI Harmonization
I worked closely with the senior designers of VanBerlo to define user interface on imaging tiling, detector selection and control panel for different types of electron microscopesIn addition, I implemented interactive UI prototypes of electron microscopes in PPT and Adobe Flash for two rounds of UI design and usability testing
PrototypeTool: PowerPoint, Flash
I independently planned, scripted, recruited, conducted, and evaluated usability testing for verifying and testing the UI at the end of each design iteration. Each round 4 participants (the Electron Microscope technicians or specialists) participated in the test. The innovative improvement proposals are submitted after each round design and test.
Usability Testingy g
AchievementThe UIs for the specific tasks are successfully harmonized. A series of rules on the image tiling, detector selection and function panes control are defined. The improvement recommendations are proposed for the further work of the UI harmonization.
8
Sleep EnhancementIntroductionA joint project of Philips Research and TU/e, aiming to improve the sleep quality of couples who are living apart.
My role : Interaction Designer
TU/e, Philips Research 06/2009—12/2009
9
Sleep Enhancement
To explore remote parnters’ sleep habits and the reason leading to the low sleep quality, I designed Sleeping Diary. 5 objectives recorded their behavior and mind activities before going to bed for one week. We found that contacting with each other through internet or phone before going to bed, and working until late mainly result in delaying sleep. Together with the design team, we considered the intimacy between partners as the way to improve objectives’ sleep quality.
User StudySleeping Diary
In the conceptuation phase the warm pillow concept is decided through brainstorming. The pillow is a physical intimacy transfer media. When one of partners is hugging his/her warm pillow in the bed, his/her partner’s pillow follows becoming warm. It is a sign informing partner that his/her love is in the bed aiming to “push” the partner going to bed earlier and simulate the contact between partners.
Conceptuation
Warm Pillow
10
Sleep Enhancement
Video Prototype The videos are available at: http://www.youtube.com/watch?v=aQv0yYSsrX0&feature=relmfuand http://www.youtube.com/watch?v=GjuK66s03zo
The connection between pillows is through internet. An Arduino electric circuit connecting internet controls pillows’ warming up. I am in charge of implementing the warm-pillow hardware prototype for the user test. Two pairs of remote partners participated in the user test for two weeks at their home. To compare the effect, the participants are asked to use normal pillow for one week, and warm pillow for another week.We also created the video prototype for the web investigation to evaluate the warm pillow concept.
PrototypeHardware Prototype: arduino, electric circuit, thermo-pad and pillow
AchievementThe concept succeeded in providing a sense of connectedness between partners when sleeping remotely. It leads to a more pleasant sleeping experience .
PUBLICATION: W. Zou, T. Scherini, P.Melo, T. van Craenendonck, M. Kaptein, Enhancing the Sleeping Quality of Partners Living Apart, DIS10 Designing Interactive Systems 2010, Arhus, Denmark, August 2010.
Administrator (Experimenter)
Host 1 (Partner 1)
Host 2 (Partner 2)
Internet
System ArchitectureInternet connection, Arduino electric circuit controls pillow’s on/off
11
Redesign Remote Control for ElderlyIntroductionRedesign remote control for elderly people is an assignment during the USI study, aiming to improve elderly people’s experience of using TV remote control.
My role: Interaction Designer
TU/e 01/2009—02/2009
12
Redesign Remote Control for Elderly
Many of current TV remote control contain a number of small size keys on a limited area panel, which results in the inconven-ience of control for elderly.Together with the design team, we explored the operation requirements of elderly people when using the remote control.
SitemapWe analyzed the elderly’s needs and the essential features of the redesigned remote control.
From the ergonomics consideration, we simplified the keys, redesigned the key layout and reshaped the remote control according to the gesture that elderly people hold remote control. I performed the concept from sketch to the foam mockup model. The fine foam mockup is created for the focus group.
Raw model Illustrator version Fine foam model
Mockups
Wide pointing angle
Fit for both one hand and two hands control
Fit for controlling when putting on the table without hand holding
Features
13
We tested our concept in a local Dutch elderly people house in the form of focus group. 4 people (2 females, 2 males) joined the test. They gave positive comment to the redesigned remote control after they carried out the given tasks (turn on TV, change the channel and change the volume and so on) with both the ordinary and the redesigned remote control.
Focus Group
AchievementThe redesign is warmly appreciated by elderly people because of its simple keys layout and comfortable ergonomic design. They commented that :• The remote control’s shape fits their gesture.• The buttons are big and clear.• The shape of favorite channel buttons helps them memorize the corresponding channelsThe test objectives would like to have a functional prototype.
Channel Group• 4 different shape buttons indicate 4 favorites channels• Simplified 0-9 channel buttons to pre/next channel buttons
Volum buttons
Comfortable handle
Symmetrical keyboard layout: fit for both left-handed and right-handed people
Function Group• On/off• Mute• Back: go back to the previous status of channels, setting or volum
ls
el
Redesign Remote Control for Elderly
Features
14
Commercial Website DesignIntroductionHelantong is a comprehensive services exchange web platform, facing to Chinese who study or work in the Netherlands. It is founded in 2008 in the Netherlands and aims to provide Chinese in the Netherlands information on studying and living. Users can fast and conveniently access to information and share experiences through Helantong web-site. The preliminary release included four sections: Wiki, Useful website collection, entertainment, and forum, which cover all aspects of living in the Netherlands.
My role was UI Designer. Besides, as a co-founder of this startup, I took a somewhat entrepreneurial role to translate the user needs into a use-centered interactive interface. In this venture, my desire of understand-ing more user-centered design approaches grew.
Helantong 01/2008—10/2008
15
commercial website design
Sketch Photoshop graph
I was responsible for • designing, coordinating and managing artwork and executing creative concepts for www.outpie.com, including website infor-mation architecture, webpage layout, icons and themes design;• creating and maintaining the UI;• creating company’s identity, brochures and collateral.
Helantong Logo Design
Helantong’s collateral example
Webpage layout sketchSketch Photoshop graph
g p
16
Freelance Design• Social Menu• One Penny Entrepreneur
My role : UX/UI designer
05/2012--present
17
Freelance Design
The SocialMenu is a location-based iPhone application that enables users to view, add, and rate dishes from the menu of the restaurants nearby. The SocialMenu is in the startup phase.I specified information architecture, created workflow for the SocialMenu iPhone application and designed business landing pages.
Landing Pages One Penny Webpages
One Penny Entrepreneur is a guided, community-rich platform designed to help entrepreneurs of all backgrounds define their ideas, find resources and launch.I reorganized website information architecture,designed the Beta version of the website,and created the high-fidelity proto-type in Photoshop.
Social Menu 05/2012 - 09/2012 One Penny Entrepreneur 10/2012 - present
18
Graphic DesignPhotoshop Work--Under Water City 01/2010Obtained silver awards in “Eindhoven in the Eyes 2010” Chinese Design Competition
Poster Design Photoshop Coloring