Top ways developers mess up on User Experience(and how to avoid them)

@ HEAVYBIT • AUGUST 1, 2013

SF Rails +

6

LUXR.CO AUGUST 2013

@katerutter@luxrco

Kate RutterCo-Founderwww.luxr.co

TWEET!

LUXR.CO AUGUST 2013

Luxr makes tools to help startups deliver products that people want, need & love to buy.

LUXR.CO AUGUST 2013

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

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

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

LUXR.CO AUGUST 2013

what goes on the sub nav?

those pesky questionssingle 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

consistentdesign?

what’s the best navigation

flow?how do we get people to sign up quickly?

LUXR.CO AUGUST 2013

what goes on the sub nav?

those pesky questionssingle 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

consistentdesign?

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

LUXR.CO AUGUST 2013

what goes on the sub nav?

those pesky questionssingle 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

consistentdesign?

what’s the best navigation

flow?how do we get people to sign up quickly?

Answer:Define & commit to design patternshttp://ui-patterns.com/http://developer.yahoo.com/ypatterns/

how do we maintain

consistentdesign?

LUXR.CO AUGUST 2013

what goes on the sub nav?

those pesky questionssingle 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

consistentdesign?

LUXR.CO AUGUST 2013

which shoes?

LUXR.CO AUGUST 2013

which shoes?

LUXR.CO AUGUST 2013

6 things

3 things

LUXR.CO AUGUST 2013

2 thingsUX > UI

#1Envision

+Execute

#2

LUXR.CO AUGUST 2013

UX != UI

LUXR.CO AUGUST 2013

Product

LUXR.CO AUGUST 2013

UI

LUXR.CO AUGUST 2013

UX = mmmmmm

LUXR.CO AUGUST 2013

UX = mmmmmm

LUXR.CO AUGUST 2013

UX =a mindset

focused on delivering value to people

inspires the right kinds of ideas

defines “good”

guides decisions

LUXR.CO AUGUST 2013

UX Stack

UsesMary can...

Features

Users

Sketches, prototypes,wireframes,

pixels

Biz vision & purpose go here

whywhathow

InteractionsBrandVoice

User stories

This Week

NeedsI need...I want...My goal is...

UI goes here�

BUILD

MEASURELEARN

LUXR.CO AUGUST 2013

UX = a clear story

With _________, _______ can _________ and ___________,

product nameuse #1 use #2{

using these features: ________ and __________feature #2

feature #1{in a way thatʼs __________, __________, and __________.

attribute #1attribute #2 attribute #3{

Meet ________, a ___________.name user type{

usesfeaturesproduct, brand & voice

usersneeds & goals { ______ needs to ________

_______________.Name need

(or goal)

LUXR.CO AUGUST 2013

UX = a clear storyMeet 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,

LUXR.CO AUGUST 2013

UX = a clear storyMeet 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,

LUXR.CO AUGUST 2013

The Luxr story

LUXR.CO AUGUST 2013

Hello, Bento!

LUXR.CO AUGUST 2013

Hello, Bento!

LUXR.CO AUGUST 2013

Hello, Bento!

LUXR.CO AUGUST 2013

Hello, Bento!

LUXR.CO AUGUST 2013

Hello, Bento!

LUXR.CO AUGUST 2013

Hello, Bento!

LUXR.CO AUGUST 2013

what went wrong?

LUXR.CO AUGUST 2013

what went wrong?

no clear cueto 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 blankpaper in box

folded blank paper looked

weird

hard to setup video account

tape kept falling out

fixed band on journal was

annoying

belly bandfell 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 wasoff-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 wayto 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

LUXR.CO AUGUST 2013

the Luxr story

+ 3 peoplex 20 days

= PRODUCT

LUXR.CO AUGUST 2013

no clear cueto 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 blankpaper in box

folded blank paper looked

weird

hard to setup video account

tape kept falling out

fixed band on journal was

annoying

belly bandfell 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 wasoff-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 wayto 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

LUXR.CO AUGUST 2013

}

LUXR.CO AUGUST 2013

}

LUXR.CO AUGUST 2013

}

LUXR.CO AUGUST 2013

}

LUXR.CO AUGUST 2013

Create the full story, and use the entire stack as reference.

#1make the shift...

by doing this.... Validate the story with 2 interviews with real people, each month.

LUXR.CO AUGUST 2013

Envision + Execution

#2

LUXR.CO AUGUST 2013

Development is an execution function

#2

we think this...

so we do this...Delegate the learning

LUXR.CO AUGUST 2013

Product Owner

Dev

Dev

Dev

Dev

DevDev

Dev}Restof

theWorld

LUXR.CO AUGUST 2013

UX

& D

esig

nDev & Eng

•

blah blahblah blah

blah blahblah blah

PRODUCT IDEAS

BALANCED TEAM

Biz/PM

LUXR.CO AUGUST 2013

Design+ Development

+ Product Management

= 1 product team

LUXR.CO AUGUST 2013

Design+ Development

+ Product Management

= 1 product teammind

LUXR.CO AUGUST 2013

DESIGNEmpathizer-in-Chief

Design MindUnderstand the customer at an expert level.

Translate high-value needs into product.

Hone the craft.

Key ResponsibilityPrioritize customer problems.

LUXR.CO AUGUST 2013

DEVELOPMENT“Raise high the roof”

Development MindEnvision the best possible solutions based on available technology.

Commit to the outcome.

Key ResponsibilityRecommend technologies

Measure outcomes over time.

•

LUXR.CO AUGUST 2013

PM & BUSINESSScales of Justice

Business MindMake fast, concrete decisions despite inadequate evidence and conflicting priorities.

Identify the business value in customer needs.

Key ResponsibilityMake the tough calls.

Delegate decisions to the appropriate person.

LUXR.CO AUGUST 2013

UX

& D

esig

nDev & EngBiz/PM

executing& evaluating

70%

understanding& envisioning20%

deciding

10%

SHARED RESPONSIBILITY

LUXR.CO AUGUST 2013

StoryLumatic

See the whole story as told at FailChat:http://www.slideshare.net/ellendunne/failchat-ux-comes-first-because-ux-is-everything-12883354{ }

LUXR.CO AUGUST 2013

Dedicate 20% to understanding needs & exploring new & emerging solutions.

#2make the shift...

by doing this.... Connect tech to specific user needs; measure outcomes with data.

LUXR.CO AUGUST 2013

This way of working is hard.

LUXR.CO AUGUST 2013

1 true design process1. 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

�

�

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

LUXR.CO AUGUST 2013

Geek out & learn more }

LUXR.CO AUGUST 2013

go be awesome.

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 • 89101info@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.jpghttp://blogs.messiah.edu/expressed/files/2009/12/Adele_cereal.jpghttp://clearliferesults.com/wp-content/uploads/2011/09/man-eating-bowl-of-cereal.jpghttp://blog.bobsredmill.com//wp-content/uploads/2013/04/black-border1.jpghttp://cdn.madamenoire.com/wp-content/uploads/2012/01/Romaneio.pnghttp://i.stpost.com/asolo-fsn-95-gore-tex-hiking-boots-waterproof-for-men-in-cendre-dark-brown~p~72552_72~1500.3.jpghttp://www.ipanemaflipflops.co.uk/media/catalog/product/cache/1/image/2000x1200/9df78eab33525d08d6e5fb8d27136e95/s/u/surf_temas_navy_mens_ipanema_flipflop_1.jpghttp://thefashionabledentist.com/wp-content/uploads/2012/03/Men%E2%80%99s-shoes-for-work-and-play.jpghttp://boxofficebuz.com/content/movies/249/stills/2010_our_family_wedding_002.jpghttp://us.123rf.com/400wm/400/400/paulschlemmer/paulschlemmer1205/paulschlemmer120500042/13845542-young-man-in-orange-jacket-walking-hiking-outdoors-with-backpack-in-green-european-forest.jpghttp://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