luke's portfolio

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

PortfolioKe Lu’s Selected Work

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

Ke LuI am an enthusiastic and initiative UX Designer/Consultant. I am working closely with my colleagues and clients providing my UX advise and design for multi-platform products in different industries.I commit myself into user experience design for many years and have rich experiences in Business Development, Requirements Analysis, User Research, Data Analysis, IA, Interaction Design, Usability Testing, and Project Management. I have my taste in art and a good understanding of development. Also I am a logical thinker who is good at finding the key elements in complex information and hope to provide simple design for users.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

2015• CPIC E-commerce Website• CPIC Group Client Remote Management

Platform• CPIC Client Resource Sharing Platform• Konica Minolta PSWC Optimization• Johnson & Johnson Intranet Portal• China Minsheng Bank Project Management

Portal• China Construction Bank CRM Mobile App• Roche eProcess System• Pactera Telematics Platform• Pactera Knowledge Management System• Pactera HR Management Platform

2014• Wanda Hotel & Resorts Intranet Portal• Bank of Shanghai Retail & Credit System• Bank of Shanghai Backend System User

Experience Design Guidelines• Bank of Hangzhou Mobile Banking App• Konica Minolta Legal Storage Optimization• China Everbright Bank Private Banking System• Ericsson Broadcast Management Platform• SAIC Mobile App Usability Testing• Alibaba Alike E-mail Transfer Design• Sony Smart TV UX Optimization

Clients & Projects

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

Show Cases5 of my completed projects will demonstrate my competency to work as an exceptional UX designer

CPIC E-Commerce Platform

Ericsson Broadcast Management Platform

SAIC Mobile App Optimization

Konica Minolta PSWC Optimization

Bank of Hangzhou Mobile Banking App

Key Words: Responsive Design, Mobile, Cognitive Path

MAR. 2015

CPICE-COMMERCE

PLATFORM

5

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u6

Background

Major objective and source of

users

GIFT REDEEMSell and provide products redeem

online

E-COMMERCEResponsive

website & HTML mobile site

RESPONSIVE DESIGN

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u7

Competitive Analysis

Have analyzed major e-commerce websites to understand what information should be included in each process and why.— Navigation— Shopping Cart— Search — Product Detail— Personal Center— Order— Icons— Events— Banner

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u8

Persona & Scenario

BackgroundAlan is a CPIC insurance holder who just received a voucher from CPIC.He is notified to login to Taishenghuo website to redeem the product.

ObjectiveRedeem the gift product by inputting the code he received on the website.

User Journey

Insert the Code

• Users need to knows where to redeem once entered the site

• Users may give up if the first step can’t lead them to what they want

Register & Login

• Register & Login is a required step from the client but an annoying thing to the user

• Users should feel that register is to help them complete gift redeem instead of preventing them from it

Select Product

• Provide important information to users to help them select

• Users should be able to filter the products

Finish Shopping Process

• Provide consistent experience as normal purchase

• Provide an exclusive place for users to track redeemed products

Characteristics

Age: 35Gender: MaleOccupation: Project ManagerOnline Shopping Experience: Sometimes

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u9

Contradiction

“To acquire users’ data, we need users to register before redeeming”

“I just want to redeem the gift, why I have to register? It’s so complicated”

JOE MONTEClient

DAVID COLEUser

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u

Original Redeem Process User Flow

10

1. Homepage 2. Gift Redeem Center 3. Register/Login 4. Insert Redeem Code

Where is the entrance? Why do I need to register? Where do I insert the code?

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u11

Solution – Be Obvious

Analyzed users’ cognitive path. The first thing users consider is: “I got the code, now where do I input it?”

— A dedicated area for gift redeem.— Users are seeking for a place to

insert their code, and here we provide it (Phone number is bound with the redeem code).

— Delete useless pages.— Be cautioned that users may give up

if they are asked to sign up before redeem the gift.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u12

Solution – Play A Little Trick

The redesigned page allows users to participate in redeem process from first page. Once users enter the phone number, they are already in the process and no matter what happened there, users will think it’s part of redeem process.

Using “goal-gradient effect” to increase user participation rate. Users will find out that they have already made progress to step 2, they have more motivation to complete the task.

Mobile No. (account No.) is auto filled in. Verification code is auto sent. Users only need to fill in two text fields.

Check my article about this interesting solution:https://medium.com/@lukeleeco/a-case-of-design-psychology-the-tricks-that-we-use-in-the-design-af59bc85ee95

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u13

Wireframe

1024 px 1280 pxBreakpoint

1200 Hybrid grid.

Responsive contents & responsive modules.

Ready to see responsive design wireframe

Description of responsive rules in every page.

Yes! It’s responsive!

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u14

Wireframe

No complicated documents, all in one wireframe file

Explanations of blank status, variations. Trouble free for front dev.

Who wants to see documents?

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u15

Wireframe

Web app version is also available on your mobile phone.

Homepage Shopping Cart Store Order Page in 6 Status

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u16

Final Work

Working closely with visual designers to create pixel perfect design.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u17

Management

Schedule Management & Quality Control.

Key Words: Back-end System, Rapid Prototyping, High Fidelity

Prototype, User Centered Design

Dec. 2013

18

Ericsson BroadcastManagement

Platform

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u19

Requirements Analysis

BrainstormingIdentified key user groups with Personas and used Use Cases to identify key tasks

and actions to be performed by each persona.

Flow ChartClarified full scope of each user groups’

work and tasks in the entire process.

SketchesWe brainstormed over 4 solutions to find the best way to solve client’s issue and

created concepts.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u20

User Centered Design

The system consists of 4 main features for different user groups. We focused on each user group’s needs that we don’t create a page for all users, but a clean and simple entrance for different user group to enter to their work station.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u21

From Wireframe to Visual Design

Providing shortcuts for users to access important information.

Instead of using multiple colors to indicate different area groups, we only show colors when mouse on the area. We highlighted the shared area so users know it belongs to multiple area group.

Internet of Vehicles

User Research

Usability Testing

Mobile App

SAIC

Mobile App OptimizationSep. 2014

22

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u23

Background

To evaluate the usability of its

mobile app

Usability Testing The product is

exclusively for Thai market, we test on

Thai users

Thai MarketProvide suggestions for improvements based on findings

Optimization Plan

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u24

Working Process

• Understand product background

• Who are the users• Users’ characteristics• Competitors’

products• Personas• Thai culture research• Expert Evaluation

User & Market Research

• Screener• Pre-test

questionnaire• Post-test

questionnaire• Note taker template• Moderator’s guide• Consent forms• Test plan• Scenarios

Documents Preparation

• Prepare location• User recruitment• Prepare devices• Plan, schedule the

users, clients, test, and debrief

• Demo tests

Testing Preparation• Conducting tests• Analyzing findings• Provide

recommended design solutions and alternative solutions

• Writing a report

Testing & Reporting

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u25

User Research Participants

7 Thai participants having the following profile characteristics were deliberately selected and conducted the user research session.Audience TypeTOTAL(PATICIPANTS) 7Low income-up to 5,000RMB 2Middle income- up to 15,000 3High income- over 15,000 2

Internet UsageTOTAL(PATICIPANTS) 70 to 20 hrs. wk. 021 to 40 hrs. wk. 540+ hrs. wk. 2

AgeTOTAL(PATICIPANTS) 718-25 226-39 540-59 060-74 0

GenderTOTAL(PATICIPANTS) 7Women 5Men 2

Smartphone OSTOTAL(PATICIPANTS) 7Android 4IOS 2Windows 1

Common Activities On Mobile (multiple)TOTAL(PATICIPANTS) 7Social Media 7Email 5Shopping 6Downloading Apps 6

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u26

Figuring Out The IA

The client only provided the paper design, we organized and structured them in order to understand the architecture and flow.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u27

Figuring Out The IA

We have designed 12 test cases and we carefully measured several metrics such as task completion time, number of errors, satisfaction rates, number of steps, etc to understand how well they could complete the tasks.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u28

Major Findings/Issues

1. Language - along most of the pages we discovered problems with the text, spelling mistakes and grammar problems

2. Navigation - registration processes were too long and required repeated information

3. Descriptions - not enough information was provided and the users were confused in many places, especially in regards to professional terminology

4. Localization - the design was created based on Chinese users’ standers. Many elements interpreted differently when it comes to the Thai audience such as: the map, icons, structure and even the colors

5. Information Architecture - the location of the main buttons didn’t stand out, size was too small and the color blended in the background. Too much text was used in places were icons could have been more beneficial

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u29

Analysis & Documentation

We identify the issues that we found during the research, provide the data and figures to support our findings, and provide optimization recommendations respectively.The report was delivered to client’s design team and they had re-designed accordingly. We then had a usability testing session similar to user research session.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

Konica Minolta

PSWC Optimization

Information VisualizationExpert Evaluation

30

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u31

Background

Provide design optimization proposal

through expert evaluation

Design OptimizationThe client knows what features users use, but not the behavior and

motivation

Who’s the Users?Our design is required

to fit in both PC & Tablet

PC & Tablet

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u32

Background

As we found out the client didn’t understand users fully enough, we were unable to identify our optimization direction. Therefore we built up the personas together with the client to we have a common understanding.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u33

Expert Evaluation

Every page of the system had been evaluated and identified usability issues according to my expertise and provide recommendations for optimization.

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u34

Optimization Directions

Applying Gestalt theory to re-design the layout

Layout

Icons helps information to be more understandable

Iconology

All elements are optimized to be easy to touch on mobile devices

Style & Visual

System always provides feedbacks so users won’t get lost

System Feedback

Data and stats are easier to understand with graphs and charts

Information Visualization

Using understandable natural language instead of technical words

Writing

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u35

Layout Analysis

1. Feature Area and Supplementary Area occupied too much vertical space, users have to scroll to see more important information

2. The information in Supplementary Area is separated, similar information is too far from each other

A. The icons below look similar visually, and belong to the same group, but they are placed upper-right, lower-right and left 3 positions

B. Normally logout button is close to user name so users can link them automatically

3. Menu space is not enough especially in admin’s view, it is more difficult to use in a tablet

System Info Supplement Info

L1 & L2 Menu

Content

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u36

Final Visual Deliverables

Aug. 2014

Bank of Hangzhou

Mobile Banking AppIA Optimization

Mobile Banking

Mobile App

37

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u38

Background

Banking is one of the most difficult services we

deal with everyday.

Complex Bank BusinessShall we talk more about

sensational aspects instead of providing dull

features?

Bank’s App All Look Similar The idea of the app is

completely transformed into a different concept

Completely Changeover

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u39

Competitive Analysis

Which one do you think is special? Are there any differences?

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u40

Competitive Analysis

— We analyzed mobile bank’s current information architecture and worked out unreasonable hierarchy

— According to our user research results, we re-organized IA to make it more sensible to users

— New IA can help users understand where features are, where they are, and how to navigate

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u41

Wireframe

- Have created 100+ clickable interactive wireframe pages for users to test- Based on testing results we optimized our design

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u42

Home Page Design

ComparisonHomepage

VS

We designed sidebar + tabbar specially for complicated bank services. Users are able to find what they need and switch between functionsBased on user research, we prioritized main features for users

Differentiate our icons with other APPs to create better recognition

Using flat design, bright, clean color palettes to delight our users and broadcast the brand identity

1

2

3

4

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u43

IA Optimization - Accessing My Account (Old)

1. Deep hierarchy. Have to click four times to see details.2. Users have too many choices. The most frequent used one is hidden.3. Confusing navigation. Tabbar appears in sub menus but not in the homepage, and users are easy to misclick it.

Mobile Banking Account Management Account Summary My Account Account Detail

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u44

IA Optimization - Accessing My Account (New)

Optimized path to access My Account page. We focus on users’ main objectives, move secondary activities afterwards such as card selection and have three main features (My Account, Debt, Credits) into one page.

My Account Overview Credits CheckDebt Overview

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u45

IA Optimization – Transfer (Old)

Normal TransferTransfer Cross Banks1. As one of the most frequent used feature, it is hidden very deeply, causes low efficiency.2. Users have a simple task that is to transfer but they have to understand different types of transfer and jargons.3. Confusing navigation that tabbar is unnecessary in transfer page.4. Icon and layout provide no help and misleading users.

Mobile Banking

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u46

Clear Form Completed ButNot A Dead End

Easy Card Selection

IA Optimization – Transfer (New)

1. The system should make choices for users according to users’ input2. Satisfy users’ primary needs (transfer) first then provide compulsory actions (transfer type)3. One-way process to avoid back and forth and focus on current task

Ke Lu’s Portfolio – My Selected Works E-Mail: kelu_chongqing@hotmail.com l Phone: +86 138 1607 6191

C P I C E r i c s s o n S A I C K o n i c a M i n o l t a B a n k o f H a n g z h o u47

Other Designs

Thank You

© 2015 Ke Lu