UX Recipe Cards
Upcoming SlideShare
Loading in...5
×
 

UX Recipe Cards

on

  • 3,316 views

Print-your-own UX activity recipe cards. The set includes: ...

Print-your-own UX activity recipe cards. The set includes:

- Opportunity Statement
- Persona 4x4
- Six-Up
- Project Brief
- Customer Conversations
- Wireframe Walkthrough

Instructions: Print two sided on 8x5"x11" card stock. Cut in four pieces. Produces two sets of six cards. Keep one, share one with a friend!

You can find template worksheets for the opportunity statement and persona 4x4 at bit.ly/uxl-worksheets

These materials are part of the "The Collaborative UX Designer's Toolkit" workshop presented at UX London, May 30 2014.

http://2014.uxlondon.com/speakers/lane/#workshop

Statistics

Views

Total Views
3,316
Views on SlideShare
3,201
Embed Views
115

Actions

Likes
19
Downloads
88
Comments
0

3 Embeds 115

https://twitter.com 108
http://www.slideee.com 5
https://storify.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX Recipe Cards UX Recipe Cards Document Transcript

  • UX London 2014@thinknowbit.ly/ux-recipe 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. Opportunity Statement 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>.
  • UX London 2014@thinknowbit.ly/ux-recipe UX London 2014@thinknowbit.ly/ux-recipe - 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 - 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 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. Opportunity Statement 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>.
  • UX London 2014@thinknowbit.ly/ux-recipe UX London 2014@thinknowbit.ly/ux-recipe - 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 Opportunity Statement 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
  • UX London 2014@thinknowbit.ly/ux-recipe UX London 2014@thinknowbit.ly/ux-recipe 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 Opportunity Statement 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
  • UX London 2014@thinknowbit.ly/ux-recipe UX London 2014@thinknowbit.ly/ux-recipe 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 Wireframe Walkthrough Customer Conversations
  • UX London 2014@thinknowbit.ly/ux-recipe UX London 2014@thinknowbit.ly/ux-recipe - 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? 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 Wireframe Walkthrough 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