Launch Academy Introduction to Lean UX Workshop - February 2014

© Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
An Introduction to Lean User
Experience Design
Marc Baumgartner
Founder + Design Director
Codename Design

Welcome

Agenda
Morning Session:
8:45 Registration
9:00 Course Introduction
9:15 Lean UX Principles
10:00 - 10:15 Break
10:15 Lean UX Processes
12:00 Lunch
Afternoon Session:
1:00 Project Introduction and Brief
2:00 Develop User Stories Exercise
2:30 Wireframes Exercise
3:10 - 3:20 Break
3:20 Prototypes Exercise
4:45 Presentations and feedback.
5:15 Wrap Up

© Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014© Codename Design 2014
Copy writing and photo credit @marcbx.

10’000 FT.

Ash Maurya, Running Lean, 2012
“... what separates successful start ups from
unsuccessful ones is (...) that they ﬁnd a plan that
works before running out of resources.”

Let’s Make a Product – old school
© Launch Academy / Codename Design 2014

Perceived “Learning” Curve

You’re wrong about something.

You just don’t know what that "
“something” is yet.

Actual “Validated Learning” Curve

The goal of Lean UX

Iterate as quickly as you can"
to get as much validated learning"
as you can for the least effort.

The goal of Lean UX

LEAN"
DESIGN"

Design builds knowledge.

DESIGN MATERIALIZES"
KNOWLEDGE

Increase in “shared” knowledge

DESIGN IS"
ITERATIVE

The “Design” Process

LEAN UX IS"
ABOUT “MAKING”

The Lean Process

LEAN UX IS NOT ABOUT"
BEING “DONE”

IT IS ABOUT BEING READY"
FOR THE NEXT ITERATION

EXPOSE YOURSELF
…before you’re ready

MINIMUM"
VIABLE"
PRODUCT

Eric Ries
"The minimum viable product is that version of a
new product which allows a team to collect the
maximum amount of validated learning about
customers with the least effort." "

….the Minimum Viable Gas Station (photo credit to @NitiBhan).

JUST"
ENOUGH"
DESIGN

May cause nausea.
…it’s o.k. if you feel queasy
you kind of get used to it.

Lean User Experience Design

Lean UX is a process that:
• Places a primary focus on creating value for customers
• Minimizes the time it takes to learn
• Minimizes the cost of each lesson learned
• Allows you to communicate what you’ve learned with the team
• Allows you to act on that learning so you can create more value for customers
• Allows you to observe whether you’ve actually created more value

User Centered Design."
Agile Methodologies."
Data Driven Design.

User Centered Design

User Centered Design
• The Actors (or users, or customers)
• The Objects (the material atomic bits people work with / “content”)
• The Goals (what actors want to achieve in context)
• The Activities (the steps they need to go through to complete goals)
• The Interactions between the actors and the objects to reach their goals
• The Context (the physical world including device, social etc…)

Agile Methodologies

Agile Methodologies
1.  Individuals and interactions over processes and tools
2.  Working software over comprehensive documentation.
3.  Customer Collaboration over contract negotiation
4.  Responding to change over following a plan

Agile Methodologies – User Stories
As an [ actor type ]
I want to [ accomplish something ]
So that [ something of value happens ]
“As a frequent purchaser I want to be able to save an item to my wish list
so that I can return to purchase my saved items.”

User Stories (extended):
• Acceptance Criteria
• Discussion notes
• Dependencies / Related stories
• Components (what parts of the app(s) are affected, what out of app experience
elements are required (for example: emails sent)
• Links to resources like assets and reference artifacts like diagrams, wireframes,
mockups

How Stories ﬁt into the ﬂow
1.  Understand the problem, then;
2.  Model solutions at a user scale:
• Write A Story / Design the test
• Model and discuss possible solutions
• Prioritize / decide on an approach
• Try to invalidate the approach yourself
• Create an artifact / prototype of the appropriate fidelity
• Test... Measure... Iterate (go back to #1).

Data-Driven Design
• What’s the problem?
• What’s your assumption about the problem?
• What are you going to measure?
• How are you going to measure?
• What results constitute success?
• What is the threshold for validation?

Data-Driven Design

Data-Driven Design – Measuring Example
• Are people using our product?
• Are they using all of it or only parts of it?
• Are they using it in the way we expected?
“Our assumption was that users would primarily use the marketplace matching
features we built into the MVP to complete a transaction once per month.”

Data-Driven Design – Measuring Example
We’ll measure app usage for the past 30 days using analytics looking
specifically at transaction traffic and funnels looking for completed transactions
and drop-offs. We’ll need at least 1000 transactions from after release #3. We’ll
talk to at least 8 people locally to get qualitative feedback.
• If we get an average of 1 transaction per user per month we’re on the right track, we’ll work on
aiming higher, open the social loop and test again at scale;
• If we’ve had an average of 80% of users with 1 transaction every 30 days we’ll take that as a good
sign, pay special attention to qualitative feedback.
• If we get less than 80% we’ll look at both qualitative and quantitative data to see where the drop
offs are and if there are any specific branding / market issues with the offering.

Data-Driven Design – Appropriate Tests
Depends on what stage your startup is at:
1.  Worth building  Am I meeting a need (early validation)
2.  Empathy  Landing page conversion
3.  Stickiness  Engagement / churn / customer funnel
4.  Virality  Customer acquisition cost / viral co-efficient
5.  Revenue  LTV / upselling
6.  Scale  resellers / support costs etc…
For more details see “Lean Analytics” by Alistair Croll & Benjamin Yoskovitz

Questions

Break

Lean UX Processes"
Overview

MAKING WHAT?
…glad you asked

MAKING MODELS

WHAT IS"
WHAT COULD BE

PROBLEMS"
SOLUTIONS

PROBLEM HYPOTHESIS"
“We are solving a worthwhile problem, one
that people will pay for.”

SOLUTION HYPOTHESIS"
“We are solving a validated problem in a way
people will love to use.”

MAKING MODELS
…of things that are, and things that are
about to be.

Models"
(to understand the problem)
Personas
Observation
Interviews
User Journeys
Business Models
Analytics
Models
(to propose solutions)
Story Boards
Diagrams
Wireframes
Mockups
Interactive Prototypes

Lean UX Discovery"
Understanding The Problem

When discovery applies
• New products
• New features
• Existing products
• Existing features
• Competitive analysis.

1"
(Proto) Personas

1. Proto Personas

1. Proto Personas
Good for:
• Humanizing the users to the team;
• Confirming assumptions around your identified personas;
• Qualitative feedback.

1. Proto Personas
Tools:
• Pen & Paper
• Omnigraffle
• Illustrator / InDesign

2"
Observation

2. Observation
”Salary Men" by Marc Baumgartner, 2013

”Salary Men" by Marc Baumgartner, 2013
2. Observation
"Cyclops" by Jaime Pitarch, 2002
Good for:
• Finding behaviour patterns;
• Unscripted qualitative findings;
• Finding workarounds that people are already using to deal with pain points;
• The goal here is not to do exhaustive ethnographic research, observe to
validate your proto-personas

2. Observation
"Cyclops" by Jaime Pitarch, 2002
Types of Observation
• Complete Observation - street life, trend spotting
• Observer as Participant - you observe and guide (interviews, focus groups,
workshops)
• Participant as Observer - you participate and subjects know you're observing
(joint activities, card sorting)
• Complete Participation - you participate with subjects unaware (think secret
millionaire / undercover boss)

Tools:
• Pen & Paper
• Camera / Video
• Note software (evernote, google docs)
• Props
• Release / Consent Forms (if required)
• Thank you notes
2. Observation

3"
Interviews

3. Interviews
http://www.reed.co.uk/career-advice/blog/2012/april/body-language-interview-dos-and-donts

3. Interviews
Good for:
• Confirming assumptions around your identified personas;
• Qualitative feedback.
• Testing the solutions-based models

3. Interviews
http://www.reed.co.uk/career-advice/blog/2012/april/body-language-interview-dos-and-donts
Types of Interviews
• Structured Interviews - following a script of questions
• Unstructured Interviews - let the subject's answers guide you

Tools:
• Sound recording device
• Pen & Paper
• Note software (evernote, google docs)
• Loose Script
• Props
• Release / Consent Forms / Honorarium / Thank you notes
3. Interviews

4"
User Journeys

4. User Journeys
Marc Baumgartner, 2013

4. User Journeys
Good for:
• Modeling existing issues on a known experience that could be improved;
• Modeling a system from scratch during product development;

4. User Journeys

Tools:
• Pen & Paper
• Whiteboard / Camera
• Lucid Charts
• Omnigraffle
• Any diagramming software
• Analytics
4. User Journeys
Codename Design

5"
Analytics

5. Analytics

5. Analytics
Good for:
• Quantitative feedback;
• Confirming assumptions around your identified personas through
demographic information;
• Finding drop off in funnels;
• Finding popular content / usage patterns
• Much more…

5. Analytics

Tools:
• Google Analytics
• Mixpanel
• KISS Metrics
• Others…
5. Analytics

6"
Business Models*

6. Business Models

6. Business Models
Good for:
• Modeling product/market fit;
• Modeling the high level dependencies on partners and providers;
• Modeling product positioning and unfair advantage.

Tools:
• Paper & Marker / Stickies
• Omnigraffle
• Etc…
To learn more make sure to check out the upcoming Launch Academy course
offerings.
6. Business Models

Lean UX Artefacts"
Modeling The Solution

Models "
(to understand the problem)
Personas
Observation
Interviews
User Journeys
Business Models
Analytics
Models
(to propose solutions)
Story Boards
Diagrams
Wireframes
Mockups
Interactive Prototypes

1"
Story Boards

1. Storyboards

Good for:
• Communicating context issues (where a product is being used / device types /
constraints)
• Communicating context based service cases (like loss of connection)
• Communicating high level goals and use cases to funders / partners
1. Storyboards

Tools:
• Pen & Paper
• Adobe Illustrator / InDesign
• Omnigraffle
1. Storyboards

2"
Diagrams

2. Diagrams
Codename Design

2. Diagrams
Good for:
• Communicating user goals and priorities;
• Communicating business logic and system processes;
• Communicating which site / app components are involved in the process
• Communicating what screens are required
• Sanity checking the scope, discovering alternative / simplified option
• Finding complementary experiences

2. Diagrams
Codename Design
Single flow split into stories

2. Diagrams
Tools:
• Pen & Paper
• Lucid Charts
• Omnigraffle
• Adobe Illustrator / InDesign
• Any diagramming software

Sidetrack"
“Fidelity”

Artifacts can be created at different ﬁdelities

Artifacts can be created at different ﬁdelities
Fidelity you use depends on…
• What you’re trying to validate;
• Who your audience is;
• How much time you have.

Different types of ﬁdelity

Different types of ﬁdelity
• Visual Fidelity: How close the final visual design is the prototype?
• Behavioural Fidelity: How closely does the prototype demonstrate the
interaction?
• Content Fidelity: Are you using placeholder or the actual copy for calls to
action and buttons?
• Contextual Fidelity: How close to the device and its intended context is the
prototype being demonstrated?
For more see http://www.slideshare.net/austingovella/hacking-ux-zombies

Comparison of Artefacts

3"
Wireframes

3. Wireframes

3. Wireframes
Good for:
• Communicating vision, layout and visual hierarchy at a screen level;
• Communicating relationship between content and images;
• Communicating navigation and annotating actions;
• Getting content and SEO teams on the same page
• Testing your categorization scheme

3. Wireframes
Lean Version:
• Work fast, sketchy and as a team
• Use white boards and sketch templates
• Draw and talk, discuss elements as you draw
• Use your space
• Document with phone / camera
• Move on

3. Wireframes – work fast

3. Wireframes – use your space

3. Wireframes
Tools:
• Pen & Paper & Stickies & Tape & Whiteboards,
• Adobe Illustrator
• Omnigraffle
• Axure RP
• UXPin, Balsamique, Hotgloo +100 apps,

4"
Mockups

4. Mockups

4. Mockups
Good for:
• Testing the look of the app / site at the pixel level;
• Branding;
• Execution of communication;
• Aesthetic patterns
• Testing look, pixel level, branding, execution of communication, aesthetic

4. Mockups
Lean Version:
• If it’s faster to go straight to higher fidelity, do it;
• Work in a way that allows you to use the same mockups sharing knowledge of
how to build the final product and what the product looks like;
• Annotate your mockups like you would wireframes if you need to, notes on
mockups can help you use the same mockup for multiple stories
• Use an indexing system to number your mockups / screens;

4. Mockups – same mockup for multiple stories

4. Mockups
Tools:
• Adobe Illustrator, Fireworks, Photoshop (only for final assets);
• Invision;
• proto.io;
• More…

5"
Protoypes

5. Prototypes
Lo-fidelity sketch turn into
simple interactive
prototype using POP

5. Prototypes
Good for:
• An alternative to the requirements driven approach to providing descriptive
artefacts;
• Communicating the look and feel of the app / site in context;
• Communicating flows and interactions;
• Communicating screen states;
• Generating discussion, iterating solutions

5. Prototypes
Simple linear process
demonstrated using Adobe
Illustrator and Dropbox

5. Prototypes
Lean Version:
• Understand what you’re testing and your audience (figure out what fidelity
you’ll need, pick the appropriate tool for prototyping)
• Plan a little – prototype the rest
• Prototype only what you need to test
• Fake it / fudge it whenever you can
• Work in a way that you can build on your prototype

Tools:
• Paper
• Camera / Dropbox
• POP (turn sketches into interactive prototypes)
• Adobe Fireworks (Mac OS) / Axure RP (Mac / Windows);
• Adobe Illustrator / Photoshop w/Dropbox;
• HTML5;
• Visio / Hotgloo + many, many more…
5. Prototypes

- Afternoon Workshop -

Resources
The Lean Startup – Eric Reiss
Lean UX – Gothelf / Seiden
Running Lean – Ash Maurya
UX for Lean Stratups – Laura Klein
Lean Analytics – Croll / Yoskovitz
Agile Experience Design – Ratcliffe / McNeill
Rocket Surgery Made Easy – Steve Krug
Interviewing Users – Steve Portigal
Prototyping – Todd Zaki Warfel
Business Model Generation – Osterwalder / Pigneur
The Four Steps to the Epiphany – Stevn Gary Blank

End

Launch Academy Introduction to Lean UX Workshop - February 2014

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Launch Academy Introduction to Lean UX Workshop - February 2014

Similaire à Launch Academy Introduction to Lean UX Workshop - February 2014 (20)

Dernier

Dernier (20)

Launch Academy Introduction to Lean UX Workshop - February 2014