jade ng ux portfolio - june 2015
TRANSCRIPT
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
l ukyng@gmai l .com | 6 17 -417 -7706
Por t fo l io | June 2015 | New York
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
”
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
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
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
l“
Find Your Friends Connect With Strangers Carpool Can Leave City Multi-Day Trips Car Type
Meetup CarpoolPersonal Car & Meetup Driver
Uber PoolProfessional Driver & Car
Carma Carpool Personal Car
RideScout3rd 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
SA
MP
LIN
G
6
FEATURE COMPARISON
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”
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/nameSave 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
ActivitiesCreate 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
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/nameSave 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
ActivitiesCreate 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
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
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.
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
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!
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 PROJECT2 weeks
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
l“
14
INTERVIEW SYNTHESIS
FEATURE & PERMISSION RESEARCH
ChartbeatResearch Synthesis Design Flows Test Deliver
SYSTEM NEEDS
Sectio
n
Obse
rvat
ion
Stake
holder T
houghts
❖ 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.
Sectio
n
Feature
s
Permission)Key))View)))))))))))))))Can$only$see$Par/al)View)))Can$see$some$No)View))))$$$$$Can’t$see$at$all$Edit))$$$$$$$$$$$$$$Can$change$state$$$
User T
ypes
& Perm
issio
ns
Notes
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
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.
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
tAdd to Groups Job Title Role First Name Last Name Phone Email
tAccess 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
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
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!
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
l“Let’s work together!
/in/LukyJadeNg
617.417.7706
LukyNg@gmai l .com
@LuckyJadeNg