際際滷

際際滷Share a Scribd company logo

Portfolio dan wu

Dan Wu
Dan Wu

This portfolio document summarizes Dan Wu's work experience and university projects. It includes a brief introduction, descriptions of projects from Alibaba.com and evaluating the usability of the TFL website, wireframes for a fashion startup website, and a mobile grocery shopping list app designed with user research and usability testing. The portfolio showcases Dan's skills in areas such as product management, usability testing, wireframing, and user experience design.

1 of 34
Portfolio Dan Wu Portfolio by Dan Wu
My Brief Introduction Newly graduate from MSc Human Centred Systems in City University Worked in Alibaba.com(Equivalent to Ebay) as a junior product manager for one year Exposed to a stat-up of fashion and brand A junior user experience designer with analytic insight, curious mind and easy-going personality See LinkedIn references Portfolio by Dan Wu
Project Menu Commercial experinece-Alibaba.com University project-tfl.gov.uk usability evaluation Star-up project-fashion and brand start-up University project-UCD mobile grocery shopping list Portfolio by Dan Wu
Alibaba.com Background My role Worked as a junior product manager Evaluation for one year in product Manage product development management of search centre in Product strategy Alibaba.com Product marketing Analyse product requirements user research Stakeholder meeting Achieve Knowledge of digital products Experience of product development Ability to manage project Portfolio by Dan Wu
Alibaba.com Schedule presentation Product development User interview and survey User feedback Design questionnaire Writing reports Work across different team Communicate with different teams Organize project kick-off Sketch skills Create wireframe to illustrate ideas sketch Portfolio by Dan Wu
TFL Usability Evaluation Background Evaluate if TFL (Transport for London) website was ready for 2012 Olympic games to serve services for London tourists Website: http://www.tfl.gov.uk/ My role Plan and conduct test Conclude results Write reports Achieve Experience of usability testing Ability to conclude and present usability problems Ability to provide design recommendation Portfolio by Dan Wu
TFL Usability Evaluation Goals Method To find out usability problems Think aloud To increase user experience 5 participants Test Participants characteristic Journey plan Experience in London Transportation: number of times Ticket inquiry English level: Basic communication Road information Technology level: 3 years computer Metrics experience Task completion rate Living Region: Inside and outside Page view numbers London Satisfaction rate Results All 3 tasks completion rate are 80% But it took more effort to find ticket price and road information (Page view numbers > Standard setting) Portfolio by Dan Wu
TFL Usability Evaluation Problem 1- Participants found it difficult to find ticket fares for different travel options Explanations Participants made twice page view numbers as its required on task 2 Participants subjective rating was lower than average on task 2 Participants who live outside London confused by oyster card Participants who travel London infrequently had no knowledge of jargon, like zones Two Participants tried to check ticket fare from journey planer TFL ticket pages Portfolio by Dan Wu
TFL Usability Evaluation Recommendations Integrate fare information with journey plan function, in which case user can gain knowledge of ticket price related to transportation options. Replace static table on the fare pages to dynamic search functions so that user can filter criteria to find results Refine label of ticket pages to be more targeted and clear to help visitors navigate Sketch of recommendations Portfolio by Dan Wu
TFL Usability Evaluation Problem 2 - Participants found it difficult to navigate through the website to look for information (Graph indication on next page) Explanations 2 of the 5 participants made 11 and 14 page views compared to the standard number 5 Participants subjective rating was 2 on task 3 which was the lowest of all the tasks More than half of the participants had been lingering the website to find targeted information Numbers of clickable links displayed on one page and disordered information structure caused participants time to look for information in need (task 3.1, participants felt frustrated in looking for congestion fee) Portfolio by Dan Wu
TFL Usability Evaluation Recommendation indication Recommendations Structure the information reduce clickable text and refine label names Analyze data to find out most used information and prioritize the content by lifting display position and design highlight TFL ticket pages Suggestions No.1 shows information to different audience is placed under the same category--Suggest to remove the sub-category to a particular developer page No. 2 shows category and its sub leads to same page and applies same function--Suggest to remove the sub-category and rename the category as search for a tube station No 3 and 4 show similar contents take part of majority places--Suggest to restructure the sub-category and integrate similar content on one page No 5 shows the problem of necessarity to expand all the sub-categories that less frequently used--Suggest to hide the sub- categories. Portfolio by Dan Wu Back to Menu
Fashion and Brand Platform Background This is a project for a start-up dedicated to introducing British brands and selling British products to Chinese market. Content oriented ecommerce website My role To establish key audiences To validate the value proposition To prioritize products features To design a wireframe Works Chinese customer survey and market report User persona and scenario Report of comparison of online shopping design between China and UK Low and high fidelity wireframe of the website Achieve Skills of Visio, Axure, Photoshop Experience of business development Knowledge of fashion and brand Portfolio by Dan Wu
Fashion and Brand Platform Research reports and consumer feedback To establish Key audiences, I have done market research Customer survey research Search and translate authorized reports Modify personas and storyboard Value proposition Whats new in the market and also matches my style? How can costumers purchase it? Persona Professional Chinese woman aged from 25-35 Portfolio by Dan Wu
Fashion and Brand Platform 3 Scenario Browse content in time clip (Picture content) Purchase inquiry and decision ( Product Scenario of meeting with people purchasing information) Share content and inform friends (Social networking function) Portfolio by Dan Wu
Fashion and Brand Platform Interaction prototype of homepage Homepage Wireframe Banner Carousal banner Picture oriented content Product Line Picture content detail Like it to collect Making list while there is function to share on social networking Portfolio by Dan Wu
Fashion and Brand Platform Product detail page Social elements and lifted selected comments encourage social interaction Buying information: hyperlink of where to buy Prototype of product detail Portfolio by Dan Wu
Fashion and Brand Platform High fidelity wireframe Homepage Picture Content oriented Red and grey colour scheme Dual language on main navigation Social elements High fidelity wireframe of HP Portfolio by Dan Wu
Fashion and Brand Platform Article pages Comment can be shared within social networks conveniently Single Brand page With brand story Related articles Related videos Introduce brand insight to audiences High fidelity wireframe of article page Portfolio by Dan Wu Back to menu
UCD design of mobile grocery shopping list Background This is an individual final project for master degree to design an application to facilitate grocery shopping. I designed a mobile wireframe for creating shopping lists. This project achieved 62 marks. My works User centered design User research Conceptual design Wireframe User testing Achieve Skills of user research Experience process of user centered design Skills of mobile design Portfolio by Dan Wu
UCD design of mobile grocery shopping list User Research Method 10 female shoppers Age 25-50 All shoppers went to supermarket 3 had experience on grocery online shopping Qualitative one to one interview Conducted in shoppers home or new supermarket Semi-structured contextual research Portfolio by Dan Wu
UCD design of mobile grocery shopping list Discovery Online Shopping Situation All the interviewers had one or two preferred supermarkets which they visited most frequently Online grocery shopping is not a primary choice I probably should do that on line but for vegetables things like that, its not always what you pick up---Participant 4 I dont like the slot of time for waiting. I think its not convenient. --- Participant 2 Conclusion: Deficiency of business service cannot be effectively solved by UI design solution. Portfolio by Dan Wu
UCD design of mobile grocery shopping list Discovery Goals for Shopping Most grocery shopping was prepared for meal and they find its a bit troublesome to plan all the meal for everyday I should do better organise for planning what we are going to eat and buying ahead. But again sometimes it defeats me I cant think that ways. How can I find what we are going to eat every single day? Its probably why I end up doing it every day--- Participant 4 I dont make shopping list before going shopping. Why not? Because I eat very boring food, I eat same things all the time ---Participant 5 Conclusion: Insufficient inventory is a trigger of grocery shopping behaviour that closely relates to everyday meal Portfolio by Dan Wu
UCD design of mobile grocery shopping list Discovery- Plan before Shopping Most of shopper shopping was routine and regular Plan before shopping in order to save time and avoid unnecessary spending I look up the fridge and cupboard to check before I confirm the order. I need to visualize my stuff at home and I need to think what I want to cook for my kid. I need to think about what they had and what they will have next Participant 8 If you havent got a list, you are wandering around the shop.You buy things you dont need. Then I choose to buy extra stuff on my decision ---Participant 6 Conclusion: In the process of grocery shopping, plan is an important part Portfolio by Dan Wu
UCD design of mobile grocery shopping list Discovery Usual Products Every time on regular grocery shopping, there are recurred items on shoppers lists I have a lot of regular food, like rice, bread, eggs Participant 2 I will do the cleaning, detergents, toilet roll , tins of food these sorts of things on big shopping. Unless I see things I like I would buy it, it is just tea, coffee, sugar normal things. Its just regular things on my list Participant 6 Conclusion: Usual products recur on shopping plan/ list Portfolio by Dan Wu
UCD design of mobile grocery shopping list Discovery Mobile Shoppers will choose the most convenient form at hand to make note I made on the piece of paper or made on the phone.--- Participant 6 Shoppers will use audio to input items on the phone when they are in rush 5 minutes before I going out in case I forgotten. Just before I got into the car or sth like that.(Just want to mark down something quickly) Or my son will do it. Here I am going to shopping and he might need something and he just talk to the phone. --Participant 4 Shoppers use shopping list as external memory In the shop, I will look at my list on the phone and then put it back. And I shop eggs, coffee, tea and then I look at it again. If I forgot something I just come back to it --- Participant 6 Conclusion: Mobile device is a convenient option to use shopping list and audio input can be used to reduce input effort Portfolio by Dan Wu
UCD design of mobile grocery shopping list Design solution Design a mobile app to input, store and read shopping list conveniently Features Priority functions Usual products list Recipe search- standardize items Share Incentives Offer information Add value Audio input Portfolio by Dan Wu
UCD design of mobile grocery shopping list Task Analysis Analyse user tasks Use Visio for flow drawing Portfolio by Dan Wu
UCD design of mobile grocery shopping list Steps to create shopping list Wireframe Shopping list Create shopping list View and edit history shopping list by occasion Smart input grocery items Portfolio by Dan Wu
UCD design of mobile grocery shopping list Usual list Input items by usual list (usual products stock page) Usual list is maintainable Usual list is able to accelerate shoppers input speed and help shoppers maintain lists easily Steps to add items from usual list Portfolio by Dan Wu
UCD design of mobile grocery shopping list List page Tap the item once for check out Tap the item twice for product detail Display of product detail Display of list Portfolio by Dan Wu
UCD design of mobile grocery shopping list Steps of browse recipe Meal Plan The navigation flows from high level information to detail. By providing recipe content, the app help users to make better meal plan. Picture conveys rich information of ingredients and what the dish looks like. It is important to show despite the limited space. Elevating cooking time is able to reveal the degree of difficulty of making a meal. Portfolio by Dan Wu
UCD design of mobile grocery shopping list Recipe Items Standardize and integrate ingredients on each recipe Shopper can easily add items to shopping list Ingredients display of recipe Portfolio by Dan Wu
UCD design of mobile grocery shopping list Offers Offer is on list display and this page highlights the relevant discounts Users can add offers to shopping list and they will display as normal item. Users can select supermarket to receive offers by setting Providing offer information is an additional incentive for users to use this product Steps of choosing offers Portfolio by Dan Wu Back to menu
Thank You Portfolio by Dan Wu

More Related Content

Portfolio dan wu

  • 1. Portfolio Dan Wu Portfolio by Dan Wu
  • 2. My Brief Introduction Newly graduate from MSc Human Centred Systems in City University Worked in Alibaba.com(Equivalent to Ebay) as a junior product manager for one year Exposed to a stat-up of fashion and brand A junior user experience designer with analytic insight, curious mind and easy-going personality See LinkedIn references Portfolio by Dan Wu
  • 3. Project Menu Commercial experinece-Alibaba.com University project-tfl.gov.uk usability evaluation Star-up project-fashion and brand start-up University project-UCD mobile grocery shopping list Portfolio by Dan Wu
  • 4. Alibaba.com Background My role Worked as a junior product manager Evaluation for one year in product Manage product development management of search centre in Product strategy Alibaba.com Product marketing Analyse product requirements user research Stakeholder meeting Achieve Knowledge of digital products Experience of product development Ability to manage project Portfolio by Dan Wu
  • 5. Alibaba.com Schedule presentation Product development User interview and survey User feedback Design questionnaire Writing reports Work across different team Communicate with different teams Organize project kick-off Sketch skills Create wireframe to illustrate ideas sketch Portfolio by Dan Wu
  • 6. TFL Usability Evaluation Background Evaluate if TFL (Transport for London) website was ready for 2012 Olympic games to serve services for London tourists Website: http://www.tfl.gov.uk/ My role Plan and conduct test Conclude results Write reports Achieve Experience of usability testing Ability to conclude and present usability problems Ability to provide design recommendation Portfolio by Dan Wu
  • 7. TFL Usability Evaluation Goals Method To find out usability problems Think aloud To increase user experience 5 participants Test Participants characteristic Journey plan Experience in London Transportation: number of times Ticket inquiry English level: Basic communication Road information Technology level: 3 years computer Metrics experience Task completion rate Living Region: Inside and outside Page view numbers London Satisfaction rate Results All 3 tasks completion rate are 80% But it took more effort to find ticket price and road information (Page view numbers > Standard setting) Portfolio by Dan Wu
  • 8. TFL Usability Evaluation Problem 1- Participants found it difficult to find ticket fares for different travel options Explanations Participants made twice page view numbers as its required on task 2 Participants subjective rating was lower than average on task 2 Participants who live outside London confused by oyster card Participants who travel London infrequently had no knowledge of jargon, like zones Two Participants tried to check ticket fare from journey planer TFL ticket pages Portfolio by Dan Wu
  • 9. TFL Usability Evaluation Recommendations Integrate fare information with journey plan function, in which case user can gain knowledge of ticket price related to transportation options. Replace static table on the fare pages to dynamic search functions so that user can filter criteria to find results Refine label of ticket pages to be more targeted and clear to help visitors navigate Sketch of recommendations Portfolio by Dan Wu
  • 10. TFL Usability Evaluation Problem 2 - Participants found it difficult to navigate through the website to look for information (Graph indication on next page) Explanations 2 of the 5 participants made 11 and 14 page views compared to the standard number 5 Participants subjective rating was 2 on task 3 which was the lowest of all the tasks More than half of the participants had been lingering the website to find targeted information Numbers of clickable links displayed on one page and disordered information structure caused participants time to look for information in need (task 3.1, participants felt frustrated in looking for congestion fee) Portfolio by Dan Wu
  • 11. TFL Usability Evaluation Recommendation indication Recommendations Structure the information reduce clickable text and refine label names Analyze data to find out most used information and prioritize the content by lifting display position and design highlight TFL ticket pages Suggestions No.1 shows information to different audience is placed under the same category--Suggest to remove the sub-category to a particular developer page No. 2 shows category and its sub leads to same page and applies same function--Suggest to remove the sub-category and rename the category as search for a tube station No 3 and 4 show similar contents take part of majority places--Suggest to restructure the sub-category and integrate similar content on one page No 5 shows the problem of necessarity to expand all the sub-categories that less frequently used--Suggest to hide the sub- categories. Portfolio by Dan Wu Back to Menu
  • 12. Fashion and Brand Platform Background This is a project for a start-up dedicated to introducing British brands and selling British products to Chinese market. Content oriented ecommerce website My role To establish key audiences To validate the value proposition To prioritize products features To design a wireframe Works Chinese customer survey and market report User persona and scenario Report of comparison of online shopping design between China and UK Low and high fidelity wireframe of the website Achieve Skills of Visio, Axure, Photoshop Experience of business development Knowledge of fashion and brand Portfolio by Dan Wu
  • 13. Fashion and Brand Platform Research reports and consumer feedback To establish Key audiences, I have done market research Customer survey research Search and translate authorized reports Modify personas and storyboard Value proposition Whats new in the market and also matches my style? How can costumers purchase it? Persona Professional Chinese woman aged from 25-35 Portfolio by Dan Wu
  • 14. Fashion and Brand Platform 3 Scenario Browse content in time clip (Picture content) Purchase inquiry and decision ( Product Scenario of meeting with people purchasing information) Share content and inform friends (Social networking function) Portfolio by Dan Wu
  • 15. Fashion and Brand Platform Interaction prototype of homepage Homepage Wireframe Banner Carousal banner Picture oriented content Product Line Picture content detail Like it to collect Making list while there is function to share on social networking Portfolio by Dan Wu
  • 16. Fashion and Brand Platform Product detail page Social elements and lifted selected comments encourage social interaction Buying information: hyperlink of where to buy Prototype of product detail Portfolio by Dan Wu
  • 17. Fashion and Brand Platform High fidelity wireframe Homepage Picture Content oriented Red and grey colour scheme Dual language on main navigation Social elements High fidelity wireframe of HP Portfolio by Dan Wu
  • 18. Fashion and Brand Platform Article pages Comment can be shared within social networks conveniently Single Brand page With brand story Related articles Related videos Introduce brand insight to audiences High fidelity wireframe of article page Portfolio by Dan Wu Back to menu
  • 19. UCD design of mobile grocery shopping list Background This is an individual final project for master degree to design an application to facilitate grocery shopping. I designed a mobile wireframe for creating shopping lists. This project achieved 62 marks. My works User centered design User research Conceptual design Wireframe User testing Achieve Skills of user research Experience process of user centered design Skills of mobile design Portfolio by Dan Wu
  • 20. UCD design of mobile grocery shopping list User Research Method 10 female shoppers Age 25-50 All shoppers went to supermarket 3 had experience on grocery online shopping Qualitative one to one interview Conducted in shoppers home or new supermarket Semi-structured contextual research Portfolio by Dan Wu
  • 21. UCD design of mobile grocery shopping list Discovery Online Shopping Situation All the interviewers had one or two preferred supermarkets which they visited most frequently Online grocery shopping is not a primary choice I probably should do that on line but for vegetables things like that, its not always what you pick up---Participant 4 I dont like the slot of time for waiting. I think its not convenient. --- Participant 2 Conclusion: Deficiency of business service cannot be effectively solved by UI design solution. Portfolio by Dan Wu
  • 22. UCD design of mobile grocery shopping list Discovery Goals for Shopping Most grocery shopping was prepared for meal and they find its a bit troublesome to plan all the meal for everyday I should do better organise for planning what we are going to eat and buying ahead. But again sometimes it defeats me I cant think that ways. How can I find what we are going to eat every single day? Its probably why I end up doing it every day--- Participant 4 I dont make shopping list before going shopping. Why not? Because I eat very boring food, I eat same things all the time ---Participant 5 Conclusion: Insufficient inventory is a trigger of grocery shopping behaviour that closely relates to everyday meal Portfolio by Dan Wu
  • 23. UCD design of mobile grocery shopping list Discovery- Plan before Shopping Most of shopper shopping was routine and regular Plan before shopping in order to save time and avoid unnecessary spending I look up the fridge and cupboard to check before I confirm the order. I need to visualize my stuff at home and I need to think what I want to cook for my kid. I need to think about what they had and what they will have next Participant 8 If you havent got a list, you are wandering around the shop.You buy things you dont need. Then I choose to buy extra stuff on my decision ---Participant 6 Conclusion: In the process of grocery shopping, plan is an important part Portfolio by Dan Wu
  • 24. UCD design of mobile grocery shopping list Discovery Usual Products Every time on regular grocery shopping, there are recurred items on shoppers lists I have a lot of regular food, like rice, bread, eggs Participant 2 I will do the cleaning, detergents, toilet roll , tins of food these sorts of things on big shopping. Unless I see things I like I would buy it, it is just tea, coffee, sugar normal things. Its just regular things on my list Participant 6 Conclusion: Usual products recur on shopping plan/ list Portfolio by Dan Wu
  • 25. UCD design of mobile grocery shopping list Discovery Mobile Shoppers will choose the most convenient form at hand to make note I made on the piece of paper or made on the phone.--- Participant 6 Shoppers will use audio to input items on the phone when they are in rush 5 minutes before I going out in case I forgotten. Just before I got into the car or sth like that.(Just want to mark down something quickly) Or my son will do it. Here I am going to shopping and he might need something and he just talk to the phone. --Participant 4 Shoppers use shopping list as external memory In the shop, I will look at my list on the phone and then put it back. And I shop eggs, coffee, tea and then I look at it again. If I forgot something I just come back to it --- Participant 6 Conclusion: Mobile device is a convenient option to use shopping list and audio input can be used to reduce input effort Portfolio by Dan Wu
  • 26. UCD design of mobile grocery shopping list Design solution Design a mobile app to input, store and read shopping list conveniently Features Priority functions Usual products list Recipe search- standardize items Share Incentives Offer information Add value Audio input Portfolio by Dan Wu
  • 27. UCD design of mobile grocery shopping list Task Analysis Analyse user tasks Use Visio for flow drawing Portfolio by Dan Wu
  • 28. UCD design of mobile grocery shopping list Steps to create shopping list Wireframe Shopping list Create shopping list View and edit history shopping list by occasion Smart input grocery items Portfolio by Dan Wu
  • 29. UCD design of mobile grocery shopping list Usual list Input items by usual list (usual products stock page) Usual list is maintainable Usual list is able to accelerate shoppers input speed and help shoppers maintain lists easily Steps to add items from usual list Portfolio by Dan Wu
  • 30. UCD design of mobile grocery shopping list List page Tap the item once for check out Tap the item twice for product detail Display of product detail Display of list Portfolio by Dan Wu
  • 31. UCD design of mobile grocery shopping list Steps of browse recipe Meal Plan The navigation flows from high level information to detail. By providing recipe content, the app help users to make better meal plan. Picture conveys rich information of ingredients and what the dish looks like. It is important to show despite the limited space. Elevating cooking time is able to reveal the degree of difficulty of making a meal. Portfolio by Dan Wu
  • 32. UCD design of mobile grocery shopping list Recipe Items Standardize and integrate ingredients on each recipe Shopper can easily add items to shopping list Ingredients display of recipe Portfolio by Dan Wu
  • 33. UCD design of mobile grocery shopping list Offers Offer is on list display and this page highlights the relevant discounts Users can add offers to shopping list and they will display as normal item. Users can select supermarket to receive offers by setting Providing offer information is an additional incentive for users to use this product Steps of choosing offers Portfolio by Dan Wu Back to menu