Janet Lau's Portfolio

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
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
BRIEFINTRODUCTION
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
DESIGNAPPROACH

Designing for BYOD users
Introduced 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 administrators
Designed a tool to create and manage enterprise
app stores.
Examples of card sorting, heat mapping, heuristic
evaluations and UI documentation.
Solving a real life problem
Applied design thinking to uncover the needs of
recent graduates in the workplace.
Examples of empathy map, needs statement,
paper prototype and user testing.
RECENTPROJECTS
I
II V
III
Designing for doctors and nurses
Provided secure access to enterprise apps on
any device.
Examples of user flows, wireframes, storyboards
and mobile design.
Business success using service design
Put the user at the heart of everything.
Examples of customer journey map, data
dashboard and sentiment chart.
IV

I:DESIGNINGFORBYODUSERS
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

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

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

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

App catalogue
Changed from a dedicated page to a pullout menu. The
new design provides better context
Search
Embedded in the pullout menu

II:DESIGNINGFORDOCTORS
+
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.

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.

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 have migrated to it
• Endorsements from Citrix Technology Partner
“Start using StoreFront to find out how it works
or fits into your environment. StoreFront is the way to
go with new upcoming Citrix products or components.”
- Thomas Koetzing
III:DESIGNINGFORITADMIN

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.

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.

The Brief Workshare, a leading provider of enterprise
collaboration applications, is committed to improving
how they deliver products and services to their users.
The mission is to define a world-class customer
experience and align the company around a
consistent experience.
Actions • Involved stakeholders throughout the process to
gain buy-ins and engagement
• Defined an experience map any person has during
their relationship with Workshare
• Introduced an expectation model to set goals and
create measurable scores
Results • The expectation model was applied for the latest
flagship product launch marketing campaign.
• Brought the focus of the onboarding experience
back to the user.
• The key measure dashboard and sentiment chart
became the new “Voice of the Customer”.
IV:SERVICEDESIGN

Stakeholder engagement: Stimulated
discussions around customer improvement
and focusing on the users through 1:1
interviews and workshops with the
executives and leaders in:
Marketing, Sales, Customer Success,
Products and Support.
IV:SERVICEDESIGN
Experience map: Designed from scratch, the 1-page experience map captures the
end-to-end customer journey, key measures and user sentiment.
To ensure relevance, each phase of the customer journey is owned by a “champion”.

Data dashboard: Workshare is a data-
driven company so a key metrics
dashboard is essential to the adoption
of the experience map.
Built a dashboard to track and
communicate the success and failures
of the user experience.
Sentiment chart: Once again quantitative
data is critical to the business. A single
survey is designed and used across touch
points to gauge the user sentiment.
IV:SERVICEDESIGN
GETTING TO KNOW YOU FIRST DATE FALLING IN LOVE MARRIED LIFE GROWING THE FAMILY
AWARENESS
DISCOVERY
UNDERSTAND
EVALUATE
PROPOSAL
PURCHASE
PLAN
DEPLOY
ADOPTION
ENGAGEMENT
ACCOUNT MGMT
ISSUE MGMT
INCIDENT MGMT
UPGRADE CHANGE
RENEWAL
CROSS SELL
UP SELL
REFERENCE
REFERRAL
USER
ENGAGEMENT

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.
V:NEWSTARTERPROGRAM

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.
V:NEWSTARTERPROGRAM

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.
V:NEWSTARTERPROGRAM

Janet Lau's Portfolio

More Related Content

What's hot

Similar to Janet Lau's Portfolio

Recently uploaded

Janet Lau's Portfolio