Oh those pesky UI problems! Sadly, only a few are easily answerable. This talk does that and then frames two important underlying beliefs that impact how developers and designers can get the most of of UX by teasing apart UX and UI (they are *so* not the same thing!) and by broadening the perspective on what makes great products (not just great code.)

1. Top ways developers
mess up on User Experience
(and how to avoid them)
@ HEAVYBIT • AUGUST 1, 2013
SF Rails +
6

2. LUXR.CO AUGUST 2013
@katerutter
@luxrco
Kate Rutter
Co-Founder
www.luxr.co
TWEET!

3. LUXR.CO AUGUST 2013
Luxr makes tools to help startups
deliver products that people want,
need & love to buy.

4. LUXR.CO AUGUST 2013

5. LUXR.CO AUGUST 2013
“But the code validated!”
“The design was brilliant.
It just never launched.”
“We made an amazing thing.
But nobody wanted it.”
Recognizing UX Failure

6. LUXR.CO AUGUST 2013
“But the code validated!”
“The design was brilliant.
It just never launched.”
“We made an amazing thing.
But nobody wanted it.”
Recognizing UX Failure
FAIL

7. LUXR.CO AUGUST 2013
“But the code validated!”
“The design was brilliant.
It just never launched.”
“We made an amazing thing.
But nobody wanted it.”
Recognizing UX Failure
waste

8. LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. click)
how do we use
data to make
decisions?
what button
color is best?
how many
calls to
action?
what’s the
best color
palette?
how do we
keep users
engaged?
how do we
maintain
consistent
design?
what’s the best
navigation
flow?
how do we get
people to sign
up quickly?

9. LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. click)
how do we use
data to make
decisions?
what button
color is best?
how many
calls to
action?
what’s the
best color
palette?
how do we
keep users
engaged?
how do we
maintain
consistent
design?
what’s the best
navigation
flow?
how do we get
people to sign
up quickly?
how many
calls to
action?
Answer:
1 primary per view

10. LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. click)
how do we use
data to make
decisions?
what button
color is best?
how many
calls to
action?
what’s the
best color
palette?
how do we
keep users
engaged?
how do we
maintain
consistent
design?
what’s the best
navigation
flow?
how do we get
people to sign
up quickly?
Answer:
Define & commit
to design patterns
http://ui-patterns.com/
http://developer.yahoo.com/ypatterns/
how do we
maintain
consistent
design?

11. LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. click)
how do we use
data to make
decisions?
what button
color is best?
how many
calls to
action?
what’s the
best color
palette?
how do we
keep users
engaged?
what’s the best
navigation
flow?
how do we get
people to sign
up quickly?
how do we
maintain
consistent
design?

12. LUXR.CO AUGUST 2013
which shoes?

13. LUXR.CO AUGUST 2013
which shoes?

14. LUXR.CO AUGUST 2013
6 things
3 things

15. LUXR.CO AUGUST 2013
2 things
UX > UI
#1
Envision
+
Execute
#2

16. LUXR.CO AUGUST 2013
UX != UI

17. LUXR.CO AUGUST 2013
Product

18. LUXR.CO AUGUST 2013
UI

19. LUXR.CO AUGUST 2013
UX = mmmmmm

20. LUXR.CO AUGUST 2013
UX = mmmmmm

21. LUXR.CO AUGUST 2013
UX =a mindset
focused on delivering value to people
inspires the right kinds of ideas
defines “good”
guides decisions

22. LUXR.CO AUGUST 2013
UX Stack
Uses
Mary can...
Features
Users
Sketches,
prototypes,
wireframes,
pixels
Biz vision & purpose go here
why
what
how
Interactions
Brand
Voice
User stories
This Week
Needs
I need...
I want...
My goal is...
UI goes
here
BUILD
MEASURE
LEARN

23. LUXR.CO AUGUST 2013
UX = a clear story
With _________, _______ can
_________ and ___________,
product name
use #1 use #2{
using these features: ________
and __________feature #2
feature #1
{
in a way thatʼs __________,
__________, and __________.
attribute #1
attribute #2 attribute #3{
Meet ________, a ___________.name user type
{
uses
features
product,
brand &
voice
users
needs &
goals { ______ needs to ________
_______________.
Name need
(or goal)

24. LUXR.CO AUGUST 2013
UX = a clear story
Meet Erika, a socially engaged college student.
Erika needs to feel closely connected with
friends near and far, every day.
using status updates on her “wall”, messages,
comments and “likes”
in a way thatʼs universal, clean, consistent,
and fast.
With Facebook, Erika can share her latest
thoughts and see what her many friends are up to,

25. LUXR.CO AUGUST 2013
UX = a clear story
Meet Joe, a new startup entrepreneur.
Joe needs to feel confident that his product
design decisions really serve his customers.
using hands-on materials and online
video coaching
in a way thatʼs simple to complete, warm &
engaging, and fun.
With Luxr Learning, Joe can practice interviewing
customers and validate his assumptions,

26. LUXR.CO AUGUST 2013
The Luxr story

27. LUXR.CO AUGUST 2013
Hello, Bento!

28. LUXR.CO AUGUST 2013
Hello, Bento!

29. LUXR.CO AUGUST 2013
Hello, Bento!

30. LUXR.CO AUGUST 2013
Hello, Bento!

31. LUXR.CO AUGUST 2013
Hello, Bento!

32. LUXR.CO AUGUST 2013
Hello, Bento!

33. LUXR.CO AUGUST 2013
what went wrong?

34. LUXR.CO AUGUST 2013
what went wrong?
no clear cue
to get online
too much text
nobody read
hard to open
the box, grrrr
couldn’t see
the drawing in
the video
video set
looked boring
too many
pieces in the
box
couldn’t keep
track of different
guides
no blank
paper in box
folded blank
paper looked
weird
hard to set
up video
account
tape kept
falling out
fixed band on
journal was
annoying
belly band
fell off
impossible to
open Yay box
without a knife
didn’t know how
much time it
would take to do
stickynotes
shouldn’t be
wrapped
supplies box not
interesting
quote was
off-target
casual design
didn’t feel
“real”
velcro closure
on band kept
ripping off
sticker on
poster ripped
paper
where’s the
candy?
no easy way
to post a
photo to site
too much text
on login page
confused by
different brand
on video site
mobile app
complete fail
video instructions
didn’t exactly
match outcome
mono audio on
video was
distracting
wanted more
related boxes
clearer
instructions on
video step 5

35. LUXR.CO AUGUST 2013
the Luxr story
+ 3 people
x 20 days
= PRODUCT

36. LUXR.CO AUGUST 2013
no clear cue
to get online
too much text
nobody read
hard to open
the box, grrrr
couldn’t see
the drawing in
the video
video set
looked boring
too many
pieces in the
box
couldn’t keep
track of different
guides
no blank
paper in box
folded blank
paper looked
weird
hard to set
up video
account
tape kept
falling out
fixed band on
journal was
annoying
belly band
fell off
impossible to
open Yay box
without a knife
didn’t know how
much time it
would take to do
stickynotes
shouldn’t be
wrapped
supplies box not
interesting
quote was
off-target
casual design
didn’t feel
“real”
velcro closure
on band kept
ripping off
sticker on
poster ripped
paper
where’s the
candy?
no easy way
to post a
photo to site
too much text
on login page
confused by
different brand
on video site
mobile app
complete fail
video instructions
didn’t exactly
match oucome
mono audio on
video was
distracting
wanted more
related boxes
clearer
instructions on
video step 5
risk
time
MAKE
release
MEASURE
BUILD
LEARN
MEASURE
BUILD

37. LUXR.CO AUGUST 2013
}

38. LUXR.CO AUGUST 2013
}

39. LUXR.CO AUGUST 2013
}

40. LUXR.CO AUGUST 2013
}

41. LUXR.CO AUGUST 2013
Create the full story,
and use the entire
stack as reference.
#1
make the shift...
by doing this....
Validate the story with 2
interviews with real
people, each month.

42. LUXR.CO AUGUST 2013
Envision +
Execution
#2

43. LUXR.CO AUGUST 2013
Development is
an execution
function
#2
we think this...
so we do this...
Delegate the learning

44. LUXR.CO AUGUST 2013
Product
Owner
Dev
Dev
Dev
Dev
Dev
Dev
Dev}
Rest
of
the
World

45. LUXR.CO AUGUST 2013
UX&Design
Dev & Eng
•
blah blah
blah blah
blah blah
blah blah
PRODUCT
IDEAS
BALANCED TEAM
Biz/PM

46. LUXR.CO AUGUST 2013
Design
+ Development
+ Product Management
= 1 product team

47. LUXR.CO AUGUST 2013
Design
+ Development
+ Product Management
= 1 product team
mind

48. LUXR.CO AUGUST 2013
DESIGN
Empathizer-in-Chief
Design Mind
Understand the customer at an expert level.
Translate high-value needs into product.
Hone the craft.
Key Responsibility
Prioritize customer problems.

49. LUXR.CO AUGUST 2013
DEVELOPMENT
“Raise high the roof”
Development Mind
Envision the best possible solutions based on
available technology.
Commit to the outcome.
Key Responsibility
Recommend technologies
Measure outcomes over time.
•

50. LUXR.CO AUGUST 2013
PM & BUSINESS
Scales of Justice
Business Mind
Make fast, concrete decisions despite inadequate
evidence and conflicting priorities.
Identify the business value in customer needs.
Key Responsibility
Make the tough calls.
Delegate decisions to the appropriate person.

51. LUXR.CO AUGUST 2013
UX&Design
Dev & EngBiz/PM
executing
& evaluating
70%
understanding
& envisioning20%
deciding
10%
SHARED RESPONSIBILITY

52. LUXR.CO AUGUST 2013
Story
Lumatic
See the whole story as told at FailChat:
http://www.slideshare.net/ellendunne/failchat-ux-
comes-first-because-ux-is-everything-12883354
{ }

53. LUXR.CO AUGUST 2013
Dedicate 20% to
understanding needs &
exploring new &
emerging solutions.
#2
make the shift...
by doing this.... Connect tech to specific
user needs; measure
outcomes with data.

54. LUXR.CO AUGUST 2013
This way of
working is hard.

55. LUXR.CO AUGUST 2013
1 true design process
1. Define the problem you need to solve.
2. Define the as evidence of success.
3. Sketch many ideas.
4. Collaboratively pick the best bet.
5. Prototype it in the simplest, fastest,
cheapest way you can.
6. Test it with real people.
7. Iterate it and test it again.
8. Release as often as possible.
repeat

56. LUXR.CO AUGUST 2013
“The (validated) code validated!”
“The design is getting brilliant.
We know because people use it
more with each iteration.”
“We made an amazing thing.
Because our customers canʼt
live without it.”
Evidence you’ve made a shift

57. LUXR.CO AUGUST 2013
Geek out & learn more }

58. LUXR.CO AUGUST 2013
go be awesome.

59. LUXR.CO AUGUST 2013
Luxr makes tools to help startups deliver products that people want, need & love to buy.
Luxr.co • 3435 Cesar Chavez, San Francisco, CA • 94110
The Juhl, 353 E. Bonneville Ave., Las Vegas, NV • 89101
info@luxr.co • http://luxr.co • twitter: @luxrco • www.facebook.com/LUXrInc
Images + credits
• Ed Lea: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal
• Balanced Team model via Janice Fraser & Tim McCoy: http://www.slideshare.net/luxrco/a-new-model-of-product-
ownership-12867461
• Photos used: http://2.bp.blogspot.com/-OBby1esVyyI/UWORa6t0M-I/AAAAAAAATDA/fELr7Je801I/s640/enjoying+a+big+bowl+of
+Honey+Bunches+of+Oats.jpg
http://blogs.messiah.edu/expressed/files/2009/12/Adele_cereal.jpg
http://clearliferesults.com/wp-content/uploads/2011/09/man-eating-bowl-of-cereal.jpg
http://blog.bobsredmill.com//wp-content/uploads/2013/04/black-border1.jpg
http://cdn.madamenoire.com/wp-content/uploads/2012/01/Romaneio.png
http://i.stpost.com/asolo-fsn-95-gore-tex-hiking-boots-waterproof-for-men-in-cendre-dark-brown~p~72552_72~1500.3.jpg
http://www.ipanemaflipflops.co.uk/media/catalog/product/cache/1/image/2000x1200/9df78eab33525d08d6e5fb8d27136e95/s/u/
surf_temas_navy_mens_ipanema_flipflop_1.jpg
http://thefashionabledentist.com/wp-content/uploads/2012/03/Men%E2%80%99s-shoes-for-work-and-play.jpg
http://boxofficebuz.com/content/movies/249/stills/2010_our_family_wedding_002.jpg
http://us.123rf.com/400wm/400/400/paulschlemmer/paulschlemmer1205/paulschlemmer120500042/13845542-young-man-in-
orange-jacket-walking-hiking-outdoors-with-backpack-in-green-european-forest.jpg
http://www.freakingnews.com/pictures/62500/Tsunami-Coming-Towards-People-on-Beach--62678.jpg
• Lean book series via OʼReilly: http://oreilly.com/
* Slides available on slideshare: slideshare.net/intelleto