Download - Luke's portfolio

Ke Lu’s Portfolio – My Selected Works E-Mail: [email protected] l Phone: +86 138 1607 6191

PortfolioKe Lu’s Selected Work


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.


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


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


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



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



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



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


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?



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.



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

https://medium.com/@lukeleeco/a-case-of-design-psychology-the-tricks-that-we-use-in-the-design-af59bc85ee95



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!



Wireframe

No complicated documents, all in one wireframe file

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

Who wants to see documents?



Wireframe

Web app version is also available on your mobile phone.

Homepage Shopping Cart Store Order Page in 6 Status



Final Work

Working closely with visual designers to create pixel perfect design.



Management

Schedule Management & Quality Control.

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

Prototype, User Centered Design

Dec. 2013

18

Ericsson BroadcastManagement

Platform



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.



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.



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



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



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



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



Figuring Out The IA

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



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.



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



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.


Konica Minolta

PSWC Optimization

Information VisualizationExpert Evaluation

30



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



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.



Expert Evaluation

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



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



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



Final Visual Deliverables

Aug. 2014

Bank of Hangzhou

Mobile Banking AppIA Optimization

Mobile Banking

Mobile App

37



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




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




— 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



Wireframe

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



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



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



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



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



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



Other Designs

Thank You

© 2015 Ke Lu