Unicorn invasion: A UX workshop for all levels and stuff!

elevator factory, atlanta / may 3, 2017
Unicorn Invasion
presented in partnership between +

+
Hi!
The UX design process
Step 1: User research
Do you even lift, bra?
Afﬁnity mapping
Personas
Step 2: Design
Sketching
Crazy eights
Breakout!
Step 3: Testing and iteration
Thanks!
AGENDA
3
8
26
54
91
98

Hi!
get your unicorn invaded by +

+
A unicorn is a mythical user experience
designer with an advanced and adaptive
skill range. Outstanding skills in
graphic design, rapid prototyping, front
end development, user testing, technical
speciﬁcations, marketing and branding.
It does not have an opinion, it has a
process, and will harmonize with any
environment.
It’s also a fluffy horse with a horn
projecting from it's head, blueish shoes,
ribbon neck thing and a blinking eye.
Big enough to be used as a cleaning
sponge and small enough to be sealed in
a Jiffy bag.
source: Jeff Gothelf
WHY UNICORNS?

+
design director, j+e creative
importantshit.co
calamityjd
cloudjammer
jd jordan

+
creative director, 9th path creative
9thpathcreative.com
chickerbp
chickerbp
brandy porter

+
- Your name
- Where you’re from
- Why you’re interested in UX
- Do you have a ﬁtness app on your phone?
- Your favorite song to sing along to in the car
when you don’t think anyone is looking  
(but, really, everyone around you is)
SAY HI AND STUFF

The UX process
what’s better than bacon? +

Everything is designed
whether we make time for it or not.

Unicorn invasion: A UX workshop for all levels and stuff!

FUNCTIONALITY
RELIABILITY
USABILITY
JOY
HIERARCHY OF NEED

FUNCTIONALITY
RELIABILITY
USABILITY
JOY
DESIGN
ENGINEERING
HIERARCHY OF NEED

EXPLORATION
RESEARCH + DESIGN TESTING ENGINEERING
REFINEMENT
DESIGN PROCESS

+
User research
these guys know how to find Waldo +
STEP ONE

The key to good design isn’t tools or technology.
It’s empathy.

THE FIRST RULE OF USER EXPERIENCE
YOU ARE NOT
THE USER

YOU ARE NOT
THE USER
THE SECOND RULE OF USER EXPERIENCE

DON’T
ASSUME
THE THIRD RULE OF USER EXPERIENCE
SERIOUSLY. DON’T DO IT.

+
USER RESEARCH IS IMPORTANT BECAUSE…
- It focuses on the impact of design on a user,
- It teaches us about user behaviors, needs, and
motivations through inquiry and observation,
- It helps us solve real (not assumed) problems,
- It helps us identify issues (and gaps) that
business needs and interests haven’t identiﬁed.

+
USER RESEARCH METHODS
- Interviews
- Contextual Inquiry
- Surveys
- Diary Studies
- Card Sorting
- Eye Tracking
- Data Analysis
- A/B Testing

ASK
QUESTIONS
THE SECRET OF USER EXPERIENCE
CHANNEL YOUR INNER FIVE-YEAR-OLD

+
ASK WHY TO VALIDATE THE PROBLEM
The client:
The client:
The user:
The user:
The client:
The client:
We need a bigger SHARE button
People aren’t sharing the documents they create
We’re nervous about sharing
We’re not sure who will see what we share
We don’t tell them who will see what they share
We don’t have that data in our system

+
THE FIVE Ws
- is our stakeholder?
- is our user (demographics, education, culture)?
- is the competition?
- solves similar problems
WHO…

+
THE FIVE Ws
- is their inherent knowledge?
- are their habits?
- are their relationships with people?
- are their relationships with products and devices?
- device are they using?
WHAT…

+
THE FIVE Ws
- do they need our solution (situation)?
- do they use it (context off use)?
- are they in their user journey (the phases of use)?
WHEN…

+
THE FIVE Ws
- are they when they use it (context off use)?
- else is their attention?
- are their experience touchpoints?
WHERE…

+
THE FIVE Ws
- do they need our solution?
- not use something that already exists?
- would they use our solution again?
WHY…

HOW?
THE FIVE Ws
THAT’S WHY THEY PAY YOU
THE BIG BUCKS.

+
TIPS FOR ASKING GOOD QUESTIONS
- Ask open-ended questions
- Ask about actual behavior, not intention
- Avoid leading questions
- Avoid compound questions
- Avoid pointing out speciﬁc issues

EXERCISE
DO YOU EVEN LIFT, BRA?

+
METHODS TO SYNTHESIZE USER RESEARCH
- Call out quotes
- Card sorting
- Mindmapping
- Afﬁnity mapping
- Personas
- Journey mapping

+
AFFINITY MAPPING
Affinity mapping is a way to find patterns in
qualitative (not quantitive) data. To make one:
- Write down memorable or significant answers
- Organize the data by the insights it suggests
- Categorize insights under “I” statements to keep the
analysis from the user’s (your!) point of view
- Timebox the exercise

+
A PERSONAS IS…
- An aggregate summary of user research data,
- A convenient reminder who the user is,
- A touchstone to make design less subjective,
- A living document that requires repeated
validation through user research and updates.

CURRENT CLIENTS
WHO ARE THEY?
25-34 YEARS OLD 35-44 YEARS OLD 45-54 YEARS OLD 55 OR OLDER
HIGH S. BACHELOR'S DEGREE MASTER'S DEGREE DOCTORATE
-$20,000 $20-50,000 $50-75,000 $75-100,000 $100-150,000 $150,000+
-$20,000 $20-50K $50-75,000 $75-100,000 $100,000+
‣ Coaching through the legal process
‣ Recommendations on how to handle difficult
situations with their exes
‣ Advice on how to handle the impact of
family-law cases on family and lifestyle
‣ To feel prepared for hearings and court
‣ To see that there is a positive outcome at the
end of the process
NEEDS PAIN POINTS OPPORTUNITIES
NO KIDS 1 KID 2 KIDS 3 KIDS
THROUGH MUTUAL AGREEMENT IN MEDIATION IN COURT
MOTHER HAS CUSTODY OF THE KIDS EQUAL CUSTODY OF THE KIDS
AGE
AVERAGE
$77-95
0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
EDUCATION
INCOME
EX’S INCOME
KIDS WITH EX
DIVORCED
CUSTODY
SINGLE REMARRIEDMARITAL STATUS
‣ The cost
‣ The stress of family law cases and the process
‣ Parenting through divorce
‣ Gathering all of the relevant information
specific to their case
‣ Unresponsive websites and tools
‣ Difficulty finding good resources
‣ Decision-making in a high-stress process
‣ Focus on life after divorce
‣ Communication/cost efficiencies
‣ Digital communication with attorneys
‣ Pre-hearing checklists (tailored to strategy)
‣ Trackable communication with exes
‣ Check-ins, to keep on track
‣ Documentation recommendations
‣ Recommendation tool
AVERAGE
$64-82
AVERAGE 
38-47
AVERAGE 
1.27

PROFESSOR PLUM
THE PRESTIGE SEEKER
- Stay ahead of the curve
- Shape the movement through reviews + feedback
that others will read
- Recognition
- Hands on experience
- Expect more delight & surprise
- Active on social media
- Tech savvy
- Brand conscious
- Driven by success
- Achievement oriented

RESEARCH ROCKS
RESEARCH PERSONASUSER DATA IDEA
EUREKA!

+
Design
who’s got two thumbs and are doing a workshop? +
STEP TWO

Good design
is as little design as possible.

Good design
is not subjective.

YOUR BIG WORD FOR THE DAY:
HEURISTICSIT’S GREEK. FOR “HIGHER HOURLY RATE”

+
DIETER RAMS’ HEURISTICS
- Innovative
- Useful
- Aesthetic
- Understandable (no instructions!)
- Unobtrusive
- Honest
- Long-lasting
- Thorough down to the last detail
- Environmentally friendly
- As little design as possible
GOOD DESIGN IS…

+
ABBY COVERT’S HEURISTICS
- Findable
- Accessible
- Clear
- Communicative
- Useful
- Credible
- Controllable
- Valuable
- Learnable
- Delightful
GOOD DESIGN IS…

Good design
ﬁnds the sweet spot.

BUSINESS USERYAS!
GOOD DESIGN IS BALANCE

+
UX DESIGN DELIVERABLES
- User ﬂows
- Site maps
- Sketches
- Wireframes
- Content
- Visual design comps
- Product speciﬁcations
- Experience prototypes
- Functional prototypes

+
PRODUCT SPECIFICATION
FILE NAME
Skot Carruth
Untitled
CREATOR
Mon Feb 24 2014MODIFICATION DATE
Title of Document
DESCRIPTION Enter document description here
VERSION HISTORY Version history here
How to use this document
Naming Things
• Edit the Head/Foot shared layer to set the title document title at the top of the
page.
• Rename the canvases to set the page titles
Using Layer Master
• The Layer Master is non-printing canvas that simply holds the shared layers
used by all of the canvas types in the document. This ensures that you don't
lose any of your shared layers should you delete it from a canvas.
• Drag shared layers over your working canvas to use as a page master (e.g.
wireframe or storyboard)
Presentation
• This document was created with dimensions of 22" by 34" so that you may
work at 100% and project your schematics at 100% in landscape mode.
Exporting and Printing
• Select menu: File > Export
• From the export dialog:
Select Format: PDF Vector Image
Select Export Area: Entire Document
• Print the PDF, being sure that your Printer Handling options are set to "Scale to
fit paper size."
More information
http://konigi.com/tools/omnigraffle-ux-template
Version info:
Version 2.5.1 (11/28/11)
Title of your document goes here
Site Map
Mon Feb 24 2014
Creator
Modified
Skot Carruth
3 / 17
Home
1.0 Section
1.1 Sub-section
1.1.1 Sub-
section
1.1.1.1 Sub-
section
1.2 Sub-section 1.3 Sub-Section
1.2.1 Sub-
section
1.2.2 Sub-
section
2.0 Section
Section 2.1 2.2 Sub-Section
Section 2.1.1
Section 2.1.1.1
3.0 Section
3.1 Subsection
3.1.1 Sub-
section
3.1.1.1 Sub-
Section
4.0 Section
4.1 Subsection
4.1.1 Subsection
4.1.1.1
Subsection
4.2 Subsection 4.3 Subsection
This is a sitemap example. The
easiest way to quickly create
sitemaps manually from the top
down is to use Outline mode
(View > Outline or Opt-Cmd-2).
For a consistent look, select a
diagramming style (Format >
Choose Diagram Style).
Persona Overview
Mon Feb 24 2014
Creator
Modified
Skot Carruth
4 / 17
PR
IM
ARY
Age: 47
Occupation: Investment analyst, FInancial
Services Firm
Gear: Windows XP, Internet Explorer,
Broadband, Palm
Age
Occupation
Gear
Quote
Trusted visitor (recipient)
Mark OlsonTeresa Vacaro
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque pharetra.
Maecenas urna. Nulla sapien. Sed
dignissim aliquet quam.
Etiam vel sem et ipsum iaculis gravida.
Sed lacus lacus, ultrices ut, aliquet a,
hendrerit sit amet, tellus. Mauris tempor
mauris eu justo. Cras tortor nunc, dictum
ac, tristique vitae, pellentesque nec, sem.
Proin scelerisque laoreet risus.
Vivamus quis sapien. Fusce fermentum.
Vestibulum a est. Aliquam erat volutpat.
Etiam purus ligula, rhoncus vel, fringilla in,
mattis eu, tortor.
Donec non urna. Aliquam sodales luctus
augue. Duis condimentum, quam at tempor
gravida, erat nunc dignissim quam, non
venenatis massa metus eu augue.
Proin at augue facilisis lacus luctus dictum.
Nullam suscipit dignissim eros. Proin
turpis.
Age: 26
Occupation: Advertising, Junior Designer
Gear: Windows XP, IE, IPhone
mattis eu, tortor.
turpis.
mattis eu, tortor.
turpis.
Member, TV addict
Social Network user
Member
mattis eu, tortor.
turpis.
Age: 29
Occupation: Real Estate Agent
Gear: Windows XP, IE, iPhone
I'm no geek, but I love using the Internet
for connecting with people, whether it's
via email and discussion groups or at
MeetUps.
Golf is my passion. Knowledge is my
occupation. With regard to technology,
keep it simple or I won't use it.
Tracy Irving
mattis eu, tortor.
turpis.
Age: 21
Occupation: Student, Film & Television major
Gear: Mac OS X, Firefox, iPhone
Public visitor
I work hard, so the web is an
entertainment outlet for me–it's my TV.
Chris Simms
Job Title
Goals
Pete VargasName
Member
Age: 35
Occupation: Account Manager, Enterprise
Software Vendor
Gear: Windows XP, IE, Broadband,
Blackberry
I want to get things done, be smarter,
and have better toys.
I'm blogging this.
Detailed Persona
Mon Feb 24 2014
Creator
Modified
Skot Carruth
5 / 17
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
FeaturesScenariosGoals and Motivations
Personal Background
Chris is a gadget head and early adopter. He travels a lot, spends a good deal of
time in hotels, and is constantly trying to keep on top of projects. He uses the web
to stay on top of tech industry trends. Is interested in TV and not user generated
content with the exception of his own. Likes features on sites that are quick and
simple to use.
I want to get things done, be smarter,
and have better toys.
Demographics
Age: 35
Occupation: Account Manager, Enterprise
Software Vendor
Gear: Windows XP, IE, Broadband,
Blackberry
Needs
• Better signal to noise ratio
• To get things done
• Some sense of privacy
• Ability to access or use expert features of a site when he wants to
• Indication that any social activity or rating will give him something back
• Wants community or expert features to get out of the way when they're
meaningless to him
Tech Comforts
PC: High
Web: High
Chris Simms
Member
Mental Model
Mon Feb 24 2014
Creator
Modified
Skot Carruth
6 / 17
Save for later Share RepublishRate & Comment
GroupsPlaylistsDescribewutzit
WatchFind
Create Organize
InteractView
wutzitping from
SlingPlayer
wutzitping from
my own media,
e.g. camcorder
Embedding
wutzit in an
external site
Tagging a wutzit Creating a
playlist
Creating groups
Rating a wutzit
Adding wutzit to
playlist
Adding wutzit to
group
Sending to a
friend via email
client
Sending to a
friend via
"Share" UI
Favoriting
people
Watching video
via a direct link
sent or found off
site
Watching video
off site, e.g. in a
weblog
Browsing by
show or channel
Searching for a
wutzit using
global search
Re-use
Commenting
Naming a wutzit
Favorites
Favoriting
(people, wutzits,
shows, etc.)
Favoriting show/
channel/wutzit
etc.
RegisterHow do I use it?What is it?
Learn
How did these
wutzits get
here?
What can I find
here?
What's a wutzit?
How do I create
a wutzit?
Join
Create an
account
What do I get for
joining?
Manage
My VideosMy Account
View my wutzits
View my
favorites
Edit my account
info
Change my
password
Remove wutzits
Remove
favorites
Desired features that came up
repeatedly in interviews and
surveys with wutzit users
Features we can expect to get
heavy use by very active members,
esp. social network users
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Wireframe 1 Up
Mon Feb 24 2014
Creator
Modified
Skot Carruth
7 / 17
1. Note label Note label
1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat.
Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.
1.2 Si quaedam nimis antique, si peraque dure dicere credit eos.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat.
Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis
antique, si peraque dure dicere credit eos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Wireframe / Storyboard
Mon Feb 24 2014
Creator
Modified
Skot Carruth
9 / 17
Small Wireframe
Mon Feb 24 2014
Creator
Modified
Skot Carruth
10 / 17
Heading
1. Notes block
Use tab for first line.
Following lines are indented to mimick
numbered lists, without using OG's numbered
list.
2. Notes Block
list.
Heading Heading Heading Heading
1. Notes block
list.
2. Notes Block
list.
1. Notes block
list.
2. Notes Block
list.
1. Notes block
list.
2. Notes Block
list.
1. Notes block
list.
2. Notes Block
list.
Storyboard & Notes
Mon Feb 24 2014
Creator
Modified
Skot Carruth
12 / 17
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita
miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
Carrier 12:00 PM
Page Title
http://www.domain.com Google
Carrier 12:00 PM
Page Title
Carrier 12:00 PM
Page Title
Carrier 12:00 PM
Page Title
Carrier 12:00 PM
Page Title
iPhone Wireframe
Mon Feb 24 2014
Creator
Modified
Skot Carruth
13 / 17
Lorem ipsum dolor sit amet consectateur nonummy
lorenzino. Interdum volgus videt, est ubi peccat. Si veteres
ita miratur laudatque poetas, ut nihil anteferat, nihil illis
comparet, errat. Si quaedam nimis antique, si peraque
dure dicere credit eos.
iPad Wireframe 1 up Portrait
Mon Feb 24 2014
Creator
Modified
Skot Carruth
14 / 17
1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi
peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi
peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si
quaedam nimis antique, si peraque dure dicere credit eos.
iPad Wireframe 1 up Landscape
Mon Feb 24 2014
Creator
Modified
Skot Carruth
16 / 17
1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque
poetas, ut nihil anteferat, nihil illis comparet, errat.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis

+
SKETCHES ARE PART OF THE PROCESS
- Anyone can do it
- They simply the complex
- They communicate visually
- They validate ideas
- Even rough or poorly-illustrated sketches can
communicate effectively
- And you don’t need any fancy tools to do it!

BREAKOUT
DESIGN A FITNESS APP
RESEARCH PERSONASUSER DATA IDEA
EUREKA!

MS SCARLET
THE FREEDOM SEEKER
- Highly independent
- Concerned with quality and practicality
- Self-guided research before buying
- Least likely to be swayed by advertising
- Prefers online shopping experience vs  
in-store experience
- Eco-conscious

MS PEACOCK
THE SECURITY SEEKER
- Prefer safe, practical purchases
- Do a lot of research before purchasing
- Looking for best value for money
- Brand loyal
- Swayed by advertising
- Buying for someone else

+
Testing + iteration
UX unicorns ≠ bronies +
STEP THREE

You gotta rock out
with your design out.

TESTING!
GET
FEEDBACKSERIOUSLY. DO IT.

Feedback is humbling
because it shows us how to be better.

+
PROCESS YOUR FEEDBACK
- Don’t take it personally 
(it’s about the work, not you)
- Empathize; don’t defend 
(you won’t be there in the wild)
- Look for trends
- Prioritize the issues
- Consider the user
- Disregard as necessary
- Get back to work!

+
You’re awesome!
We also like coffee and beer +

+
design director, j+e creative
importantshit.co
calamityjd
cloudjammer
jd jordan
creative director, 9th path creative
9thpathcreative.com
chickerbp
chickerbp
brandy porter

Unicorn invasion: A UX workshop for all levels and stuff!

More Related Content

What's hot (20)

Similar to Unicorn invasion: A UX workshop for all levels and stuff! (20)

Recently uploaded (20)

Unicorn invasion: A UX workshop for all levels and stuff!