PRPL Information Architect Tricia D'Antin explains the thought process behind merging business goals with user goals through user experience (UX) design.
3. DOES YOUR COMPANY HAVE A
DYSFUNCTIONAL REL ATIONSHIP
WITH YOUR USERS?
WHY THIS
HAPPENS
WHY YOU
SHOULD CARE
WHAT YOU CAN
DO ABOUT IT
W H AT R E S U LT S
YOU CAN EXPECT
5. WHY DOES THIS HAPPEN?
( EXAMPLE 01)
BUSINESS GOAL
USER GOAL
Increase Sales
“All sales are final!”
Shop Risk-Free
“Can I return this banana slicer?”
6. WHY DOES THIS HAPPEN?
( EXAMPLE 02)
BUSINESS GOAL
USER GOAL
GROW OUR MAILING LIST
“Log in to view properties!”
ASSESS PRODUCT VALUE
“Is this even worth more spam and
another password I have to remember?”
7. WHY DOES THIS HAPPEN?
( EXAMPLE 03)
BUSINESS GOAL
USER GOAL
Generate Ad Revenue
“Click the dancing baby!”
View Content
“I just want to read the news.”
8. WHY DOES THIS HAPPEN?
DARK PAT TERNS
“Dark Patterns are user interfaces that are designed to trick people.
Normally when you think of “bad design,” you think of laziness or mistakes.
These are known as design anti-patterns. Dark Patterns are different – they are
not mistakes, they are carefully crafted with a solid understanding of human
psychology, and they do not have the user’s interests in mind.”
Types:
Bait and Switch
Disguised Ads
Faraway Bill
Friend Spam
Hidden Costs
Misdirection
Price Comparison Prevention
Privacy Zuckering
Roach Motel
Road Block
Sneak Into Basket
Trick Questions
9. WHY DOES THIS HAPPEN?
DARK PAT TERN 1:
J AVA
Misdirection
“THE ATTENTION OF THE USER IS DIRECTED TO ONE THING IN ORDER TO
DISTRACT IT FROM ANOTHER.”
10. WHY DOES THIS HAPPEN?
DARK PAT TERN 2:
COSTCO
Tr i c k Q u e s t i o n s
“THE USER IS REQUIRED TO RESPOND TO A QUESTION (TYPICALLY IN THE
CHECKOUT PROCESS), WHICH, WHEN GLANCED UPON QUICKLY APPEARS TO
ASK ONE THING, BUT IF READ CAREFULLY, ASKS ANOTHER THING ENTIRELY.
THIS PATTERN WORKS BECAUSE IT IS NORMAL FOR USERS TO EMPLOY HIGHSPEED SCAN-READING ON THE WEB – SEE STEVE KRUG: ‘WE DON’T READ
PAGES. WE SCAN THEM.’”
11. WHY DOES THIS HAPPEN?
DARK PAT TERN 3: APPLE
Privacy Zuckering
“THE ACT OF CREATING DELIBERATELY CONFUSING JARGON AND
USER INTERFACES WHICH TRICK YOUR USERS INTO SHARING MORE INFO
ABOUT THEMSELVES THAN THEY REALLY WANT TO.”
16. WHAT CAN YOU DO ABOUT IT?
THE DESIGN THINKING PROCESS
DEFINE
RESEARCH
IDEATION
PROTOTYPE
CHOOSE
IMPLEMENT
LEARN
17. WHAT CAN YOU DO ABOUT IT?
DOUG’S AUTO REPAIR
( EXAMPLE COMPANY)
18. WHAT CAN YOU DO ABOUT IT?
STEP 1: DEFINE
What’s the problem?
“Well, team, sales aren’t where they need to be to keep this place afloat!”
How will we know if we’re successful?
Your key performance metrics (KPIs) should be timely, specific, measurable, etc.
“We want to increase sales by 50% per month.”
19. WHAT CAN YOU DO ABOUT IT?
STEP 1: DEFINE
Who’s the audience?
New customers
Returning customers
Nathan has been scammed before. He’s
new to the area, and he’s looking for
a mechanic he can trust. He comes to
Doug’s Auto Repair for an oil change,
hoping they don’t tell him he needs a
new everything. He really can’t afford a
big bill right now.
Carla’s car is making a funny scraping
noise. Last time she came to Doug’s,
she wasn’t sure if her car really needed
all that work, but she’s a very trusting person. She wishes she was bold
enough to ask more questions and
knowledgeable enough to judge the
answers.
20. WHAT CAN YOU DO ABOUT IT?
STEP 2: RESEARCH
What’s causing the issues?
What are the obstacles?
How have other people solved this problem?
“I don’t have many repeat customers, so
business is slow. To make up for it, I’ve been
rewarding my team for upselling customers
on services. We want the most work we can
get out of each car, and people are skeptical of
that.”
“We do a good job, but they only care about the price,
and many places are cheaper, faster, and only recommend the bare minimum.”
Competitive Analysis Solutions
“It’s hard to get our customers to trust us, take our advice, and come back.”
Testimonials
Reviews
Social media engagement
Offering quote estimates online
“Ask the mechanic” forms
Friendly imagery
Touting experience
“Trustworthy” tone and diction
21. WHAT CAN YOU DO ABOUT IT?
STEP 3: IDEATION
What do you want + what do your users want?
New Customers
Repeat Customers
Make an appointment
Find directions
Get an accurate diagnosis of their car’s problems
Get a competitive quote
Judge the trustworthiness of the mechanic
Compare mechanics
Get a detailed understanding of the work involved
Understand why the work is required
Get a sense of quality assurance
And they want it all in 30 minutes
Make an appointment
Get an accurate diagnosis of their car’s problems
Get a competitive quote
Have a relationship with a mechanic
Receive personalized service
Reference their repair history
Get a detailed understanding of the work involved
Understand why the work is required
Get a sense of quality assurance
Gain knowledge of their car’s future needs
And they want it all in 30 minutes
22. WHAT CAN YOU DO ABOUT IT?
STEP 3: IDEATION
Focus on the most common goals.
New Customers
Repeat Customers
Make an appointment
Find directions
Get an accurate diagnosis of their car’s problems
Get a competitive quote
Judge the trustworthiness of the mechanic
Compare mechanics
Get a detailed understanding of the work involved
Understand why the work is required
Get a sense of quality assurance
And they want it all in 30 minutes
Make an appointment
Get an accurate diagnosis of their car’s problems
Get a competitive quote
Have a relationship with a mechanic
Receive personalized service
Reference their repair history
Get a detailed understanding of the work involved
Understand why the work is required
Get a sense of quality assurance
Gain knowledge of their car’s future needs
And they want it all in 30 minutes
23. WHAT CAN YOU DO ABOUT IT?
STEP 3: IDEATION
Brainstorm Solutions
Common Goals
Solutions
Make an appointment
Find directions
Get an accurate diagnosis of their car’s problems
Get a competitive quote
Judge the trustworthiness of the mechanic
Compare mechanics
Get a detailed understanding of the work involved
Understand why the work is required
Get a sense of quality assurance
And they want it all in 30 minutes
Have a relationship with a mechanic
Receive personalized service
Reference their repair history
Gain knowledge of their car’s future needs
“Make an appointment” form
Embedded Google maps
A “WebMD” for cars
A “compare prices” at other shops feature
A profile for each mechanic
A customer-generated “trustworthiness score” for each mechanic
A customer profile with their assigned mechanic
A digital diagnostic report of the car
Quick access to past diagnostic reports and repair plans
A visual, interactive repair plan with descriptions in plain language
A calendar of future repairs and maintenance
Live push-notification updates on the car’s progress
24. WHAT CAN YOU DO ABOUT IT?
N AV I G AT I O N
STEP 4: PROTOTYPE
Te s t Yo u r I d e a s .
Techniques like paper prototyping and click-through are quick and easy ways to literally
sketch out an idea or mock up a low fidelity wireframe, ask someone to interact with it - using
a little bit of imagination - and observe what they struggle with.
S U BM I T
25. WHAT CAN YOU DO ABOUT IT?
STEP 5: CHOOSE
“The absence of these fluff-features allows the most important users to master the software faster without
having to deal with low-value complexity.”
- Ty n e r B l a i n
Which ideas should we keep?
A customer account to access info
“Make an appointment” form
View their assigned mechanic
Embedded Google maps
Access a digital diagnostic report of the car
A “WebMD” for cars
Access past diagnostic reports and repair plans
A “compare prices” at other shops feature Phase 2!
A visual, interactive repair plan with descriptions in plain language Phase 2!
A profile for each mechanic
A calendar of future repairs and maintenance
A customer-generated “trustworthiness score” for each mechanic
Live push-notification updates on the car’s progress Phase 2!
26. WHAT CAN YOU DO ABOUT IT?
STEP 6: IMPLEMENT
Plan the Website.
When deciding how to prioritize when to implement ideas, there’s the Kano Analysis. There
are three classifications of requirements.
1. Must be. Functional barriers to entry – without these capabilities, customers will not use the product (e.g. UL approval).
2. More is better. Dimensions along a continuum with a clear
direction of increasing utility (e.g. battery life or song capacity).
3. Surprise and delight. Capabilities that differentiate a
product from its competition (e.g. the nav-wheel on an iPod).
- Ty n e r B l a i n
27. WHAT CAN YOU DO ABOUT IT?
STEP 6: IMPLEMENT
Plan the Website.
Site Architecture
P r o d u c t Ta x o n o m y
Functionality Requirements
Content Strategy
Wireframes
28. WHAT CAN YOU DO ABOUT IT?
STEP 6: IMPLEMENT
Design the Website.
Build the Website.
29. WHAT CAN YOU DO ABOUT IT?
STEP 7: LEARN
Measure the Impact Through:
Google Analytics
Goal Tracking
Conversion Funnels
Bounce Rate
User Feedback
User Testing
30. W H AT R E S U LT S C A N Y O U E X P E C T ?
E N D R E S U LT S F O R D O U G
Doug saw an average increase of 36% in overall sales. Since
his goal was 50%, he’s using a portion of the increase to
conduct usability tests to find hitches in the design. His web
d e v e l o p m e n t t e a m i s t a k i n g t h i s a n a l y s i s , m a k i n g CTA b u t t o n s
m o r e p r o m i n e n t , r e m o v i n g c l u t t e r, r e w r i t i n g c o p y t o s o u n d
f r i e n d l i e r, a n d A / B t e s t i n g a d s .
32. RESOURCES
Recommended Books
DON’T MAKE ME THINK
REVISITED: A COMMON
SENSE APPROACH TO WEB
USABILITY
T H E D E S I G N O F E V E RY D AY
THINGS
DON NORMAN
(AUTHOR)
STEVE KRUG (AUTHOR)
SEDUCTIVE INTERACTION
D E S I G N : C R E AT I N G P L AY FUL, FUN, AND EFFECTIVE
USER EXPERIENCES
STEPHEN P. ANDERSON (AUTHOR)
INFORMATION
ARCHITECTURE:
BLUEPRINTS FOR THE WEB
CHRISTINA WODTKE
(AUTHOR)
33. RESOURCES
Recommended Links
“Design Thinking.” An overview of the approach:
Need to back up an idea with research? Find some:
The best blog by all the best people in the field:
My personal favorite UX blog:
Amazing tools where Google does a lot of this stuff for you:
The article I send to everyone who wants to learn to make websites:
Take usability tests to get a sense of what it’s all about, and publish your own:
http://en.wikipedia.org /wiki/ Design_thinking
http://www.uxpond.com/index.html
http://alistapart.com/articles
http://uxdesign.smashingmagazine.com/
http://www.google.com/ think/ tools/customer-journeyto-online-purchase.html
http://www.good.is/posts/how-to-become-a-designerwithout-going-to-design-school
https://usabilityhub.com/
34. RESOURCES
Recommended Links
Learn, learn learn:
An overview of the field (I do everything in this chart except visual design):
https://generalassemb.ly/watch-and-learn/uxdesign?utm_content=front_row&utm_medium=fbsocialcode_PagePostLink_Phase2_UX_UXOffer
http://www.uxmatters.com/mt/archives/2007/11/images/
FiveCompetencies.pdf
Where to go if you don’t know what any of this stuff means,
or you just need way more examples:
http:// w w w.usability.gov/
Official site of the guys who basically invented usability
(Nielsen and Norman like our Skinner):
http://www.nngroup.com/
A list of my heroes. The people and organizations I follow onW
Twitter for everyday inspiration:
This article explains dark patterns and brand relationships
better than I ever could:
h t t p s : / / t w i t t e r. c o m / t r i c i a d a n t i n / l e a r n - s o m e t h i n g /
members
http://www.90percentofeverything.com/2013 /07/23 / theslippery-slope/