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 it’s 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 participant’s 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
What’s 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 shopper’s 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, it’s
not always what you pick up‖---Participant 4
―I don’t like the slot of time for waiting. I think it’s 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 it’s 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 can’t think that ways. How can I
find what we are going to eat every single day? It’s probably why I end up
doing it every day‖--- Participant 4
―I don’t 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 haven’t got a list, you are wandering around the shop.You buy things you
don’t 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. It’s 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
