55
Designing an MVP that works for your users Ariadna Font Llitjós UX Lead & Development Manager IBM, Big Data @quicola #LeanUXNYC #LeanUX ariadna.font.cat

Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Embed Size (px)

DESCRIPTION

2 and 1/2 hour workshop that covers contextual inquiry, empathy map, user experience map, MVP, elevator pitch, flow diagrams, stories, paper prototype and guerrilla usability testing.

Citation preview

Page 1: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Designing an MVP that works for your users Ariadna Font Llitjós

UX Lead & Development Manager IBM, Big Data

@quicola #LeanUXNYC #LeanUX ariadna.font.cat

Page 2: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013
Page 3: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Write your expectations for this session

Ariadna Font Llitjós @quicola

on a sticky

Page 4: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

The Plan

Theory Brief Description of UX techniques User Research, Scoping, Prototyping and Testing

Practice

Focus on delivering an MVP fast with user-driven design

Collaborative design session - Build a Mobile App!

20 m

in

2 ho

urs

Ariadna Font Llitjós @quicola

Page 5: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Where are you?

UX

No UX

Product dev No product dev

Ariadna Font Llitjós @quicola

Page 6: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Paper prototype Usability Testing

Qualitative

Usability Testing

Quantitative Usability Testing

Pair testing

Controlled

experiments (A/B Testing)

Heuristic

evaluation

Cognitive walkthrough

Sketches

Flow diagram

Wireframes

Paper prototype

Mockups

Functional prototype

Contextual inquiry

(CI)

Personas

Empathy map

Stakeholder map

User Experience map

Journey map

Heuristic evaluation

Cognitive walkthrough

Benchmarking

Collaborative design

sessions (most of this workshop)

Brainstorming

Storyboard

Sketchboard

Inception deck

MVP

Elevator pitch

3 Must have goals

Flow diagram

Stories

Story map

“Agile schedule”

BDD

Page 7: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 8: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Contextual Inquiry (User Research)

First hand observation of how people perform and structure their work (or any other relevant tasks)

Who does it? UX person or other team member. A pair of observers is ideal

Key benefits: • Best way to understand your users

• Only way to know what the real work flow/process is (vs the official one)

• Opportunity to discuss with users what they are doing and why

Ariadna Font Llitjós @quicola

Page 9: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

(Lean) Personas Characterization of a type of user that we want to target with our product/application

Who does it? Ideally, UX or somebody who has done some user research.

Key Benefits: • Document user research

• Remind team of users needs and motivations (different from managers and buyers)

• Allow team to ground communication throughout development

Ariadna Font Llitjós @quicola

Page 10: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Empathy Map

Explore a target user (persona) from different perspectives: Who am I? Behavior, See –Motivations, Do – Features, Say, Feel

Who does it? The Team

Key Benefits:

• Very quick way to have a holistic view of your target user

•  Forces you to think about more than their role

• Allow team to ground communication throughout development

Ariadna Font Llitjós @quicola

Page 11: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

User experience map

Visual representation of the user workflow for accomplishing a goal. Key elements include:

• Questions to signal areas where more information/understanding is needed

• Comments with known information that clarifies / lends meaning

•  Ideas to illustrate an interesting concept that could enhance a step

Who does it? The team

Key Benefits: • Make team’s (lack of) knowledge explicit

• Good to figure out areas that need (further) user research

Ariadna Font Llitjós @quicola

Page 12: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 13: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Rules for brainstorming

Defer judgment.

Encourage wild ideas.

Build on the ideas of others.

Stay focused on the topic.

Be visual.

One conversation at a time.

Go for quantity.

Ariadna Font Llitjós @quicola

Page 14: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Storyboard

Use of story telling to quickly visualize/share a solution to specific problem making use of personas and their behaviors, stories and any known constraints.

Who does it? The Team

Key Benefits: • Help us think about the problem in a creative way

•  Facilitates focused communication

• Affordable and easy to do

Ariadna Font Llitjós @quicola

Page 15: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Sketchboard

It’s like story boarding but with sketches, almost like a biomap of the system you are building or about to build.

Who does it? Team with UX/designer’s help

Key Benefits: • Provides Big Picture using initial design ideas

• Very iterative and highly collaboratively

• Very focused requirement discussions

Ariadna Font Llitjós @quicola

Page 16: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 17: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Minimal Viable Product - MVP

•  (First) product version to test our ideas as quickly and cheaply as possible.

• An MVP has just those features that allow the product to be deployed and validated, and no more.

•  "The minimum viable product is that version of a new product (or feature) which allows a team to collect the maximum amount of validated learning about customers with the least effort.”

•  Is not a minimal product, it’s a strategy and process directed towards making and selling a product to customers.

•  The MVP works together with a build-measure-learn cycle: developing software, gathering customer feedback, and learning from it.

Ariadna Font Llitjós @quicola

Page 18: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Elevator Pitch

For [target user] !

who [statement of need or opportunity] !

the [product/app name] is a [product category] !

that [key benefit, compelling reason to buy/use]. !

Unlike [primary competitive alternative] !

our product/app [statement of primary differentiation]!

Who does it? The Team

Key Benefits: • Allows team to focus on differentiator feature(s) and direct their energy to

features with the highest business value

• Quick and inexpensive

!

Ariadna Font Llitjós @quicola

Page 19: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

3 Must have goals

1.  …

2.  …

3.  …

Anything else goes in the Nice-to-have category.

Good to have a “Will not do/have” category as well.

Ariadna Font Llitjós @quicola

Page 20: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

User stories

Software system requirement formulated in one or two sentences in everyday or business language that makes explicit the user’s need. Example:

As a [type of user] !

I want to [perform some task] !

so that I can [reach some goal]!

Who does this? The team (dev, tester, doc or UX)

Key Benefits: •  Provides a thinking template; token for a conversation

•  Description of why the product needs to do what it does

Ariadna Font Llitjós @quicola

Page 21: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

User stories

Software system requirement formulated in one or two sentences in everyday or business language that makes explicit the user’s need. Example:

As a [type of user] !

I want to [perform some task] !

so that I can [reach some goal]!

Who does this? The team (dev, tester, doc or UX)

Key Benefits: •  Provides a thinking template; token for a conversation

•  Description of why the product needs to do what it does

Ariadna Font Llitjós @quicola

Page 22: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 23: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 24: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Flow diagram

Visualize the workflow the user has to follow through the application to complete a task or achieve a goal.

Can I use it?

Who does it? The Team

Key Benefits: • Quick way to run through the system from a user perspective

• Allows you to identify gaps in your current flow

• Affordable and easy to do

Ariadna Font Llitjós @quicola

Page 25: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Wireframes

Grayscale mockups showing layout and position of page elements (can range from low-fidelity to exact grid-based resolution)

Who does this? Typically UX, designer, but anyone can do it!

Key Benefits: • Easiest/cheapest way to realize and test ideas

• Great to get early feedback

• Can be done at any stage of development

Ariadna Font Llitjós @quicola

Page 26: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Paper Prototype

Ariadna Font Llitjós @quicola

Page 27: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 28: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Paper prototype usability testing

Usability testing on paper versions of wireframes or sketches that users can simulate slicks and talk through their thoughts and decisions

Who does it? Anyone can do this (be an observer)

Key Benefits: •  Fastest and cheapest way to validate ideas/assumptions

• Results can be fed back into the design process immediately

• You can do this at any time you are not sure what is the best UI for a specific problem

Ariadna Font Llitjós @quicola

Page 29: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Usability Testing Facilitation 101

• Give user a specific task. Example: from the homepage, navigate to the Inspiration Zone and see if there is anything there that you’d like to buy; pretend there is, buy it.

• Use the think-out-loud protocol

• Stay neutral, non-judgmental. The user is never wrong.

“We’re testing the product, not you”

•  Just observe, after stating the task, don’t tell them what to do or how to do it.

•  Create questions that don’t bias the responses you hope to get. •  Biased Q: Was it easy for you to sign up for the product

•  Unbiased Q: Overall please rate how difficult or easy it was to sign up for this product 1 is difficult, 7 is easy.

Ariadna Font Llitjós @quicola

Page 30: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

To learn more about how to run your own UT…

Read this book

Ariadna Font Llitjós @quicola

Page 31: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Let’s Practice!

Collaborative Design Session

Ariadna Font Llitjós @quicola

Page 32: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Form teams of 4-6 people

Introduce yourself (role, something unusual)

You will collaboratively work on:

1.  User Research and Analysis

2.  Scoping

3.  Prototyping

4.  Usability Testing

5 min

Ariadna Font Llitjós @quicola

Page 33: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Challenge

Develop a Mobile App that helps promote networking and interaction between all conference attendees

Ariadna Font Llitjós @quicola

Page 34: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 35: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Contextual Inquiry

• Find a user and try to understand what they would want to do with this app (examples: check schedule, see how is in what session, chat with a speaker, rendezvous with random conference attendee, etc.)

• Have they used such an app before? What did they like/hate about it? Try to get them to show it to you.

• Observe and take notes

15 min

Ariadna Font Llitjós @quicola

Page 36: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Empathy Map

Explore multiple dimensions of your target users.

Do as a brainstorming exercise.

One idea per sticky.

Questions: Who are your users? What do they need/want?

15 min

Thinks

SeesHears

Does

Pains Gains

SaysFeels

Ariadna Font Llitjós @quicola

Page 37: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Empathy Map Examples

Ariadna Font Llitjós @quicola

Page 38: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

User experience map

Visual representation of the user workflow for a task

Using a user experience map, document:

1.  The steps your user persona follows,

2.  What you know? (comments) •  Time and frequency of use.

•  Location and physical context.

•  Interactions with people or systems.

•  Terminology and standards.

•  Technical capabilities and limitations.

3.  What don’t know about them (questions)

30 min

Ariadna Font Llitjós @quicola

Page 39: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

User Experience Map Examples

Ariadna Font Llitjós @quicola

Page 40: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

UX Map - Covering up the Questions

• Talk to domain experts

• Interview more users

• Watch users in their environment

• …

Ariadna Font Llitjós @quicola

Page 41: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 42: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Elevator Pitch

Create an elevator pitch to define what should be your MVP functionality.

Question: What do users want to do with the app? What’s our business proposition and the value added? (MUST haves vs NICE to haves)

10 min

Ariadna Font Llitjós @quicola

Page 43: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Elevator Pitch

For [target user] who [statement of need or opportunity] the [product/app name] is a [product category] that [key benefit, compelling reason to buy/use].

Unlike [primary competitive alternative]

our product/app [statement of primary differentiation]

!Ariadna Font Llitjós @quicola

Page 44: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 45: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Paper prototyping

Now, pick a technique and apply it to design your killer feature (differentiator).

You can use a flow diagram or other paper artifact that you can use to do UT with.

Question: Can I use it?

20 min

Ariadna Font Llitjós @quicola

Page 46: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 47: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Guerrilla Usability Testing

Now let’s test your paper prototype!

Question: Can somebody outside your team use it?

•  Do they know what they can do? and how to do it?

•  Are there any big usability issues that would prevent your MVP from being broadly adopted?

10 min

Ariadna Font Llitjós @quicola

Page 48: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Usability Testing Facilitation 101

• Give user a specific task. Example: from the homepage, navigate to the Inspiration Zone and see if there is anything there that you’d like to buy; pretend there is, buy it.

• Use the think-out-loud protocol

• Stay neutral, non-judgmental. The user is never wrong.

“We’re testing the product, not you”

•  Just observe, after stating the task, don’t tell them what to do or how to do it.

•  Create questions that don’t bias the responses you hope to get. •  Biased Q: Was it easy for you to sign up for the product

•  Unbiased Q: Overall please rate how difficult or easy it was to sign up for this product 1 is difficult, 7 is easy.

Ariadna Font Llitjós @quicola

Page 49: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

How did that go?

What happened?

Teams Could your user finish the task you had designed?

Users Could you use the prototype? Would you buy it? Did the team do a good job at facilitating?

Ariadna Font Llitjós @quicola

Page 50: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola

Page 51: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Did we achieve the session’s goals?

Ariadna Font Llitjós @quicola

Page 52: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Did we achieve the session’s goals?

Did it meet your expectations?

Ariadna Font Llitjós @quicola

Page 53: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

+ & −

+ What was your favorite part of the session?

Did you have any a-ha moments?

Will you be able to take something you learned in this session back to your work/life? (if so, what?)

− What was your least favorite part?

What could be improved?

Would make it for a better learning experience for you?

Ariadna Font Llitjós @quicola

Page 54: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

QUESTIONS?

Ariadna Font Llitjós @quicola

Page 55: Designing an MVP that works for users (2 and 1/2 hours) @Lean UX NYC 2013

Ariadna Font Llitjós @quicola #LeanUXNYC ariadna.font.cat

THANKS!