1. l“
U S E R E X P E R I E N C E D E S I G N E R
J A D E N G
lukyng@gmail.com | 617-417-7706
Portfolio | June 2015 | New York
2. l“
I’ve always been fascinated with the interaction
between people, design and technology. My
thoughts center around how to make things
easier, and how to make them fun.
I love creating moments that bring delight.
Contents
My Process & Tools
Case Study: Zipcar Pool
Client Project: Chartbeat
What People Say
Contact
”
3. l“
MY PROCESS
Surveys
Interviews
Task Analysis
Heuristics
Contextual Inquiry
Brand/Business/Tech
Competitive
Comparative
Brainstorming
Sketching
Whiteboarding
Topic Mapping
Affinity Mapping
Personas
User Flows
User Stories
Site Maps
Flow Charts
MVP Features
Info Architecture
Wireframes
Prototype
Mockups
Presentation
Designing for UX begins with a plan.
RESEARCH SYNTHESIZE IDEATE DESIGN TEST
User Tests
A/B Testing
Paper Prototype
Annotations
4. l“
MY TOOLKIT Gadgets, gizmos, and means for design.
TrelloDrive
COMMUNICATE
Keynote MailChimp
Word PreziEvernote Dropbox
ORGANIZE
Analytics
TypeformExcel
ANALYZE
DESIGN
Illustrator Photoshop
Sketch 3 Omnigraffle
PROTOTYPE
Marvel POP
AxureInvision
5. l“
5
THE CHALLENGE
Many New Yorkers don’t own a car,
or even have a license, but they still
want to take trips out of the city,
whether to shop at an outlet mall or
go hiking.
OUR SOLUTION
Partner with zipcar to create a
feature that connects people for
sharing rides and activities.
MY ROLE
• Screener/Interviews
• Persona Development
• User Flows
• Feature Development
• Design Studio
• Flowchart/Sitemap
• User Testing: Prototype, Paper
Prototype & Card Sorting
• Responsive Mockups
• Keynote Presentation
A HIGHLIGHT
It was so rewarding when we
were testing and users
exclaimed, “I wish this was real!”
Zipcar Pool“Find Friends and Get to Where You Want to Go”
GO!
TEAMMATES
Jonah Erin
CASE STUDY
2 weeks
6. l“
Find Your Friends Connect With Strangers Carpool Can Leave City Multi-Day Trips Car Type
Meetup Carpool
Personal Car &
Meetup Driver
Uber Pool
Professional
Driver & Car
Carma Carpool Personal Car
RideScout
3rd Party
Options
Zipcar Pool
6
SURVEY FINDINGS
• More than 50% of our responders don’t
drive. 20% don’t have a driver’s license.
• Responders currently rely on asking
friends for a ride or taking public
transportation.
• People find others with similar interests
through friends and/or Facebook.
COMPARATIVE ANALYSIS
No existing platform connects friends and drivers with similar
interests without requiring someone to own a car or hire a driver.
Research Personas Features Design Test Deliver
58
Surveys
Collect data, identify
interview participants
17
Interviews
Validate opportunity,
determine user needs
INTERVIEW QUOTES
“Your behavior is kind of held
accountable when you have a mutual
friend with someone.”
“With how much technology has
advanced, it’s starting to feel less and
less weird meeting people online.”
12
Companies
SAMPLING
6
FEATURE COMPARISON
7. l“
7
DEVELOPING PERSONAS
Zipcar PoolResearch Personas Features Design Test Deliver
Map key points from interviews and organize to
discuss findings.
Stephanie Felix Alan
Likes to host trips and
make new friends.
“90% of the time you
meet up with weirdos,
but that 10% more than
makes up for that.”
Interested in whatever
his friends are up to.
“The easiest way to
make plans is to wait for
a friend to plan it.”
Wants to meet new people
but feels apprehensive
towards strangers.
“I’m a Meetup virgin
because I haven’t found
anyone to go with.”
Time-boxed session with personas in mind to explore the possibilities of
our feature. Free-association helped us think outside the box.
TOPIC MAPPINGUSER FLOWS
Flows for each user to brainstorm how they might work through
Zipcar Pool’s features.
ALAN
Carpool
Page
Click
“Activities”
Activities
Page
Click on a
Trip
Trip Page
Click
Driver
Driver
Profile
Return to
Trip
Trip Page Click “Join
Trip”
8. l“
8
FEATURE AFFINITY MAPPING MoSCoW PRIORITIZATION
Strategy for determining scope and defining MVP.
Must
• Join a trip
• Host a trip
• View profile
• Browse & search
• Choose preferences
Could
• ID validation
• Chat
• Location tracking
• Overnight trips
• Driver discounts
• 3rd party integration
• Environmental data
Should
• Read/write reviews
• Send messages
• Find friends
• See connections
• Approve passengers
• Upload trip image
Will Not
• Videos
• Manage expenses
• Manage cargo
Zipcar PoolResearch Personas Features Design Test Deliver
High
Priority
Low
Priority
Easy to
Implement
Hard to
Implement
We made decisions on what our platform
must, should, could, and will not not include.
Send A
Message
View Past Trips
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Find Cars By
Location
Reserve Page
Enter Filter
Options
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Click “Create
Carpool”
Create A Trip
Page
Enter Details
Trip
Confirmation
Page
Click “Confirm”
Your Trip Page
Click
“Reserve”
Confirmation
Page
Carpool Page
Click “Create A
Trip”
Browse By
Trip Page
Select Trip
Profile Page
Join Carpool
Search
Click image/
name
Save Trip
Find Cars By
Time
Find Cars By
Time
Find Cars By
Location
Find Cars By
Time
Find Cars By
Time
Events Find Cars By
Time
Find Cars By
Time
Activities
Create A Trip
Page
Enter Details
Reserve Car
Page
Click
“Reserve”
Click “Skip For
Now”
Trip
Confirmation
Page
Click “Confirm”
Your Trip Page
Share by FB/
Twitter/Mail
Contact
Organizer
Edit Trip
Send A
Message
Find Cars By
Time
Find Cars By
Time
Search Results
Page
Message
Group
Approve/
Decline
Passengers
Click image/
name
Share by FB/
Twitter/Mail
Profile Page
View Past Trips
SITE FLOWCHART
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Find Cars By
Time
Find Cars By
Location
Reserve Page
Enter Filter
Options
Click “Create
Carpool”
Create A Trip
Page
Enter Details
Trip
Confirmation
Page
Click “Confirm”
Click
“Reserve”
Confirmation
Page
Carpool Page
Click “Create A
Trip”
Browse By
Trip Page
Select Trip
Profile Page
Join Carpool
Search
Click image/
name
Save Trip
Find Cars By
Time
Find Cars By
Time
Find Cars By
Location
Find Cars By
Time
Find Cars By
Time
Events Find Cars By
Time
Find Cars By
Time
Activities
Create A Trip
Page
Enter Details
Reserve Car
Page
Click
“Reserve”
Click “Skip For
Now”
Trip
Confirmation
Page
Click “Confirm”
Your Trip Page
Share by FB/
Twitter/Mail
Contact
Organizer
Send A
Message
Find Cars By
Time
Find Cars By
Time
Search Results
Page
View Past Trips
Ideation on how to integrate our
features and persona needs in to
a flow. We then chose 4 primary
pages to begin designing.
INITIAL PAGES
• Carpool Homepage
• Trip Page
• Profile Page
• Create a Trip Page
9. l“
9
DESIGN STUDIO CARD SORTING
This exercise helped us to develop the
ideal layout for our initial screens.
FIRST ITERATION SCREENS
Zipcar PoolResearch Personas Features Design Test Deliver
Create a Trip PageProfile PageTrip PageCarpool Homepage
PROBLEM: We had difficulties
finalizing the design since we
couldn’t agree on the organization of
information.
SOLUTION: We had potential users
card sort so we could understand
what layout would be most valuable
and intuitive to them.
10. l“FLOW REDESIGN
PROTOTYPE TESTING
We implemented a “checkout”-like
breadcrumb trail for guiding the
process. Instead of rebuilding the
prototype, we performed quick paper
tests to validate our assumptions.
Zipcar PoolResearch Personas Features Design Test Deliver
10
Create a Trip
Page
Reserve Car Page Car Confirmation
With “Go Back to
Your Trip” Button
Create a Trip
Page (again)
Trip Confirmation
Page
Your Trip Page
6 PAGES
Create a Trip
Page
Reserve Car Page
With “Skip For
Now” Button
Confirmation
Page
Your Trip Page
4 PAGES
LESSON LEARNED: We
moved towards high-fidelity
too quickly. Testers were
less open to giving
feedback while seeing a
“finished product”. It was
also more difficult to ask
about their expectations.
FLOW CONFUSION: It was
debated whether a car had
to be booked when a trip
was made. We tried to
accommodate both and it
caused more confusion.
Original “Create a Trip” Flow
Updated “Create a Trip” Flow
11. l“
RESPONSIVE MOCKUP
STORYBOARD
Tell a story to illustrate the challenge and build empathy.
Zipcar Home Sign Out
Reserve
British English Canadian English
Reserve A Car
Carpool My Stuff Help Zipster
Find Cars By Time
Find Cars by Location
Search
Search Results
Create An Event
Events
Activities
Profile
EventsEventsTrips
My Account
My Reservations
My Carpools
Friends Feed
Upcoming Trips
Past Trips
Frequently Asked
Questions
Zip Car 101
Zip Safely
Member Benefits
Carpool 101
My Profile
My Statement
EventsEventsTrips
Lost & Found Forum
Contact Us
Refer A Friend
Gift Certificates
Jobs
EventsEventsCars
EventsEventsCars
Saved Trips
Color Key
Existing Pages
New Pages for Carpool
Pages to be added
Zipcar PoolResearch Personas Features Design Test Deliver
SITEMAP
Shows where the new pages for Zipcar Pool would be and what
other pages would need updates.
RESEARCH
REPORT
PROTOTYPE
Flows for hosting a trip and joining a trip.
11
Click
Me!
12. l“
12
THE CHALLENGE
The usability of Chartbeat’s “site and settings”
pages and user management system has not scaled
to meet the needs of larger clients.
OUR SOLUTION
Research and redesign that addresses users’
frustrations with missing functionality, inability to
locate features, confusing navigation and frequent
errors.
MY ROLE
• Stakeholder Interviews
• Comparative Analysis
• User Type Development
• Feature Development
• Design Studio
• Wireframes
• User Flows
• Screen Flows
• Paper Prototype Testing
• High-Fidelity Mockups
• Keynote Presentation
A HIGHLIGHT
This project was less about user personalities and
more about on how to get a task done. Our focused
turned towards technical capabilities and ease of
use, rather than experiential design.
Chartbeat“Make the work they do simple and intuitive”
Surah Faigy
TEAMMATES
CLIENT
PROJECT
2 weeks
13. l“
13
COMPETITIVE/COMPARATIVE ANALYSIS
ChartbeatResearch Synthesis Design Flows Test Deliver
PROJECT PLAN
We had a kick-off meeting to learn about Chartbeat and their various products.
Incredibly simple but lacks
granularity in setting
permissions.
Impressive level of
granularity but is complex
and difficult to learn.
We interview stakeholders to learn about their needs and pain points. We
couldn’t speak with actual users, but Chartcorps , their customer service
team, was able to serve as the voice of the users.
Week 1 - Research
❖ Kickoff Meeting
❖ Competitive Analysis
❖ Comparative Analysis
❖ User Flows
❖ Stakeholder Interviews
❖ Refine Scope
❖ User Types
Week 2 - Design
❖ Feature Prioritization
❖ Design Studios
❖ Wireframes
❖ Stakeholder Feedback
❖ Wireframe Iteration
❖ User Flow
❖ Paper Prototype
❖ User Testing
❖ Annotate Wireframes
❖ Research Report
❖ Invision Prototype
❖ Client Presentation
Week 3 - Test & Deliver
10
Stakeholders
7
Interviews
14. l“
14
INTERVIEW SYNTHESIS
FEATURE & PERMISSION RESEARCH
ChartbeatResearch Synthesis Design Flows Test Deliver
SYSTEM NEEDS
Section
O
bservation
StakeholderThoughts
❖ Edit groups of users
❖ Bulk add users
❖ Export user data
❖ Sort users into groups
❖ Ability to identify admins at a glance
❖ Remove inactive users from list
❖ Combine “Author” and “Editor” roles
❖ “Unbury” alerts
❖ Notification feed
❖ Remove broken links
A spreadsheet to organize and understand everything we heard.
This aided in identifying trends.
Section
Features
Permission)Key)
)
View)))))))))))))))Can$only$see$
Par/al)View)))Can$see$some$
No)View))))$$$$$Can’t$see$at$all$
Edit))$$$$$$$$$$$$$$Can$change$state$
$$
UserTypes
&
Perm
issions
N
otes
We analyzed existing features and proposed features to delineate
the level of access each user role had or will have.
USER TYPES
We opted for user types since
the app is only accessible by a
small group of clients and the
work they’d do is very
technical.
Our focus turned towards their
job type, goals, and pain
points. We also created user
stories to help empathize with
their tasks.
Owner
Financial Manager
All Access
Administrator
Editor / Team Leader
User Management Access
User
Author / Content Creator
View Data Only
15. l“
15
FEATURE PRIORITIZATION High Priority
✤ Help text
✤ Batch editing
✤ Batch adding
✤ Hide inactive
✤ Include user’s job title
Med Priority
✤ User groups
✤ Hide inactive domains
✤ Batch deleting
✤ Batch adding to groups
✤ User activity
✤ Alerts and news feed
We prioritized features and
provided an updated scope.
After reviewing, our client
asked us to “dream big” not to
put less emphasis on
implementation.
DESIGN STUDIO VERSION 1 SCREENS
ChartbeatResearch Synthesis Design Flows Test Deliver
Low Priority
✤ Holistic product integration
✤ Developer access
✤ Badges for roles
✤ Export user data
✤ Homepage site caps editing
✤ Force 2-factor authentication
Sites and Settings Homepage Alerts and Notification Page User Management Page
All Products
Global Nav
Quick Links
Tabbed Pages
User Groups
Concurrents
Editing
Notification
Feed
Help Text
Batch Controls
We decided to incorporate
all the features that were
identified, except for the on-
boarding experience.
16. l“
16
MID-PROJECT MEETING
ChartbeatResearch Synthesis Design Flows Test Deliver
A COMPROMISE: While our
client’s primary objective was
research and brainstorming, we
needed to guide the project to
complete the UX process and
have something to deliver.
We decided on a revised scope
where we would explore more
user flows but then narrow down
to a few to build and test.
FEEDBACK SESSION
The stakeholders gave us input to
guide our second iteration.
❖ Confusing button and tab navigation
❖ Notifications could drop too far down
❖ Let users be in more than one group
❖ Use additive permissions
❖ Locking users is not intuitive
❖ Inactive users can be deleted
❖ Use pre-attentive variables
❖ Include more options to undo
✤ Add a User
✤ Edit a User
✤ Delete a User
Add a User
Home
Click Add/
Edit User
Button
User
Management
Page
Click Add
Button
Personal
Info FormClick User
Management
Link
Fill Form
Fields
Choose
Permissions
Add to a
Group
Click Save Confirmation
Page
Click Return
to User
Management
t
Add to Groups
Job Title
Role
First Name
Last Name
Phone
Email
t
Access to Ads
Access to
Headlines
Force Two-Factor
Domain Access
Level
Video Access Level
✤ Batch Add
Users to Group
✤ Edit Group
Permissions
✤ Delete Users in
a Group
✤ Add a Group
✤ Edit a Group
✤ Delete a Group
✤ Export User Data
✤ Buy More Seats
11
User
Flows
17. l“
17
VERSION 4: USER MANAGEMENT MEDIUM FIDELITY SCREENS
ChartbeatResearch Synthesis Design Flows Test Deliver
With so many screens, we chose to quickly paper
test the flows rather than build a prototype.
7
Flows
40
Screens
5
Testers
All Users View Group View New User Entry
Color Coded
Groups
User Data
Quick Group
Adds
Batch Delete
Add User
Batch Controls
Group Select
Collapsed
Permissions
PROTOTYPE TESTING
18. l“
18
ChartbeatResearch Synthesis Design Flows Deliver
BEFORE REDESIGN
Flows for changing group permissions and adding a new user
PROTOTYPERESEARCH REPORT
MOCKUP
Vertical navigation, horizontal navigation and “sites
and settings” features integrated in to one side bar.
DESIGN FILES
Click
Me!
19. l“
19
Jonah Osawa,
UX Designer
“Always open to alternative ideas and
made an awesome template for our
keynote….Upbeat even after hours and
hours of work! Makes collaborating
enjoyable.”
“Jade is a “people-person.” She
is very personable, friendly and
is very well-liked by customers
and business partners.”
Jen Bruno,
Manager at AXOR
“Working with Jade has
inspired me to set higher
goals for the showroom.
Because she was solution
driven and not problem
focused, she helped me
implement solutions for
many existing issues.”
Erin O’Hara,
UX Designer
“She’s a natural leader without
being pushy or bossy. She
never seemed stressed or
overwhelmed and that helped
keep me more grounded.”
Virginia Guillian,
Manager at TOTO
“She thought outside the box and brought
interesting and innovative ideas to the table,
which directly increased showroom traffic and
helped with sales.”
Alison Hines,
Former Colleague
