Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]

110
Design a product in 3 hours Designing with Lean UX UX Lisbon | Wednesday, June 04, 2014 Kate Rutter | @katerutter

Transcript of Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Design a product in 3 hours

Designing with Lean UX

UX Lisbon | Wednesday, June 04, 2014Kate Rutter | @katerutter

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Hello!Principal, Intelleto.comCo-Founder, Luxr.coSketchnoter, graphic recorderEntrepreneurship + UX

@katerutterhttp://intelleto.com

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

@katerutter@luxrco

#uxlx

TWEET!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Around the room intros* name* role * your favorite superpower!

Hello!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Letʼs get warmed up

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{5 min Activity}

Users + problems + solution

Sketch it outWho are the users?

What problems do they have?What would be a proposed solution?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Users + Problem + Solution map

Working parents with with kids

Task-a-doodle

“the DNA of your idea”May 2014

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Users + Problem + Solution map

a mobile app for delegating tasks

Working parents with with kids

need to know when something’s done

Too much to do, not enough timeneed to share tasks on the go

Task-a-doodle

“the DNA of your idea”3 min

May 2014

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

A class on how to produce an awesome UI

This is not...

(how do you know itʼs awesome?)

A session on making production wireframes or photoshop comps

(how do you know these arenʼt a waste of valuable time?)

A “perfect approach” or a rigid point of view on Great UX.

(100s of participants have used these techniques to define their

own unique Great UX.)

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

• Design = solving problems • Lean Startup concepts & mindset• Hands-on } make a product MVP• Lo-fi MVP -> validate -> build

This is about making products.

Focus • Simplify • Decide • TestMove forward.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

I am not an expert on your idea. You are.

My goal is to help you identify one way you can innovate using lean

practices...

so you can experiment andlearn first-hand if itʼs helpful.

What to expect...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

We are going to be working really, really, really fast.

What to expect...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

There is a purpose to this.

I will push you to get something down rapidly. In 3 hours, you will

have product concept you can validate.

We are going to be working really, really, really fast.

What to expect...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

You will be working solo and as peer pairs.

Two brains arebetter than one.

And weʼll keep talking to a minimum.(There is a break where we can get all social!)

What to expect...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

You may not like the pace/process/pressure/perspective, etc. etc.

That is okay.

All I ask is that you keepan open mind and try it.

What to expect...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

“But the code validated!”

“The design was brilliant. It just never launched.”

“We made an amazing thing.But nobody wanted it.”

What I NEVER want you to experience...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

“But the code validated!”

“The design was brilliant. It just never launched.”

“We made an amazing thing.But nobody wanted it.”

What I NEVER want you to experience...

FAIL

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

“But the code validated!”

“The design was brilliant. It just never launched.”

“We made an amazing thing.But nobody wanted it.”

What I NEVER want you to experience...

waste

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

About the whole “Lean” thing

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Build.Measure.

Learn

Lean startup?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

From The Lean Entrepreneur. B. Cooper & P. Vlaskovits.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Lean StartupStartup: a human institution designed to create new products or services under conditions of extreme uncertainty.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

2 Big Ideas

Empathy.Design.

Products!

User Experience

Build. Measure.

Learn!

Lean Startup

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

3 Key Concepts

Build. Measure.

Learn!

Validated

Learning

Get out of the building!

Customer

DevelopmentAgile

Development

Collaborate.Release.Improve!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

The Agile Manifesto came about at a ski scrum in February 2001.

The big idea...

over over over over

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Steve Blank introduced “Customer Development” in...um...2006.

The big idea...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Eric Ries wrote a blog post on Sept 8, 2008 titled “The Lean Startup.”

+incremental

releasesmake products

customers want

+reduce waste

The big synthesis...

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

• Experiments• Validated learning• Reduce waste

Lean Startup

These change everything.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

risk

timeDefine

The old way

Design

Develop

Release

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

risk

timeDefine

Design

Develop

Release

a better old way

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

risk

time

A different way

MAKE

release

MEASURE

BUILD

LEARN

MEASURE

BUILD

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

BUILD

MEASURE

LEARN

More cycles in less timereduce the risk.

faster!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Okay, fine.But how does this relate to

User Experience

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

UX =• a mindset• focused on delivering value• inspires the right kinds of ideas• guides decisions

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

UX != UI* Your first project: Remove any reference to UX/UI from all of your work. Replace it with UX + UI. This directive holds for the duration of your UX career.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Features

Users

Uses

Product

Needs

via @luxrco

sketches, prototypes, wireframespixelsUI

UX as a stackBUILD

MEASURELEARN

Company Purpose

Your vision & ideas

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Letʼs make stuff

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Rapid Sketching

Star people!

7 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

You can draw a person in 4 simple steps....

sketch via @luxrco

Star people

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Use simple shapes to put a person in a place.

sketch via @luxrco

Add context

inside outside

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

People have faces and emotions.

Expressions Matrix

3 mouths

+ 2 eyebrows

= 9 emotions (so sneaky!)

smile frown

up brows

neutral

down brows

start with this� no

brows

add a

mouth...

add

eyebrows...

sketch via @luxrco; also see @austinkleon

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Picture your user as a human person.

(Insert provisional personas here)

Who is it for?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Features

Users

Uses

Product

Needs

UX Stack

Company Purpose

Your vision & ideas

via @luxrco

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Who: Make a Persona

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Make a personaPortrait

5 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Make a personaFacts

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Write down...3 min

• Age• City where s/he lives• Family (married? kids? single? divorced?)

• Job role• Annual incomeBe specific.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Make a personaBehaviors

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Brainstorm 10 behaviors3 min

• What do they do that indicates that they are a good customer for you?

• How are they solving the problem now?

• Behaviors are verbs.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

more important

less important

2 min{Activity}

Divide into 2 piles

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

2 min{Activity}

Pass & Peer-write

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Break!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Make a personaNeeds & Goals

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

3 min

• What do they need to accomplish that will solve their problem?

• Why do they do the behaviors?

• How are they solving the problem now?

{Activity}

Brainstorm 10 needs & goals

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Divide into 2 pilesmore

importantless

important

.5 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Pass & Peer-write1 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

* Could enough people like this exist? (And can you find them to talk to them?) If no, make adjustments.

* Is this a specific person you know? If yes, make adjustments.

* Is the persona respectful? If no, make adjustments or re-do. Contempt is not helpful.

{Activity}

3 Checks

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Persona

Who is our user and what are their needs & goals?

What you have now:

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

i <3 empathy.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Act on user needs by identifying value propositions.

Whatʼs the value?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Features

Users

Uses

Product

Needs

UX Stack

Company Purpose

Your vision & ideas

via @luxrco

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

An example from Foodspotting

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Envision 6 uses

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Sketch 6-up uses7 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Work with your peer

Pass your work1-minute “quiet read”

30 seconds toConfirm clarity

1 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Dot-vote top picksPeers } dot 2 top uses

2 min

Founders } dot 1 from within the 2

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Redraw the top pick3 min

Mary

Task-a-doodle

Know when

someone in her

family finishes

a shared task.

April 2013

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Features

Users

Uses

Product

Needs

UX Stack

Company Purpose

Your vision & ideas

via @luxrco

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Brainstorm 3 features3 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Make a feature list.05 min

5-item to-do list

Task sharer

Status tracker

April 2013

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Persona

Who is our user and what are their needs & goals?

What can a user do with our product?

How will they do that?

MaryTask-a-

Know when

someone in her family

April 2013

Value prop

What you have now:

Limited features to support the use

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Uses make me frisky!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Measure what mattersby tracking

actionable metrics.

How do you knowitʼs working?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Product(black box)

Conversion Funnel

TrafficMeasuring what?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Product(black box)

Conversion Funnel

TrafficMeasuring what?

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Metrics checklista good metric... a great metric...

...makes you look at all the other metrics and say “none of those other numbers matter if we donʼt get this right first.”

...measures the usage of your product by a person. The usage should be specific to features that deliver value to your user.

vanity

total number of registered

users

unhelpful

sign-ups

% of users who share a

task 3+ times a day,per week

awesomebetter% of users who sign in 3+ times a

day,per week

good% of new users per

week

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Brainstorm 1 metric2 min

Note: When working, you can (and should) use the full Dump & Sort method for this.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

{Activity}

Improve your metric!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

3. Is there an object basis?

• “per user” [ ___/user]• “per user per week” (fancy!)• Examples: per user, per session, or by interaction or item (messages per file, emails per thread)

* not required, but super-helpful

• “per week” [ ___/wk ]• “per month” [ ___/mo]2. Is there a time basis?

• “number of...” [ # ]• “average number of...” [avg ]• “percent of...” [ % ]

1. Does the metric begin with a number?

Metrics check 1 min

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

% of users who share a

task 3+ times a day,per week

April 2013

{Activity}

Make a Dashboard

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Persona

Who is our user and what are their needs & goals?

What can a user do with our product?

How will they do that?

MaryTask-a-

Know when

someone in her family

April 2013

Value prop

What you have now:

Limited features to support the use

What does success look like?

Actionable metric to measure progress

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

metrics. better than a

bubbling brook.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Pull it all together.

Tell the story.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Features

Users

Uses

Product

Needs

UX Stack

Company Purpose

Your vision & ideas

via @luxrco

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

This is [product name] .

Meet...

MVP

The idea...

* Minimum Viable Product

2 min

MVC

MVP Narrative

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Making the most of the team

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

2 min

Your pair peer readsyour story back to you.

(Simply read the words on the page.)

Story time.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

1 min

Come up and shareyour story!

Exciting prizes for 2UX-entrepreneurs

who volunteer!

Pitch Practice

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Features

Users

Uses

Product

Needs

UX Stack

Company Purpose

Your vision & ideas

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

1. Sketch (especially of people)

2. Timebox! (speed kills the censor and keeps you moving)

3. Generate independently, discuss as a team(3 people ideal)

4. Dump & Sort (one item per Post-It, use Sharpie)

5. 2x2 organizing framework (help decision-making when lots of items)

6. Work at the wall 7. Quick decision-making techniques

(dot-vote, roman vote, stack rank)

Patterns of work

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

This way of working is hard. But itʼs worth it.

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Resources & Next Steps

• Validate! Do 3 customer development interviews (Within the next week, or even sooner if your audience is at UX Lisbon!)

• Startup Weekends & hackathonsStartupweekend.org

• Founders Institutefi.co

• OʼReilly Lean Books & Luxr Core Curriculum

• Bootstrapping your idea

• Crowdfunding, Peerfunding, Enterprise Incubators

Resources & Next Steps

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Geek out & learn tons more

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

Kate Rutter@katerutterhttp://intelleto.com

Thanks!

Designing with Lean UX | UX Lisbon 2014 | June 04, 2014 | @katerutter | intelleto.com

HANDOUTS

UX LIsbon : Designing with Lean UX Workshop : June 04, 2014 http://luxr.co @luxrco © 2014

Handouts

Design a product in 3 hours

Designing with Lean UX

UX LIsbon : Designing with Lean UX Workshop : June 04, 2014 http://luxr.co @luxrco © 2014

• Experiments• Validated learning• Reduce waste

Lean Startup

Customer Development • make products customers wantAgile Development • Iteration & incremental releasesLean Manufacturing • Reduce waste

Startup: a human institution designed to create a new product or service under conditions of extreme uncertainty.

UX LIsbon : Designing with Lean UX Workshop : June 04, 2014 http://luxr.co @luxrco © 2014

Features

Users

Uses

Product

NeedsCompany Purpose

sketches, prototypes, pixelsUI

BUILD

MEASURELEARN

UX Stack + Lean Startup

UX LIsbon : Designing with Lean UX Workshop : June 04, 2014 http://luxr.co @luxrco © 2014

Use basic supplies: sharpies, stickynotes and white paper

Dump & sort & 2x2 organizing

Go wide, then decide

Generate independently, discuss as a team. (3 people ideal)

Work at the wall

Quiet read (before discussion)

Sketch (especially of people)

Share info with Information radiators

Timebox (speed kills the censor)

Quick decisionmaking (dot vote, stack-rank)

Techniques Checklist

The Molecule

people

problem solution

have

addressesuse

Product name date

/ /

Facts Needs & Goals

Behaviors

Personadate

/ /

With _________________ , _________________ can...

Value Proposition 6-up Sketchesdate

/ /

With

can...

!

Value Propositiondate

/ /

featurefeature

feature

MVP Featuresdate

/ /

To deliver on that, we will build these features:

metric

by

Goal

/ /

Notes

Metrics Dashboarddate

/ /

To assess progress, we will measure these metrics:

metric

by

Goal

/ /

Notes

metric

by

Goal

/ /

Notes

UX LIsbon : Designing with Lean UX Workshop : June 04, 2014 http://luxr.co @luxrco © 2014

106

a great metric......makes you look at all the other metrics and say “none of those other numbers matter if we donʼt get this right first.”

a good metric......measures the usage of the product by a person. The usage should be specific to features that deliver value to the user.

Making metrics actionable

vanity good betterunhelpful

total number of registered

users

% of users who share a

task 3+ times a day,

per week

sign-ups

awesome% of users who sign in 3+ times a

day,per week

% of new users per

week

Does the metric begin with a number?• “number of...” [ # ]• “average number of...” [avg ]• “percent of...” [ % ]

Is there a time basis?Is it comparative? • “per week” [ ___/wk ]• “per month” [ ___/mo]

Is there an object basis?* not required, but super-helpful• “per user” [ ___/user] • “per user per week” (fancy!)

1Metrics Check

2 3

UX LIsbon : Designing with Lean UX Workshop : June 04, 2014 http://luxr.co @luxrco © 2014

Further Reading