Post on 05-Dec-2014
description
Portfolio
Dan Wu
Portfolio by Dan Wu
My Brief Introduction
Portfolio by Dan Wu
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
Project Menu
Portfolio by Dan Wu
• 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
Alibaba.com
Portfolio by Dan Wu
Background
Worked as a junior product manager
for one year in product
management of search centre in
Alibaba.com
My role
Evaluation
Manage product development
Product strategy
Product marketing
Analyse product requirements
user research
Stakeholder meeting
Achieve
Knowledge of digital products
Experience of product
development
Ability to manage project
Alibaba.com
Portfolio by Dan Wu
Product development
User interview and survey
Design questionnaire
Writing reports
Work across different team
Communicate with
different teams
Organize project kick-off
Sketch skills
Create wireframe to
illustrate ideas
• User feedback
• Schedule presentation
• sketch
TFL Usability Evaluation
Portfolio by Dan Wu
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
TFL Usability Evaluation
Portfolio by Dan Wu
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)
Goals
To find out usability problems
To increase user experience
Test
Journey plan
Ticket inquiry
Road information
Metrics
Task completion rate
Page view numbers
Satisfaction rate
Method
Think aloud
5 participants
Participants characteristic
Experience in London Transportation:
number of times
English level: Basic communication
Technology level: 3 years computer
experience
Living Region: Inside and outside
London
TFL Usability Evaluation
Portfolio by Dan Wu
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
Problem 1- Participants found it difficult to find ticket fares for
different travel options
TFL Usability Evaluation
Portfolio by Dan Wu
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
TFL Usability Evaluation
Portfolio by Dan Wu
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)
Problem 2 - Participants found it difficult to navigate through the website to
look for information (Graph indication on next page)
TFL Usability Evaluation
Portfolio by Dan Wu
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
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.
• TFL ticket pages
• Recommendation indication
Back to Menu
Fashion and Brand Platform
Portfolio by Dan Wu
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
Fashion and Brand Platform
Portfolio by Dan Wu
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
• Research reports and consumer feedback
Portfolio by Dan Wu
Fashion and Brand Platform
• Scenario of meeting with people
3 Scenario
Browse content in time
clip (Picture content)
Purchase inquiry and
decision ( Product
purchasing information)
Share content and
inform friends (Social
networking function)
Portfolio by Dan Wu
Homepage
Wireframe
Carousal banner
Picture oriented
content
Picture content
detail
“Like it” to
collect
Making list while
there is function
to share on social
networking
Fashion and Brand Platform
Banner
Product
Line
• Interaction prototype of homepage
Portfolio by Dan Wu
Product detail page Social elements and lifted
selected comments encourage
social interaction
Buying information: hyperlink
of “where to buy”
Fashion and Brand Platform
• Prototype of product detail
Portfolio by Dan Wu
High fidelity wireframe Homepage
Picture Content oriented
Red and grey colour scheme
Dual language on main navigation
Social elements
Fashion and Brand Platform
• High fidelity wireframe of HP
Portfolio by Dan Wu
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
Fashion and Brand Platform
• High fidelity wireframe of article page
Back to menu
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
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
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
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
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
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
Conclusion: Deficiency of business service cannot be effectively solved by UI design
solution.
―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
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
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
Conclusion: Insufficient inventory is a trigger of grocery shopping behaviour that closely
relates to everyday meal
―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
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
Discovery- Plan before Shopping
Most of shopper’ shopping was routine and regular
Plan before shopping in order to save time and avoid unnecessary spending
Conclusion: In the process of grocery shopping, plan is an important part
―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
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
Discovery – Usual Products
Every time on regular grocery shopping, there are recurred items on shoppers’
lists
Conclusion: Usual products recur on shopping plan/ list
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
Portfolio by Dan Wu
Discovery – Mobile
Shoppers will choose the most convenient form at hand to make note
Shoppers will use audio to input items on the phone when they are in rush
Shoppers use shopping list as external memory
Conclusion: Mobile device is a convenient option to use shopping list and audio
input can be used to reduce input effort
UCD design of mobile grocery shopping list
―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
―I made on the piece of paper or made on the phone.‖--- Participant 6
―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
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
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
Task Analysis
Analyse user tasks
Use Visio for flow drawing
UCD design of mobile grocery shopping list
Portfolio by Dan Wu
Wireframe
Shopping list
Create shopping list
View and edit history
shopping list by
occasion
Smart input grocery
items
UCD design of mobile grocery shopping list
• Steps to create shopping list
Portfolio by Dan Wu
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
UCD design of mobile grocery shopping list
• Steps to add items from usual list
Portfolio by Dan Wu
List page
Tap the item once
for check out
Tap the item twice
for product detail
UCD design of mobile grocery shopping list
• Display of list
• Display of product detail
Portfolio by Dan Wu
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.
UCD design of mobile grocery shopping list • Steps of browse recipe
Portfolio by Dan Wu
Recipe Items
Standardize and integrate ingredients
on each recipe
Shopper can easily add items to
shopping list
UCD design of mobile grocery shopping list
• Ingredients display of recipe
Portfolio by Dan Wu
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
UCD design of mobile grocery shopping list
• Steps of choosing offers
Back to menu
Thank You
Portfolio by Dan Wu