lean ux workshop @ makers of barcelona (mob) + agile bcn meetup

48
LEAN UX WORKSHOP “A guide to your first prototype” BARCELONA JULY ‘16 @harriken Jose Berengueres

Upload: jose-oriol-berengueres

Post on 23-Jan-2017

487 views

Category:

Design


4 download

TRANSCRIPT

Page 1: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

LEAN UX WORKSHOP“A guide to your first prototype”

BARCELONA JULY ‘16

@harriken

Jose Berengueres

Page 2: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 2

Outline

1. What is Lean UX?2. Prototype vs. MVP3. Types of Prototypes4. Examples of MVPs5. Further reading6. Workshop time!

Page 3: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 3

1. What is Lean UX?

THE IRON TRIANGLE

Page 4: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 4

1. What is Lean UX?

LEAN UX minimize time

not money

Page 5: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 5

1. What is Lean UX?

Quality/Success

Number of Iterations

Page 6: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 6

1. What is Lean UX?

LEAN UX minimize time by making iteration

cycle faster

Page 7: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Eric Ries @ http://theleanstartup.com/principles

Experiment/Feedback Loop

1. What is Lean UX?

Page 8: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 8

Outline

1. What is Lean UX?2. Prototype vs. MVP3. Types of Prototypes4. Examples of MVPs5. Further reading6. Workshop time!

Page 9: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

2. Prototype vs. MVP

Prototype vs MVPA Prototype’s goal is to test

product design or technical hypotheses.

An MVP’s goal is to test business hypotheses as well as product design or technical hypotheses.

Page 10: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 10

2. Prototype vs. MVP

@boagworld

Page 11: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

2. Prototype vs. MVP

HOW WOULD YOU BUILD A CAR?

A

B

Page 12: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

2. Prototype vs. MVP

Work Work

feed-back point

Risk

Page 13: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 13

Outline

1. What is Lean UX?2. Prototype vs. MVP3. Types of Prototypes4. Examples of MVPs5. Further reading6. Workshop time!

Page 14: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Paper Prototypes

Tools often used:

● Paper● Pen● Markers

Example Here

3. Types of Prototypes

Page 15: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Paper prototypes are best for

• Producing tangible ideas from abstract ideas• Preliminary team discussions• Drafting layouts and flows

3. Types of Prototypes

Page 16: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Low Fidelity Prototypes

Tools often used:

● Balsamiq● Axure

3. Types of Prototypes

Page 17: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Low fidelity prototypes are best for

• Content driven• Focuses on layouts and flows • Free from arguments related to aesthetic values like

colors, typography, illustrations, images.

3. Types of Prototypes

Page 18: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

High Fidelity Prototypes

Tools often used:

● Invision● Marvel● Sketch● Photoshop● Justinmind

Example Here

3. Types of Prototypes

Page 19: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

High fidelity prototypes are best for:

• Content driven• Focuses on layouts and flows • Represents the look and feel of the real product• Can be used for user research

3. Types of Prototypes

Page 20: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Functional Prototypes

Tools often used:

● App Inventor● Origami● Framer● Twitter Bootstrap● HTML & CSS or more

3. Types of Prototypes

Page 21: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Functional prototypes are best for

• Content driven• Focuses on layouts and flows • Represents the look and feel as well as the actual

experience of the product• Best for user research

3. Types of Prototypes

Page 22: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Key Takeaways

• Different types of prototypes with their own usecase

• Prototypes are meant for iterations and progressions. for e.g. sketching to low fidelity prototype to high fidelity prototype to functional prototypes

• Testing technical hypotheses

3. Types of Prototypes

Page 23: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 23

Outline

1. What is Lean UX?2. Prototype vs. MVP3. Types of Prototypes4. Examples of MVPs5. Further reading6. Workshop time!

Page 24: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs

Page 25: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs – Blog first groupon

Page 26: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs – Hackernews video

Page 27: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs – Kickstarter first

Page 28: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs – Craig’s List first

Page 29: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Key Takeaways• An MVP is the first version of your idea intended to communicate value to

your target users or customers

• Almost anything can be an MVP as long as it can prove your idea to be a viable business opportunity

• It’s absolutely normal for your MVP to suck

• The MVP should be a way to learn more about your users and the problem you’re trying to solve

4. Examples of MVPs

Page 30: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs - Palm

Page 31: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs - Palm

Jeff Hawkin’s Palm Pilot Prototype

Page 32: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of MVPs - Honda

Iterations: Motorized bicycle for wife Motorcycle company Car company

Page 33: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

4. Examples of (non) MVPs – Toyota type AA

First iteration: Luxury car “AA” (3 years to make the engine) epic fail

Page 34: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 34

1. What is Lean UX?

Page 35: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

And now, the prototyping session

Get your hands dirty

6. Workshop time

Page 36: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Before the Prototype, there is the Business Model

https://github.com/rodw/paper-forms/blob/master/lean-canvas/lean-canvas.pdf?raw=true

Page 37: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Before the Prototype, there is the Business Model

Page 38: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Understand the Problems of Customer Segments

Problem

Revenue Streams

UVP Unfair Advantage

Customer Segments

Channels

Solution

Key Metrics

Cost Structure

Page 39: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Problem

Revenue Streams

UVP Unfair Advantage

Customer Segments

Channels

Solution

Key Metrics

Cost Structure

Define the Solution and Unique Value Proposition

Page 40: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

• Bachelors who are university students and professionals

• Age 20 to 35• Primarily expatriates • Do not own cars

Customer Segment

Page 41: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

• Don’t know who to call or where to find affordable places

• Difficulty in knowing whether a roommate is the right fit

• Don’t know if the neighborhood has all the necessary facilities nearby (including supermarkets, hospitals, public transport)

Problems

Page 42: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

User PersonasJanet● 19 years old● International Student from South Africa● Lives on Campus● Prefers roommates who are clean, non party animals and ready

to give space during study hours Mike● 28 years old● Banking professional at EmiratesNBD● Lives in Discovery Gardens● Prefers roommates who do their share of the cleaning, cooking

as well as pays rents timely

Page 43: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Map the User Journey (number the steps, story)

& draw the UVP Group - 15 minutes

Page 44: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Sketch Your App Individual - 15

minutes

Page 45: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Critique each other’s sketches

10 minutes

Page 46: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Pool best ideas from sketches into one final version then use Marvel to

prototype

Group - 20 minutes

Page 47: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

So what next? Depending on your level of confidence:• Start with a low fidelity prototype - useful if

you’re working with a team of developers and a designer who can convert to high fidelity

• Or skip to high fidelity prototype - useful if you’re skilled in Sketch or Photoshop to create a glimpse of the look and feel

• Or skip to functional prototype if you have mapped out all the use cases thoroughly.

Page 48: Lean UX workshop @  Makers of Barcelona (MOB) + Agile BCN Meetup

Berengueres | 48

8. Acknowledgement (original presentation adapted from)

Ashiqur [email protected]