UX Recipe Cards

UX London 2014@thinknowbit.ly/ux-recipe
- tips -
Opportunity Statement
• Ask your project stakeholder(s) to write an opportunity statement
and use that as a starting point for a conversation about project
scope and vision.
• An opportunity statement can be used to define an experiment,
milestone or Minimum Viable Product (MVP) the team will design,
deliver and validate.
• Use the opportunity statement to prioritize design and development
activities. When considering what to do,ask“How does doing this
help us achive what we set out to do in the opportunity statement?”
• The opportunity statement contains assumptions that must be
validated by making things and showing them to customers. As
you build prototypes,get feedback and learn more, revisit the
opportunity statement periodically to make sure it’s still valid.
• For more information about assumptions and hypotheses,see
“Vision,Framing and Outcomes”in Lean UX: Applying Lean
Principles to Improve User Experience (Gothelf,Seiden) http://www.
leanuxbook.com/
- Example -
Persona 4x4
segment & sketch
• Peter,serious bike commuter
• Sketch of Peter,wearing a bike helmet
Details
• Owns several bikes
• Does NOT own a car
• Bikes are a hobby--he loves looking at and talking about bikes
activities
• Rides everywhere--work,store,errands
• Rides in all weather
• Carries a lot of stuff (computer,groceries)
pain points
• Arrive clean and not too sweaty
• Share his enthusiasm
• Be safe
A persona models the team’s understanding of “the user.” Personas
can evolve over time as you talk to users and learn by showing them
product experiments. Sketching personas as a group can help:
• Talk about how different people will use your product
• Prioritize different kinds of users
• Recognize when you don’t know who the user really is
• Find what kinds of people you want to find and talk to
Persona 4x4
Example
Problem
Custom bike shoppers find it difficult and time-consuming to learn
about options,configure and price the bike they want to buy.
Solution
A Web application that helps custom bike shoppers explore different
components,envision different combinations and dynamically
understand price. We will know we’ve succeeded when custom bike
shoppers use the tool,share with their friends,generate qualified leads
and purchase bikes at Wheel Nice Guys.
An opportunity statement articulates the team’s undestanding of the
audience we’re trying to reach and the problem we’re trying to solve.
PAttern
Problem
<people with this behavior> <have this problem>.
Solution
<short sentence describing key features>.We will know we’ve
succeeded when <qualitative and/or quantitative metric>.

- Example -
Persona 4x4
segment & sketch
• Peter,serious bike commuter
• Sketch of Peter,wearing a bike helmet
Details
• Owns several bikes
• Does NOT own a car
• Bikes are a hobby--he loves looking at and talking about bikes
activities
• Rides everywhere--work,store,errands
• Rides in all weather
• Carries a lot of stuff (computer,groceries)
pain points
• Arrive clean and not too sweaty
• Share his enthusiasm
• Be safe
A persona models the team’s understanding of “the user.” Personas
can evolve over time as you talk to users and learn by showing them
product experiments. Sketching personas as a group can help:
• Talk about how different people will use your product
• Prioritize different kinds of users
• Recognize when you don’t know who the user really is
• Find what kinds of people you want to find and talk to
Persona 4x4
- tips -
• Ask your project stakeholder(s) to write an opportunity statement
and use that as a starting point for a conversation about project
scope and vision.
• An opportunity statement can be used to define an experiment,
milestone or Minimum Viable Product (MVP) the team will design,
deliver and validate.
• Use the opportunity statement to prioritize design and development
activities. When considering what to do,ask“How does doing this
help us achive what we set out to do in the opportunity statement?”
• The opportunity statement contains assumptions that must be
validated by making things and showing them to customers. As
you build prototypes,get feedback and learn more, revisit the
opportunity statement periodically to make sure it’s still valid.
• For more information about assumptions and hypotheses,see
“Vision,Framing and Outcomes”in Lean UX: Applying Lean
Principles to Improve User Experience (Gothelf,Seiden) http://www.
leanuxbook.com/
Example
Problem
Custom bike shoppers find it difficult and time-consuming to learn
about options,configure and price the bike they want to buy.
Solution
A Web application that helps custom bike shoppers explore different
components,envision different combinations and dynamically
understand price. We will know we’ve succeeded when custom bike
shoppers use the tool,share with their friends,generate qualified leads
and purchase bikes at Wheel Nice Guys.
An opportunity statement articulates the team’s undestanding of the
audience we’re trying to reach and the problem we’re trying to solve.
PAttern
Problem
<people with this behavior> <have this problem>.
Solution
<short sentence describing key features>.We will know we’ve
succeeded when <qualitative and/or quantitative metric>.

- Activity -
Six-ups
NOTE: This activity works better if the team has a shared
understanding of the project goals and user(s) and if everyone
participates in both the drawing and the follow-up conversation.
STEP 1: Agree on a topic question,for example “How might we create
experiences that help serious bike commuters (Peter) evaluate and
purchase bikes at Wheel Nice Guys?”
STEP 2: Fold an 8.5”x11”piece of paper in half longways and then
fold it in thirds.Unfold and you’ll have six sections.Set a timer for 15
minutes.
STEP 3: Draw a picture in each section.If you’re stuck,think about a
setting or situation where the user solves a problem with your product/
service.What are the the key elements of that solution?
STEP 4: Tape your six-ups on a wall.One person at a time,describe
your concepts.Other people just listen & take notes (on stickies).
Step 5: When all the concepts are introduced,talk about all the ideas,
adding more notes (stickies) as necessary to capture the conversation.
The project brief helps the team understand the objectives of the
current project phase,experiment,milestone or Minimum Viable
Product (MVP.)
• Start with a blank document that contains the sections below.Write
the project brief as a team.
• To increase ownership in the outcome, make different people type
different sections.Use a shared Google doc or pass the keyboard.
• Review often and revise as necessary to reflect the accurate project
goals.For best results,read it out loud before you write,prioritize or
size user stories.
project brief SECTIONS
• Project name
• Date last updated
• Opportunity statement
• Key personas
• Key scenario titles
• Key metrics
Wheel Nice Guys “Bike Builder”
last updated: May 30,2014
Problem: Serious bike commuters (Peter) find it difficult to learn about,
configure and purchase bikes. Solution: A Web application that helps custom
bike shoppers explore different components,envision different combinations
and dynamically understand price.
Key Persona(S)
PETER (serious bike commuter) because bike commuting will be a point of
maket differentiation for our shop. Our solution might also be attractive
to FRAN (sports training biker) but we’re NOT going after NOONA (budget-
conscious weekend rider).
Key Scenario Titles
• Peter explores options for a new bike (information,cost,configuration)
• Peter shares his configuration with friends
• Peter makes an appointment to visit WNG to discuss the bike he configured
Key Metrics
Serious bike commuters who use the bike builder will:
• Look up info and change bike components in the bike builder (engagement)
• “Like”the bike builder and share bikes they configured in the bike builder
(market intelligence,virality)
• Make an appointment to talk to an advisor (qualified leads)
• Buy a bike (revenue)
Why use six-ups?
• Visual thinking unlocks new ideas because it engages a different
part of your brain than talking.
• You don’t need to be good at drawing to be an effective visual
communicator. You can do a lot with simple shapes and stick people.
• Sketching six-ups as a team helps expose everyone’s assumptions
and starts good conversations about priorities and unknowns.
Project BRief
Six-up
inspired by @jaredspool: http://bit.ly/project-brief

Why use six-ups?
• Visual thinking unlocks new ideas because it engages a different
part of your brain than talking.
• You don’t need to be good at drawing to be an effective visual
communicator. You can do a lot with simple shapes and stick people.
• Sketching six-ups as a team helps expose everyone’s assumptions
and starts good conversations about priorities and unknowns.
The project brief helps the team understand the objectives of the
current project phase,experiment,milestone or Minimum Viable
Product (MVP.)
• Start with a blank document that contains the sections below.Write
the project brief as a team.
• To increase ownership in the outcome, make different people type
different sections.Use a shared Google doc or pass the keyboard.
• Review often and revise as necessary to reflect the accurate project
goals.For best results,read it out loud before you write,prioritize or
size user stories.
project brief SECTIONS
• Project name
• Date last updated
• Opportunity statement
• Key personas
• Key scenario titles
• Key metrics
Project BRief
Six-up
Wheel Nice Guys “Bike Builder”
last updated: May 30,2014
Problem: Serious bike commuters (Peter) find it difficult to learn about,
configure and purchase bikes. Solution: A Web application that helps custom
bike shoppers explore different components,envision different combinations
and dynamically understand price.
Key Persona(S)
PETER (serious bike commuter) because bike commuting will be a point of
maket differentiation for our shop. Our solution might also be attractive
to FRAN (sports training biker) but we’re NOT going after NOONA (budget-
conscious weekend rider).
Key Scenario Titles
• Peter explores options for a new bike (information,cost,configuration)
• Peter shares his configuration with friends
• Peter makes an appointment to visit WNG to discuss the bike he configured
Key Metrics
Serious bike commuters who use the bike builder will:
• Look up info and change bike components in the bike builder (engagement)
• “Like”the bike builder and share bikes they configured in the bike builder
(market intelligence,virality)
• Make an appointment to talk to an advisor (qualified leads)
• Buy a bike (revenue)
- Activity -
Six-ups
NOTE: This activity works better if the team has a shared
understanding of the project goals and user(s) and if everyone
participates in both the drawing and the follow-up conversation.
STEP 1: Agree on a topic question,for example “How might we create
experiences that help serious bike commuters (Peter) evaluate and
purchase bikes at Wheel Nice Guys?”
STEP 2: Fold an 8.5”x11”piece of paper in half longways and then
fold it in thirds.Unfold and you’ll have six sections.Set a timer for 15
minutes.
STEP 3: Draw a picture in each section.If you’re stuck,think about a
setting or situation where the user solves a problem with your product/
service.What are the the key elements of that solution?
STEP 4: Tape your six-ups on a wall.One person at a time,describe
your concepts.Other people just listen & take notes (on stickies).
Step 5: When all the concepts are introduced,talk about all the ideas,
adding more notes (stickies) as necessary to capture the conversation.
inspired by @jaredspool: http://bit.ly/project-brief

Goals
• Create a shared understanding of the emerging design
• Discuss time/effort of different approaches and identify trade-offs
• Get input from developers about ways to enhance the user
experience with new technologies
• Identify areas where the design needs to be fleshed out in greater
detail for discussion and construction
- Tips -
Wireframe Walkthrough
Use the right fideltiy
Ask yourself “What is the lowest level of design fidelity (completeness/polish)
necessary to create the necessary conversation?”
Separate style from function
Create neutra / unstyled key screens with real (or at least realistic) content
and all UI elements placed in a layout.[no “lorem ipsum!”] If your team needs
to see visual design,create a single styled screen or separate style sheet to
show how the look would be applied.
Consider mixed media
Use a paper prototype or sketches for detailed interactions which are time-
consuming to create as multiple states in an electronic tool.
tell a story
Demonstrate the design’s features with a story (scenario).Describe how
someone would interact with the product to accomplish a common workflow
or activity that supports a business objective (e.g.This is how Peter configures
a bike and shares it.”)
- Example-
Conversation Guide
Product: service for diners who use mobile devices
Intro
Do you dine out and use mobile devices? (screening question)
We’re interested in what you think. Reminder: no wrong answers.
Collect Context
What’s your name.What do you do? When do you eat out? Why?
Collect a Story
Tell me about a recent dining experience.What restaurant? With who?
Occasion/motivation? What was memorable? How much was the bill? How
much did you pay? Any problems?
Show the Demo Last
How would you use this product to <something they told you about earlier
in the conversation>. If they get stuck ask“what do you think should happen
now?”
closing
Thank you! May we contact you later? Who else should we talk to?
When you plan as a group,everyone is more engaged and it’s easier to
focus on what you want to learn during customer conversations. Align
the team by asking “What do we wish we knew about our customers?”
and “What kinds of people do we need to talk to?”
Tips
• Have a specific learning objective in mind (focus!)
• Recruit 3-5 people who match your target audience (persona)
• Collect stories,listen more than you talk
• Show the demo last
Customer Conversations

- Tips -
Use the right fideltiy
Ask yourself “What is the lowest level of design fidelity (completeness/polish)
necessary to create the necessary conversation?”
Separate style from function
Create neutra / unstyled key screens with real (or at least realistic) content
and all UI elements placed in a layout.[no “lorem ipsum!”] If your team needs
to see visual design,create a single styled screen or separate style sheet to
show how the look would be applied.
Consider mixed media
Use a paper prototype or sketches for detailed interactions which are time-
consuming to create as multiple states in an electronic tool.
tell a story
Demonstrate the design’s features with a story (scenario).Describe how
someone would interact with the product to accomplish a common workflow
or activity that supports a business objective (e.g.This is how Peter configures
a bike and shares it.”)
- Example-
Conversation Guide
Product: service for diners who use mobile devices
Intro
Do you dine out and use mobile devices? (screening question)
We’re interested in what you think. Reminder: no wrong answers.
Collect Context
What’s your name.What do you do? When do you eat out? Why?
Collect a Story
Tell me about a recent dining experience.What restaurant? With who?
Occasion/motivation? What was memorable? How much was the bill? How
much did you pay? Any problems?
Show the Demo Last
How would you use this product to <something they told you about earlier
in the conversation>. If they get stuck ask“what do you think should happen
now?”
closing
Thank you! May we contact you later? Who else should we talk to?
Goals
• Create a shared understanding of the emerging design
• Discuss time/effort of different approaches and identify trade-offs
• Get input from developers about ways to enhance the user
experience with new technologies
• Identify areas where the design needs to be fleshed out in greater
detail for discussion and construction
When you plan as a group,everyone is more engaged and it’s easier to
focus on what you want to learn during customer conversations. Align
the team by asking “What do we wish we knew about our customers?”
and “What kinds of people do we need to talk to?”
Tips
• Have a specific learning objective in mind (focus!)
• Recruit 3-5 people who match your target audience (persona).
• Collect stories,listen more than you talk
• Show the demo last
Customer Conversations

UX Recipe Cards

Related slideshows

More Related Content

UX Recipe Cards