25
Building an MVP that works for users Ariadna Font UX Lead @Vivisimo, an IBM Company @quicola #leanux #ale2012 ariadna.font.cat

Building an mvp that works for users

Embed Size (px)

DESCRIPTION

ALE 2012 session description: In this highly collaborative workshop, we will apply a couple of UX practices and techniques, such as empathy maps, stakeholder maps, storyboards, sketchboards and paper prototype usability testing that will allow teams to focus on quick validation and delivery of killer apps that will work for users.

Citation preview

Page 1: Building an mvp that works for users

Building an MVP that works for users Ariadna Font

UX Lead @Vivisimo, an IBM Company

@quicola #leanux #ale2012 ariadna.font.cat

Page 2: Building an mvp that works for users

The Goals

THEORY:

•  Brief introduction of a few Lean UX techniques you can apply at different development stages

PRACTICE

•  Focus on delivering an MVP fast with user-driven design/development

Page 3: Building an mvp that works for users

The Plan

Brief Description of UX techniques

Collaborative design session - Build a Mobile App!

User Research, Scoping, Prototyping and Testing

10 m

in th

eory

45 m

in pr

actic

e

Page 4: Building an mvp that works for users

UX techniques @Product Development Stages

Research & Analysis

Scoping and Initial Design

Prototyping Development Testing …

Contextual inquiry (CI) Personas Empathy map Stakeholder map User Experience map Journey map Heuristic evaluation Cognitive walkthrough Benchmarking

Collaborative design sessions (Inception deck) Storyboard Sketchboard Elevator pitch Flow diagram Stories Story map “Agile schedule” BDD

Sketches Wireframes Paper prototype Paper prototype Usability Testing Qualitative Usability Testing Mockups Functional prototype

BDD Just-in-time (JIT) design Wireframes

Quantitative Usability Testing Pair testing Controlled experiments (A/B Testing) Heuristic evaluation Cognitive walkthrough

Page 5: Building an mvp that works for users

Lean UX Techniques Briefly Explained

Page 6: Building an mvp that works for users

Empathy Map @Research & Analysis

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

Page 7: Building an mvp that works for users

Stakeholder mapping @Research & Analysis

A network diagram of the people involved with (or impacted by) a given system design

Who does it? The Team

Key Benefits: • Establish shared ideas about stakeholders

• Help team focus on people, not technology

• Guide plans for user research

• Document research activities

Page 8: Building an mvp that works for users

Stakeholder mapping @Research & Analysis

Tips:

•  Draw simple icons to represent individual people

•  Label individuals by specific role

•  Write a speech-bubble to summarize thoughts and feeling

•  Draw lines with arrows connecting the people

•  Label lines to describe relationships between people

•  Circle and label related groupings

Page 9: Building an mvp that works for users

Elevator Pitch @Scoping

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

!

Page 10: Building an mvp that works for users

Storyboard @Scoping

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

Page 11: Building an mvp that works for users

Sketchboard @Scoping/@Prototyping

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

Page 12: Building an mvp that works for users

Flow diagram @Prototyping

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

Page 13: Building an mvp that works for users

Wireframes @Prototyping

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

Page 14: Building an mvp that works for users

Paper prototype usability testing @Any time

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

Page 15: Building an mvp that works for users

To learn more about how to run your own UT…

Read this book

Page 16: Building an mvp that works for users

Let’s Practice!

Collaborative Design Session

Page 17: Building an mvp that works for users

Challenge

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

Page 18: Building an mvp that works for users

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

2 min

Page 19: Building an mvp that works for users

1. Research & Analysis

As a team, pick a (new) technique and apply it to start building your Mobile App:

Empathy map (template) or Stakeholder map (tips slide)

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

10 min

Page 20: Building an mvp that works for users

2. Scoping

Pick one technique and apply it to start defining your MVP functionality:

Elevator pitch (template) or Must vs Nice to haves

Question: What do they want to do with the app? What’s our business proposition and the value added?

10 min

Page 21: Building an mvp that works for users

3. Prototyping

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

Flow diagram (template) or other paper artifact that you can use to do UT with

Question: Can I use it?

15 min

Page 22: Building an mvp that works for users

4. Usability Testing

Now let’s test your paper prototype!

Question: Can somebody outside your team use it?

•  Recruit user(s) from other teams •  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?

5 min

Page 23: Building an mvp that works for users

Retrospective...

•  What was your favorite part of the session?

•  What was your least favorite part?

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

•  Any final thoughts or questions?

Page 24: Building an mvp that works for users

The Goals

THEORY:

•  Brief introduction to a few Lean UX techniques you can apply at different development stages

PRACTICE

•  Focus on delivering an MVP fast with user-driven design/development

Page 25: Building an mvp that works for users

Thanks! @quicola #leanux #ale2012 ~ ariadna.font.cat