UXUXDESIGNKIT

.COM
SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW
 2
WHAT IS UX DESIGN? INTERACTION
DESIGN
“UX Design” is a convention(al) term used to describe /

INF CHIT
encapsulate a cross section of design methodologies and best

AR
SIG E
DE RFAC

OR EC T
N
practices used to build websites and applications (software).

MA UR
E
INT

TIO E
N
See Venn Diagram to the right.
UX
Let’s look at another definition:
http://nngroup.com/articles/definition-user-experience

TENGY

T BI
US
T

E
CO RATE

S
A
TIN IT Y
N

L
"User experience" encompasses all aspects

G
ST
of the end-user's interaction with the
company, its services, and its products.” RESEARCH

WHO ARE UX DESIGNERS?

UX designers come from a wide variety of backgrounds. Many UX
designers come from web or graphics design professions but
surprisingly other UX designers didn’t start within those fields.

Some UX designers had their start in “library sciences” where

they study taxonomy (also known as the science of how to best
catalog/cateogrize information).

Also some UX designers start off as “front end” (HTML/CSS)

developers. They want to learn and practice UX to make better
web sites and apps.

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 3
WHY USE THIS UX DESIGN KIT?
1. Get the team on the same page

2. Helps you to deeply understand your customers including their behaviors, attitudes, pains, needs, and
aspirations - which will help you design the right solutions.

3. You’re less likely to revisit or question your decisions 1-2 months from now
and re-do work.

4. You’re taking advantage of the collective uncountable amount of expert hours that others in this field
have helpe formulate these hand outs compiled from various sources.

HOW TO USE THIS KIT

There isn’t a “correct” or one way to use this kit. Try our suggestions first and adapt to fit your team’s
personality and style.

We suggest with starting with a Persona. Then create the Empathy Map on this persona.

Then create the User Journey to understand every step of your customer as they find and interact with
your product/website/app.

Then fill out the Business Canvas to validate your business model. Then fill out the Timeline with
some deadlines.

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 4
HOW THE UX DESIGN PROCESS WORKS
PRODUCT/ SERVICE / PROJECT

(Who are you designing for? Helps you understand the user.)
(Why? Understand what the user of your
PERSONA & EMPATHY MAP
product/service goes through start to finish.)
(Why? Helps you figure out how to
USER JOURNEY
turn your ideas into a viable business)

BUSINESS CANVAS
IN PROBLEM REFRAMING
THIS
KIT

(Why? Helps you understand

the correct problem and come up
Concept Testing and other UX research (e.g. Card Sorting) with better solutions)

Analyze everything above and then

create Product “Features” (solutions) “Road Map” (Schedule) that may fit
the needs of your Users

Wireframes Code
Pro Tips:
Continuously audit
these designs against
• Personas (A more comprehensive
• User Journey version with checklist of this
• Business Canvas Visual design Stage & Deploy is on “Timeline” page)

Test

Launch
 5
USER CENTERED APPROACH

DISCOVER TURE INTO PERSONAS

P
CA

USERS/CUSTOMERS DESIGN (& DEVELOP)

• OBSERVE
• LISTEN
• LEARN

• USE PERSONAS TO
EVALUATE REFLECT ON:
OUR CUSTOMER BEHAVIORS, PAIN-

KC
POINTS,

BA
ED
ASPIRATIONS
FE
O R • RE/FRAME
• TEST CONCEPTS KF (BRAINSTORM)
AS
• MEASURE RESULTS CONTINUOUSLY • SKETCH CONCEPTS
• IMPROVE DESIGNS

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 6
WHAT IS A PERSONA?
A persona is a representation of a user, typically based off user research and incorporating user
behaviors, aspirations, painpoints, needs, and interests.

Provisional personas are used when there is no money or time to create true research based
personas – they are based on secondary research and the team’s educated guess of who they should be
designing for. Using provisional personas to drive design decisions is still better than having no persona
at all — though of course they should be validated with research.

HOW MANY PERSONAS DO I NEED?

You should have as many archetypes (user types/categories) that exist. Some times there are
sub-groups within those archetypes so more maybe needed. For today’s exercise, we’ll do a
minimum of 1 (one) persona to get you used to this process.

In a “real” project, most experts recommend researching/creating least three (3) and not more than five
personas.

WHY ARE RESEARCH & PERSONAS

IMPORTANT?
You as a designer need to know who your potential Users* aka customers are in order to design for their
behaviors, attitudes, needs, desires, and pain points. All these points are captured into User Personas.

*Remember, Users are the “U” in the UX. And if we don’t do a good job, they become “eX”-Users.

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 7t
INTERVIEW TECHNIQUE / FORMAT
1. Ask about user’s best experience when they were ____________________________________.
(example: traveling or using app XYZ)
NOTES

2. User’s worst experience when they were using the same service/company as above.
NOTES

3. Read your notes above and transfer relevant info (behaviors, painpoints, goals) to the
Persona worksheet (next page 4).
 8
PERSONA # Name Age Gender
(Short personality based
Archetype description or “Tagline” )

Persona Favorite Apps (Competitors?)

(Ex: Mac, Windows, Android, iPhone.

Devices Desktop or Laptop or Tablet.)

Income $

BEHAVIORS (Ex: Likes to Jog) PAINS / PROBLEMS (Ex: Shoes hurt feet) GAINS / GOALS (Ex: Find shoes that don’t hurt feet)
1.) 1.) 1.)

2.) 2.) 2.)

3.) 3.) 3.)

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 9
EMPATHY MAP# Name Archetype
EXPERIENCES IN DAILY LIFE (Copy from Persona)

SEEING

HEARING DOING
(From family, (Activites, work,
friends/coworkers) & hobbies)

Persona SAYING

FEELING THINKING

PAINS (Review, copy and revise if needed from Personas) GAINS

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 10
USER JOURNEY Guiding
Principle #1

STAGES RESEARCH & PLANNING LAND/ARRIVE EXPLORE

WEB/APP
FEATURE

What topics are users researching? What are users doing upon arrival? What are users doing on other pages?

DOING

General questions about this industry segment. Questions user has about our website/application (product) when reviewing app/site initially.

THINKING

Feelings the user has in general. Feelings the user should have about our product/service.

FEELING

KEY GOALS Goal #1 Goal #2 Goal #3

INSPIRED BY ADAPTIVE PATH’S EURO RAIL EXPERIENCE MAP

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
Guiding Guiding 11
Principle #2 Principle #3

SIGN UP USING OFFLINE/POST PURCHASE

What topics are users researching? What are users doing after signup/purchase? What are users doing/expecting after using/buying?

Questions the user has about signing-up/buying. Questions user has about how to use the product/app/service.

Feelings the user has about signing-up/buying. Feelings the user should have using our product.

Goal #4 Goal #5 Goal #6

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 Two Key Assumptions Customer intends to buy a car.

Customer has good credit score.

USER JOURNEY (ALTERNATE
SKETCH)
CAR BUYING EXAMPLE
1. BEFORE: Research & Planning 2. DURING: Landing, Exploration, & Purchase 3. AFTER: Post Purchase

BUSINESS GOAL Create awareness BUSINESS GOAL Customers buy a car BUSINESS GOAL Retain customers / buy again
Find a suitable car Frictionless purchase experience
USER GOAL USER GOAL USER GOAL Good customer service

USER’S
Curious USER’S
Will they find the car I want? USER’S
What problems are they going to
THINKING Excited THINKING This is taking too long! Nervous. THINKING find wrong with the car? Frustrated.
& FEELING & FEELING & FEELING

First Touch Point with Brand

Advertising
hand
Various
Experience
Channels

Inventory/Content
Awareness

Customer
Edmunds, Service
KBB, etc.

Intends to Buy Search

a Car Results/ At the Purchase Business
(One of the Browse Dealership (Conversion Point) Goal Service
assumptions Options Achieved
above)

Browse Friends & Financing

Negotiations Share on
/Search Family Contract FB, Twitter,
etc.

PAIN POINTS Slow pages, hard to navigate, PAIN POINTS Unclear pricing, PAIN POINTS Difficult to setup service appt.
No clear options for personalization Hard to understand, bad credit scores Parts not available, un-necessary repairs

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 13
BUSINESS CANVAS STEP 1 (Think, collaborate, and write down)
A. PROBLEMS B. CUSTOMER SEGMENTS C. UNIQUE VALUE PROPOSITION
Describe top 3 “problems”/pains of customers Target customers (Personas) Single,clear, compelling message stating
why you are different and worth buying.

1.) 1.)

2.) 2.)

3.) 3.)

Creative commons source: Business Model Canvas / strategyzer.com

D. CHANNELS E. COST STRUCTURE F. REVENUE STREAMS
Paths to customers (”distribution”) What are your expenses? Web hosting, designers, Revenue Model, Margins
and developers resources etc.
1.)

2.)

3.)

G. SOLUTIONS H. UNFAIR ADVANTAGE Can’t be easily I. KEY METRICS How do you measure
Top 3 “Features” bought or copied aka “Secret Sauce” success? Visitors, Revenue, Users over X
amount of time.

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 14
BUSINESS CANVAS STEP 2 (Transfer and confirm from Step 1)
PROBLEMS SOLUTIONS UNIQUE VALUE UNFAIR ADVANTAGE CUSTOMER SEGMENTS
PROPOSITION

Creative commons source: Business Model Canvas / strategyzer.com

KEY METRICS CHANNELS

COST STRUCTURE REVENUE STREAMS

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 15
USER STORY#
OVERALL

I (as a archetype group: ),

Example: “Soccer Mom” or parent with a child playing soccer

want to be able to ,
Ex: get soccer game schedules quickly (Note: Keep these as short as possible)
because
Ex: I want to save time and not forget to take my kids to a game. (Reason/rationale)

NEXT BREAK DOWN THE ACTUAL STEPS IN THE TASKS REQUIRED.

Example Overall task: Example of how it would break down:
“As a user I want to create a new account.” 1. As a user I want to type in 3. As a user I want to re-enter my
a new username. password to verify it.
2. As a user I want to enter 4. As a user I want to submit this
a password. information and create an account.
BREAKDOWN (SEE EXAMPLES ABOVE)

As a user I want to .
As a user I want to .
As a user I want to .
As a user I want to .
As a user I want to .
As a user I want to .

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 16
TIME LINE Get your website or app launched (+ Resources)!
(*INCLUDED IN THIS KIT)
Some tasks maynot be alwaysin linear top to
bottom format.Not all teams will use every method below.

ITERATE

RESEARCH/PLAN CONCEPTUALIZE/DESIGN TEST/ANALYZE LAUNCH

MILESTONE #1 MILESTONE #2 MILESTONE #3 MILESTONE #4

COMPLETION COMPLETION COMPLETION COMPLETION
DATE DATE DATE DATE

CUSTOMER INTERVIEWS WIREFRAME/STORYBOARDS HEAT MAPS (e.g. Crazy Egg) ANALYTICS

PERSONAS* CONTENT STRATEGY QA TEAM TESTING A/B SPLIT TESTS
EMPATHY MAPS* INFORMATION BETA TEST GROUP (e.g. Optimizely)

JOURNEY MAP* ARCHITECTURE (from EXTERNAL TESTING SEO (e.g. Moz.org)

Card Sorting tests)
USER STORIES (e.g. UserTesting.com) ADWORDS
PROTOTYPE SOCIAL MEDIA
BUSINESS CANVAS* (e.g. Invision, Axure, UX Pin, Adobe XD)
BUSINESS REQUIREMENTS DOC. LIVE CHAT
VISUAL DESIGN SUPPORT PORTAL
CARD SORTING
IDENTIFY “MVP” (Minimum Viable Product) (FAQS, KB - e.g.
SITEMAP ZenDesk, Uservoice)
RE/FRAME aka OSBORN* CREATE SPRINTS
(Prioritize Features/Roadmap)
SCHEDULE TIMELINE*
SETUP BASECAMP/TRELLO CODE/DEVELOP/DEPLOY
SETUP DROPBOX

NOTES

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 17
RE/FRAME aka OSBORN METHOD

PEOPLE CONTEXT FOCUS BREADTH KNOWLEDGE

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 18
OSBORN CHECKLIST
X
COMBINE MODIFY
What can you combine? What can you change?
Ideas, units, Other us, form, color, odor,
benefits, purposes? texture, temperature,
Mix / assemble? movement, meaning /
Make modular? angle or ?

+
REARRANGE MAGNIFY
Opposite, backward, inverted? Make it bigger / stronger / larger
Deconstruct & reconstruct? heavier / thicker? Add something?
Change positive & negative? Value / time / distance?
Change cause and effect? Multiple? Exaggerate?
Intensify?

SUBSITUTE MINIMIZE
Substitute component, Smaller, shorter, lower, lighter,
material, ingredient, thinner? Leave out something?
method, process, person? Concentrate? Divide?
Other places / times? Create miniature?

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 19
RE/FRAME aka OSBORN METHOD

X =
COMBINE MODIFY
ideas, does not
mix it equal

+
REARRANGE MAGNIFY
deconstruct, bigger, stronger,
reconstruct larger

Object/Person MINIMIZE
SUBSITUTE take out
other places,
other times (Car/camera, etc.) something

Example w/ Camera: http://bit.ly/osbornmethod

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 20
RE/FRAME aka OSBORN METHOD
Persona/Customer Segment/Archetypes

People such as...

Problem/Need

have trouble with/need...

.
Proposed Solutions

Which might be resolved by...

.
Business result/indicator/social proof

We know we’re possibly right when....

.
Qualitative/quantative metrics

which is measured by...

.
Source: Lane Halley / bit.ly/ux-worksheet

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 21
BONUS! BEHAVIOR MODEL
Dr. BJ Fogg’s “formula” Our Take: Why this matters and

B=mat
how does it work?

Part of User Experience Design

is understanding the pyschology
BEHAVIOR MOTIVATION ABILITY TRIGGER
of your users/visitors.
AT SAME MOMENT

When you’re “designing” your

website/app for the product
road map features, navigation
bar, pricing, or even just writing
text copy, you should keep this
formula in mind how to help
your users adjust their behavior
by taking into account your
customers’ motivations,
abilities/limitations, and
triggers.

This page in collaboration with

Source: BehaviorModel.org / BJFogg.org Raymond Soon, Certified “Tiny Habits” Coach

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 22
BONUS! BUZZ WORDS
“UI” (User Interface) versus “UX” design
Analogy: If you imagine a product (website) as the human body, the bones represent the code which
give it structure. The organs represent the UX design: measuring and optimizing against input for
supporting life functions. And UI design represents the cosmetics of the body--its presentation, its
senses and reactions.
Source: Career Foundry

“Agile” is a set of principles for software development in which requirements and solutions evolve
through collaboration between self-organizing, cross-functional teams.
Source: Wikipedia

“MVP” (Minimum Viable Product) is a product which has just enough features to gather validated
learning about the product and its continued development. Gathering metrics from an MVP is often
less expensive than using a fully developed product with more features due to incorrect assumptions.
MVP design/development uses “Lean”, Agile, and Business Canvas methodologies.
Source: Wikipedia

Homework. Other Buzz Words (and People) to look up later (”Google it”).
• Information architecture • User centered design • Don Norman • Eric Reiss
• Growth hacking • Qualitative/Quantative testing • Jared Spool • Nir Eyal
• UX unicorn • Affordance & Signifier • Luke Wroblewski • BJ Fogg
• Full stack developer • Accessability • Steve Krugg • Steve Blank
• Karen McGrane
UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 23
SIMPLE UX STRATEGY TIPS = Results

KEEP IT SIMPLE = User knows their choices and what to do next.

LESS IS MORE = User is not overwhelmed.

CONSISTENCY = User can find things easily.

KEEP IT SIMPLE

CONSISTENCY LESS IS MORE

UXDESIGNKIT.COM / SHRI JAMBHEKAR & DAVID NGUYEN & NOEL SAW PROJECT
 25
UX TEAM CRITIQUE GUIDE
Join our LAUX Slack channel - get an invite: LAUXmeetup.com/slack
Then join the #peertopeer channel.

WHY CRITIQUE? A LAYERS OF DIGITAL DESIGN B

• Fresh pair(s) of eyes
• Explain our reasoning out loud visual design
• Helps us learn
• Builds trust with our colleagues content
wireframes BRAND,
WHY IT CAN BE PAINFUL
framework PRODUCT,
• Not focused on the right areas (see “layers”)
SERVICE
• Personal opinions storyboards/flow
• Too many voices concept
• Not actionable
• Does not acknowledge the good parts strategy

STRUCTURED CRITIQUE ROLES C REVIEWERS’ JOB D

• One presenter at a time • Frame as questions instead of comments
• Small group of reviewers • Put yourself in ther users‘ shoes (empathetic)
• Moderator/Facilitator + Time Keeper (Optional) • Allow space for others to speak (take turns)
• Help capture ideas/questions (Slack)
MODERATOR’S JOB
• Explain the process PRESENTERS’ JOB
• Make sure scope and context are clear • Prepare your porfolio/project URLs
• Everyone should play fair and be nice • Know the audience
• Keep track of time (5 min + 5 min Q&A) • Define scope (layers) • Explain context
• Listen w/out judgement • Write down notes
This page Creative Commons - Adapted from Lane Halley @thinknow - https://goo.gl/d7GGG1
 26
UX TEAM CRITIQUE GUIDE
Join our Slack channel - get an invite: LAUXmeetup.com/slack
Then join the #peertopeer channel.

PRESENTER - OVERVIEW E REVIEWERS - SAMPLE QUESTIONS F

• How finished is the work? • What was your reasoning here?
• What type of feedback would be helpful? • What do you want the users to do/think?
• What problems are you aware of • What happens when the user does XYZ?
• Current constraints • Have you considered...?
• Be nice!
PRESENTER - CONTEXT
• Who is this for? Tools
• When do the users use/see it? • SoCalUX Slack #peertopeer
• What do you want users to accomplish? • Skitch
• Is this part of a larger system/solution? • Annotate

G H
DESIGN IS.... AREAS YOU ARE ASKING FOR FEEDBACK?
Solving problems.
visual design
CRITIQUE SHOULD NOT.... content
feel like criticism. wireframes
BRAND,
framework PRODUCT,
EMPATHY IS AS IMPORTANT...
in critique/feedback process as it is in design storyboards/flow SERVICE
process. concept
strategy
This page Creative Commons - Adapted from Lane Halley @thinknow - https://goo.gl/d7GGG1
 27
THANK YOU!
PLEASE CONNECT WITH US...

NOEL SAW
LinkedIn.com/in/noelsaw

SHRI JAMBEKHAR
LinkedIn.com/in/shri-jambhekar-72693

David Nguyen
LinkedIn.com/in/chaoticdomain

Visit us at:
UXDESIGNKIT.com

Join our Meetup:

LAUXMeetup.com | OCUX.org

Join our Slack Channel

LAUXMeetup.com/Slack