Portfolio dan wu

34
Portfolio Dan Wu Portfolio by Dan Wu

description

 

Transcript of Portfolio dan wu

Page 1: Portfolio  dan wu

Portfolio

Dan Wu

Portfolio by Dan Wu

Page 2: Portfolio  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

Page 3: Portfolio  dan wu

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

Page 4: Portfolio  dan wu

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

Page 5: Portfolio  dan wu

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

Page 6: Portfolio  dan wu

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

Page 7: Portfolio  dan wu

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

Page 8: Portfolio  dan wu

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

Page 9: Portfolio  dan wu

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

Page 10: Portfolio  dan wu

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)

Page 11: Portfolio  dan wu

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

Page 12: Portfolio  dan wu

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

Page 13: Portfolio  dan wu

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

Page 14: Portfolio  dan wu

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)

Page 15: Portfolio  dan wu

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

Page 16: Portfolio  dan wu

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

Page 17: Portfolio  dan wu

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

Page 18: Portfolio  dan wu

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

Page 19: Portfolio  dan wu

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

Page 20: Portfolio  dan wu

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

Page 21: Portfolio  dan wu

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

Page 22: Portfolio  dan wu

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

Page 23: Portfolio  dan wu

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

Page 24: Portfolio  dan wu

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

Page 25: Portfolio  dan wu

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

Page 26: Portfolio  dan wu

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

Page 27: Portfolio  dan wu

Portfolio by Dan Wu

Task Analysis

Analyse user tasks

Use Visio for flow drawing

UCD design of mobile grocery shopping list

Page 28: Portfolio  dan wu

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

Page 29: Portfolio  dan wu

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

Page 30: Portfolio  dan wu

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

Page 31: Portfolio  dan wu

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

Page 32: Portfolio  dan wu

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

Page 33: Portfolio  dan wu

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

Page 34: Portfolio  dan wu

Thank You

Portfolio by Dan Wu