janet lau's portfolio

20
DESIGN PORTFOLIO Janet Lau

Upload: janetlau123

Post on 01-Nov-2014

90 views

Category:

Design


0 download

DESCRIPTION

Janet's portfolio

TRANSCRIPT

DESIGN PORTFOLIOJanet Lau

I am a knowledgeable and insightful user experience designer, who enjoys designing products that are technically viable whilst fulfilling the user and business needs.

My achievements include: • The first person to receive the Citrix Design Hero award

for excellence in practising and advocating user-centred design methodologies

• Led the interaction design of both new and evolving Citrix products across web, mobile and desktop under challenging timescales

• Delivered intuitive designs by collaborating with key stakeholders including User Researchers, Content Strategists, Product Managers and Engineers

Collaborate with

Stakeholders

BRIEF INTRODUCTION

Deliver End-to-End

Design Solutions

Me

Lead Interaction Designs

Influence Product Strategy

• Analyse business and user needs• Understand technical requirements

and limitations• Gain inspirations from competitors

and role models

• Identify use cases• Focus on the 80% case first• Create user flows and wireframes • Build storyboards and prototypes

• Include stakeholders from the outset

• Communicate design rationale and foster discussions

• Ensure mutual understanding

Gather Data

Solve User Problems

Validate Early

DESIGN APPROACH

Designing for BYOD usersIntroduced a new self-service IT model which benefits both the users and the organisations.

Examples of personas, user journey, wireframes and mobile design.

Designing for IT administratorsDesigned a tool to create and manage enterprise app stores.

Examples of card sorting, heat mapping, heuristic evaluations and UI documentation.

Solving a real life problemApplied design thinking to uncover the needs of recent graduates in the workplace.

Examples of empathy map, needs statement, paper prototype and user testing.

RECENT PROJECTS

I

II IV

III

Designing for doctors and nursesProvided secure access to enterprise apps on any device.

Examples of user flows, wireframes, storyboards and mobile design.

I : DESIGNING FOR BYOD USERS

Motivation With the rising popularity of bring-your-own-device (BYOD), users demand to run enterprise apps but without IT taking control of their device.

Actions • Partnered with the CTO and the product manager to develop a new self-service concept

• Mapped out the anticipated user journey and brainstormed ideas along the way

• Engaged users and iteratively refined the user experience.

Results Introduced a new self-service IT model which benefits both the users and the organisations.

Users have the freedom to run enterprise apps on their own devices without contacting IT.

Increased employee satisfaction and productivity as well as a reduction in IT support calls.

Personas: Captured the characteristics of BYOD workers with a particular focus on Gen Y and executives.

User Journey: Developed through brainstorming meetings with CTO and Product Manager

I : DESIGNING FOR BYOD USERS

Wireframes: depicted the key screens and states.

The Home screen shows the user’s subscribed enterprise apps. Special attention was paid for handling the first use scenario because the user doesn’t have any subscribed apps at this stage.

User Testing: the wireframes were tested with users.

First time use Home screen – another design

First time use Home screen – an early design

Home screen after user has subscribed to some enterprise apps

I : DESIGNING FOR BYOD USERS

Wireframes:

The Store screen show the list of apps user can subscribe to. Special attention was paid for the transition between the Home and Store screen. Animations considered included sliding, flipping, paper curling.

User Testing: the wireframes were tested with users.

Store screen – another designStore screen – an early design

Store screen showing the search results

I : DESIGNING FOR BYOD USERS

Home screen initial state – final design

A large inviting visual to indicate where the app catalogue is.

Home screen with some subscribed app– final design

I : DESIGNING FOR BYOD USERS

App catalogue

Changed from a dedicated page to a pullout menu. The new design provides better context

Search

Embedded in the pullout menu

I : DESIGNING FOR BYOD USERS

II : DESIGNING FOR DOCTORS

+

The Brief Doctors and nurses from a top U.S. hospital needed a secure way to access patient records on their iPads.

Actions • Citrix partnered with RSA for a secure solution• I was the design lead, not just on Citrix but also on

the RSA interactions• Created an end-to-end design that worked on iPad

but also future proof for iPhone and other platforms

Results • Created a solution that is secure yet doesn’t compromise on usability

• Product shipped with all the design recommendations

• Doctors and nurses don’t need to worry about exposing sensitive patient data

• The user experience design became the foundation for other platforms

User flows: depicted the main steps involved in each user scenario.

Also a critical tool to see how the new interaction fits into the overall product.

Wireframes: depicted the key elements in the main steps of each user scenario.

Also used to illustrate how the screen should be presented in different states.

II : DESIGNING FOR DOCTORS

Storyboard: brought the user scenarios to life. A vital tool to validate design and gather feedback from stakeholders.

As the team was located in multiple countries, we relied heavily on virtual meetings. Having something we could all see and follow during meetings meant we had productive design reviews.

The storyboards were also used for presenting the end-to-end solution to our client, the U.S. hospital.

1. User taps on the Worx Home icon and opens Worx Home for the first time

2. User enters an UPN, server or email.

New user on a new device

4. WH prompts for location service. This covers both the RBA and published apps.

3. WorxHome prompts for user credentials to sign on to NetScaler Gateway.

II : DESIGNING FOR DOCTORS

The Brief Citrix Web Interface though hugely successful was aging. The team was tasked to build a new product, Citrix StoreFront, using the latest technology.

Customers are always reluctant to change, the new product needed to be compelling, going above and beyond what the old product offered.

Actions • Led the design since v1• Instead of re-implementing every feature of the old

product, looked at what users really want• Introduced unique selling points such as simplified

first use experience and seamless transition from PoC to production

Results • StoreFront has shipped, now in v2.5• Customers such as Credit Suisse has migrated to it• Endorsements from Citrix Technology Partner

“Start using StoreFront to find out how it works or fit into your environment. StoreFront is the way to go with new upcoming Citrix products or components.”

- Thomas Koetzing

III : DESIGNING FOR IT ADMIN

Cart sorting: Conducted before v1. Created cards based on the behaviour of the old product.

Useful to review the terminology and helped participants to draw out pain points from the old product.

Heat mapping: Conducted after the product has become more established. Part of a cross product exercise to ensure the overall Citrix experience was coherent.

The map shows a high level view of the user experience.

III : DESIGNING FOR IT ADMIN

Heuristic evaluations: Conducted on pre-release builds to ensure the product as a whole worked as intended.

I walked through the product with the key engineers, from installation, setup, error handling to accessibility and terminology. On average around 90% of the bugs raised at this stage were addressed before the product was shipped.

UI documentation: Used to ensure knowledge is shared not just to the engineers who implement the product but also Test, Localisation, Globalisation and Support.

It included the user flows, screens, conditions and error messages. This was also a tool for content strategist to document the final wording.

III : DESIGNING FOR IT ADMIN

The Brief Graduates are making the switch from students to young professionals. How do the new starters find the transition? How can you help?

Actions • Applied design thinking methodology to solve this real life problem

• Interviewed a new starter and uncovered her needs Brainstormed over 50 ideas

• Produced and tested 2 prototypes

Results • The new starter didn’t think she had a “problem” but was pleasantly surprised by the insights I uncovered and liked my innovative solutions.

• The prototypes were in the concept stage but could easily be evolved.

IV : NEW STARTER PROGRAM

Empathy map: Interviewed the new starter and built up an empathy map of her experience around finding jobs, first day at work etc. The left side of the diagram captures my observation, I inferred what she thought and felt (right side).

Needs statement: Uncovered the new starter’s needs based on the empathy map.

A summary of the problem I was trying to solve.

IV : NEW STARTER PROGRAM

Paper prototype 1: An app on a mobile device. I drafted the key screens and asked the new starter to try it.

Paper prototype 2: An app on a wearable device. I used the pink and yellow post-it notes to distinguish the two different modes.

IV : NEW STARTER PROGRAM

THANK YOUJanet Lau