how to make something awesome - lean digital product design

40
MAKE SOMETHING AWESOME h to LEAN DIGITAL PRODUCT DESIGN METHODOLOGY, or…

Upload: renee-racine-kinnear

Post on 22-Jan-2017

593 views

Category:

Design


0 download

TRANSCRIPT

Page 1: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

L E A N D I G I T A L P R O D U C T D E S I G N M E T H O D O L O G Y, o r …

Page 2: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

KEY METRICS OF “AWESOME”

• ANSWERS CUSTOMER NEED • IN A WAY THAT ACHIEVES BUSINESS GOALS • IS RIGHT FOR THE BRAND • AND MAKES YOU PROUD

Page 3: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

but first… WHAT DOES IT MEAN TO BE LEAN?

Page 4: How to Make Something Awesome - Lean Digital Product Design

W E B E L I E V E I N T H E P I L L A R S O F L E A N

EARLY CUSTOMER VALIDATION over releasing products with unknown end-

user value

1

COLLABORATIVE DESIGNover designing on an island

2

SOLVING USER PROBLEMSover designing the next ‘cool’ feature

3

MEASURING KPI’s over undefined success metrics

4

APPLYING APPROPRIATE TOOLSover following a rigid plan

NIMBLE DESIGNover heavy wireframes, comps and specs

5

6

Page 5: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

so now… WHAT DOES OUR PRODUCT DESIGN MODEL LOOK LIKE?

Page 6: How to Make Something Awesome - Lean Digital Product Design

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR.

MAKE SOMETHING AWESOMEhow to

THINK. BUILD. MEASURE. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

Page 7: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

WHAT SHOULD WE BE WORKING ON?

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR. THINK. BUILD. MEASURE. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

Page 8: How to Make Something Awesome - Lean Digital Product Design

HEAR.

levelling up… CUSTOMER EMPATHY IS GOOD, BUT INTIMACY IS THE GOAL

Page 9: How to Make Something Awesome - Lean Digital Product Design

levelling up… CUSTOMER EMPATHY IS GOOD, BUT INTIMACY IS THE GOAL

Understanding the feelings, needs and priorities of the customer.

EMPATHY

Page 10: How to Make Something Awesome - Lean Digital Product Design

levelling up… CUSTOMER EMPATHY IS GOOD, BUT INTIMACY IS THE GOAL

Understanding the feelings, needs and priorities of the customer.

EMPATHY

Having a pre-existing relationship with the customer that is two-way,

emotional and authentic.

INTIMACY

Page 11: How to Make Something Awesome - Lean Digital Product Design

Indigo excels in the area of customer intimacy.

We not only actively listen (feedback, ideas) — we have pre-existing relationships with thousands of our customers.

This allows us to engage and involve our customers in real-time.

Page 12: How to Make Something Awesome - Lean Digital Product Design

HEAR.

Indigo excels in the area of customer intimacy.

We not only actively listen (feedback, ideas) — we have pre-existing relationships with thousands of our customers.

This allows us to engage and involve our customers in real-time.

UX TOOLBOX

PERSONAS CUSTOMER PANEL

SURVEYS JOURNEY MAPPING

FOCUS GROUPS INTERVIEWS

IDEA SHARING

Page 13: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

SHOULD WE FIX THE PROBLEM? HOW?

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR. THINK. BUILD. MEASURE. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

Page 14: How to Make Something Awesome - Lean Digital Product Design

THINK.

high level… WHAT’S OUR VISION?

Page 15: How to Make Something Awesome - Lean Digital Product Design

high level… WHAT’S OUR VISION?

“Kata” is a product design model used to set a project vision and maintain focus on continuous improvement.

KATA ASKS:

1. What is the actual condition (now)?

2. What is the target condition (goal)?

3. What obstacles are preventing us from reaching the target condition? Is there a more realistic short term target for quick improvement?

4. What is our next step? What do we expect to happen after that?

IMPROVEMENT THEME:

NOW: REALISTIC TARGET:

DEFINITION OF AWESOME: FIRST STEPS:

Page 16: How to Make Something Awesome - Lean Digital Product Design

high level… WHAT’S OUR VISION?

1. What matters the most? 2. How will our product achieve that? 3. Will that be in line with our design principles?

Using our kata as our context, we define our vision:

Page 17: How to Make Something Awesome - Lean Digital Product Design

W E S E T O U R C O U R S E A S A T E A M

THIS IS FOR (WHO):customers who have gift cards

BECAUSE THEY NEED (WHAT):to use them easily

AND WE WANT TO (GOAL):make it as awesome as using a saved credit card

Page 18: How to Make Something Awesome - Lean Digital Product Design

1. Add joy. 2. Remove stress. 3. Enrich the moment. 4. Tell a story. 5. Do the right thing.

Our Experience Design Principles

Page 19: How to Make Something Awesome - Lean Digital Product Design

1. Add joy. 2. Remove stress. 3. Enrich the moment. 4. Tell a story. 5. Do the right thing.

Our Experience Design Principles UX TOOLBOX

KATA GRID DESIGN PRINCIPLES VISION STATEMENT

KPI’S

Page 20: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR. THINK. BUILD. MEASURE. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

HOW DO WE GET IT RIGHT?

Page 21: How to Make Something Awesome - Lean Digital Product Design

BUILD.

wireframes are dead… THE OLD VS NEW UX

Page 22: How to Make Something Awesome - Lean Digital Product Design

We used to design in a vacuum.

wireframes are dead… THE OLD VS NEW UX

Page 23: How to Make Something Awesome - Lean Digital Product Design

We used to design in a vacuum.

We’d sit alone for weeks and produce painstakingly complete experiences. We drew and we carefully documented so the team

could interpret them later.

The design process would take us weeks. Our wireframes were our babies.

By the time they were ready, we were in love with them.

Like proud parents, we’d reveal them to the team…

Page 24: How to Make Something Awesome - Lean Digital Product Design

wait… what do you MEAN, you want to make changes?

Page 25: How to Make Something Awesome - Lean Digital Product Design

WE DON’T WIREFRAME ANYMORE… WE SKETCH.

IT’S EASIER TO LET GO OF A WHITEBOARD DRAWING than HOURS OF OMNIGRAFFLE.

T H E N E W U X

Page 26: How to Make Something Awesome - Lean Digital Product Design

1. Does this answer the need (in a way that’s right for the brand)? 2. What here is hard to do? 3. Is it worth doing? 4. What alternatives are there that might be easier/faster?

After we sketch, we ask ourselves 4 questions:

Page 27: How to Make Something Awesome - Lean Digital Product Design

PROVE IMPROVE

Page 28: How to Make Something Awesome - Lean Digital Product Design

PROVE IMPROVE W E T E S T A T E V E R Y S T A G E

A/B TEST released code is tested in field to see if we can improve again.

SKETCH we collaborate on whiteboards and paper. sketches are shown to stakeholders. we improve.

PROTOTYPE we use rapid prototyping tools to create a testable experience. prototypes are shown to end-users. we improve.

CODE DEMO code is demo’d to stakeholders. feedback taken and incorporated. we improve.

RELEASE code is released to production (or held in a staging area).

Page 29: How to Make Something Awesome - Lean Digital Product Design

A/B TEST released code is tested in field to see if we can improve again.

SKETCH we collaborate on whiteboards and paper. sketches are shown to stakeholders. we improve.

PROTOTYPE we use rapid prototyping tools to create a testable experience. prototypes are shown to end-users. we improve.

CODE DEMO code is demo’d to stakeholders. feedback taken and incorporated. we improve.

RELEASE code is released to production (or held in a staging area).

W E T E S T A T E V E R Y S T A G EPROVE IMPROVE

UX TOOLBOX

MODERATION EXPERTISE

PROTOTYPING TEST PLANNING

Page 30: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR. THINK. BUILD. MEASURE. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

WE’RE PRETTY SURE WE GOT IT RIGHT, BUT JUST IN CASE…

Page 31: How to Make Something Awesome - Lean Digital Product Design

MEASURE.

okay, we have a great product in the market… NOW, PROVE IT AGAIN

Page 32: How to Make Something Awesome - Lean Digital Product Design

A/B TESTINGIncremental release of new features, allows us to limit the damage of unsuccessful products and accurately

measure the impact of successful ones.

okay, we have a great product in the market… NOW, PROVE IT AGAIN

Page 33: How to Make Something Awesome - Lean Digital Product Design

but also… LEAVE THE BUILDING

Page 34: How to Make Something Awesome - Lean Digital Product Design

USER TESTING

# OF TEST SUBJECTS

USA

BIL

ITY

PR

OB

LEM

S FO

UN

D

0%

25%

50%

75%

100%

0 3 6 9 12 15

Nielsen’s diagram depicts a diminishing amount of useful feedback after testing with just five users. This means in-field testing can be done quickly, painlessly and at a very low cost.

Page 35: How to Make Something Awesome - Lean Digital Product Design

USER TESTING

# OF TEST SUBJECTS

USA

BIL

ITY

PR

OB

LEM

S FO

UN

D

0%

25%

50%

75%

100%

0 3 6 9 12 15

Nielsen’s diagram depicts a diminishing amount of useful feedback after testing with just five users. This means in-field testing can be done quickly, painlessly and at a very low cost.

UX TOOLBOX

A/B TESTING USER TESTING

USER RESEARCH

Page 36: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR. THINK. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

LOOK BACK AND LEARN.

BUILD. MEASURE.

Page 37: How to Make Something Awesome - Lean Digital Product Design

RETROSPECTIVE

Where did we fail? What did we learn?

What will we change?

Page 38: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEhow to

but wait… HOW IS THIS BETTER THAN WATERFALL?

WHAT’S THE NEED/PROBLEM?

WHAT DOES “AWESOME” LOOK LIKE?

HEAR. THINK. BUILD. MEASURE. RESET.

BETTER

HOW CAN WE IMPROVE QUICKLY?

NOW:

WHAT’S THE NEED/PROBLEM?

GOAL:WHAT DOES “AWESOME” LOOK LIKE?

Page 39: How to Make Something Awesome - Lean Digital Product Design

but wait… HOW IS THIS BETTER THAN WATERFALL?

TIME

RIS

K FAILURE IS CATASTROPHIC

EARLY FAILURES + PIVOTS = A LOT OF PROOF

Page 40: How to Make Something Awesome - Lean Digital Product Design

MAKE SOMETHING AWESOMEand that’s how you