UX of User Stories Workshop

12,142 views

Published on

Deck for the UX of User Stories workshop, which I did at Agile 2012

UX of User Stories Workshop

  1. The UX of User StoriesA UX Approach to Story Development UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  2. Overview- Intro to User Stories- Stories and User Research- Stories and Personas- Stories and UI Design Break, somewhere in here- Stories and the Product Road Map- Stories and Sprinting- Q&A/Wrapup UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  3. What’s onequestion you haveabout the UX ofUser Stories? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  4. As an auto sales rep, I want to search for parts visually, so I can be sure I’m ordering the right part.The (whole) story is not on the card UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  5. ? Testers PMs As an auto sales rep, I want to search for parts visually,Developers so I can be sure I’m Users ordering the right part. UEDs POsMany Simultaneous Functions (A Boundary Object) UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  6. Power in Numbers UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  7. Where Stories Fall Short... I often order the wrong As an auto sales rep, I part, because the part want to search for parts numbering system is visually, so I can be sure confusing. It wastes time I’m ordering the right part. and makes me look stupid in front of customers!“What’s the underlying “Tell me what to build.”problem or goal?” One of many possible solutions. Optimized for delivery.Often emotional, not easilyestimable, testable, etc. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  8. Where Stories Fall Short Directory Purchasing Fulfillment Support As an auto sales rep, I want to search for parts visually, so I can be sure I’m ordering the right part. Are these all How will these stories the stories? fit together into a whole product? How will they map to the Are they evenuser interface? the right stories? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  9. A UX Approach to Stories... I often order the wrong As an auto sales rep, I part, because the part want to see the 3rd party numbering system is mfr # next to the part #, confusing. It wastes time so I can be sure I’m and makes me look stupid in front of customers! ordering the right part. Experience Stories Dev-Ready Stories “What was the source “Let’s collaborate on problem or goal?” what to build.” Often emotional, not easily Uncovering the most pragmatic estimable, testable, etc. solution through intensive collaboration. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  10. A UX Approach to Stories...Elicit Collaboratively Generate Build,Experience Explore Dev-Ready Evolve,Stories Solutions Stories Validate UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  11. Teams- 4-6 per team.- 1 product owner UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  12. Our Sample ProjectA Tablet App for a Children’s CharityProviding education and shelter for abandoned and orphanedchildren around the world. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  13. Business Goals (or Story Boundaries)- Convince visitors to make a donation.- Persuade visitors to donate a little more than intended.- Instill confidence donation is going toward the cause. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  14. Donator Tablet AppElicit Glue together Generate Build,Experience with UI design Dev-Ready Evolve,Stories Stories Validate UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  15. Experience Mapping- Based on the “Speed Boat” Innovation Game.- Uncover and prioritize user needs and desires.- Goal: Create an experience backlog. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  16. X-Mapping Activity1.Create the speed boat.2.Elicit Experience Stories3.Place cards in pairs. - Cards holding you back are anchors - Cards pulling you forward are propellers.4.Self-organized chunking.5.Label chunks.6.Prioritize if needed - eg w/Dot-voting.7.Create Backlog.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  17. Elicit Experience Stories- Generate cards through discussion.- Place cards on experience map in pairs. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  18. Convo Starters- Got a favorite charity? Why do you like it?- Anything frustrate you about donating to charities?- Ever wanted to donate but weren’t able to? Why?- What would be the perfect donation process?- What would motivate you to donate a little more? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  19. X-Mapping Activity1.Create the speed boat.2.Elicit Experience Stories3.Place cards in pairs. - Cards holding you back are anchors - Cards pulling you forward are propellers.4.Self-organized chunking.5.Label chunks.6.Prioritize if needed - eg w/Dot-voting.7.Create Backlog.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  20. Experience Backlog Worried they’ll How do they correlateAre any of these start hounding mefeature stories? to our business goals? if I make one donation. Are there Make a strong case conflicting for the cause, and I’m stories? willing to put up with a lot of UX issues Can’t tell where my $$$ actuall y goes. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  21. Stories and UIExperienceStories Dev-Ready StoriesFeatureStoriesHow do theserelate toPersonas? UI is what glues stories together Enables more accurate estimates Enables better story coverage UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  22. Stories and Personas UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  23. As an auto sales rep, I want to search for parts visually, so I can be sure I’m ordering the right part.Contextualizing the Story UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  24. Giving stories context with photos, videos of the user’s environment.Personas as the voice of the story... Ted says: Ted wants wants to search As an auto sales rep, I for parts visually, so I can As an auto sales rep, I want want to search for parts be sure I’m ordering the to search for parts visually, visually, so I can be sure right part. so I can be sure I’m I’m ordering the right part. ordering the right part. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  25. Stories and UIExperiencestories Dev-Ready StoriesFeatureStories UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  26. UI Exploration with Design Studio- Tapping into the whole team’s knowledge and imagination.- Can be used for research or actual design.- Three variants: Divergent, Convergent, Ad-Hoc UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  27. A Design Studio PatternEstablish Warmup Sketching Pitch/Boundaries Timebox Critique UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  28. Warmup- 3-5 minute timebox.- Each participant writes as many features they can think of on separate stickies.- Becomes a feature palette for sketching.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  29. Sketching Timebox- 5m timebox.- Everyone sketches.- No rules.- If conducting with general stakeholders, clarify that this is research, not design.- If conducting with the internal team, the UI concepts can be the basis for the actual design.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  30. Pitch/Critique- Post the sketches.- 2m round-robin, then open crit.- Take careful notes, attach to the respective sketches.- Look for and work to resolve vision differences.- (Optional) Dot-vote to uncover trending solutions.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  31. Elicit Glue together Generate Build,Experience with UI design Dev-Ready Evolve,Stories Stories Validate UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  32. UI Exploration MVP/ Storymapping Product Road MapPlanning & Estimating UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  33. Storymapping 101Attract Convert Transact Upsell Priority MVP? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  34. Generate Cards from UI1. Create the backbone: What’s the top-level flow or structure?2. Work with “devs” to slice and dice features into cards. Attract Transact Upsell ShareStatic Landing ProcessPage credit card payments“Donator- Make paymentmeter” via SMS UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  35. Those who need a document should participate in creating it. —Ancient Agile Proverb UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  36. Stories and the Product Road Map UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  37. Product Road Map and MVP- Designing releases, uncovering a Minimum Viable Product (MVP)- Many ways to slice and dice.- First release often hardest. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  38. MVP Strategies- Painkiller Fastest/Cheapest way to remove user pain.- Fa$t Money Fastest path to revenue.- Go Ugly Early Screw the UX, just make it work.- Fake It ‘til You Make It Create fake features to capture metrics and validate your idea. There is no one right way.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  39. The UX of Estimating- Attaching a cost to each story.- Be sure estimate is informed by UI Exploration.- Be present, prepared to speak up and negotiate.- Understand the estimation units- Understand stories and estimation.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012 Photo: ryanendres.blogspot.com
  40. Find the thinnest product slice Attract Transact Upsell Share MVP?Static Landing ProcessPage credit card payments Make payment“Donator- via SMSmeter” UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  41. Donator Tablet AppElicit Glue together Generate Build,Experience with UI design Dev-Ready Evolve,Stories Stories Validate UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  42. Experience Backlog Worried they’llDid we actually start hounding meaddress these? if I make one donation. Make a strong case for the cause, and I’m willing to put up with a lot of UX issues Can’t tell where my $$$ actuall y goes. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  43. The ScrumboardNew UX/Biz Active Ready Done Validated UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  44. Micro-Sprint- Self-organize into UX/”Dev”/PO- Create paper prototypes that allow for completing a donation process.- I’ll initiate “User Fridays” cadences.- Validate the original Experience Stories against your design.UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  45. Done vs ValidatedDone - a tool for helping teams make decisions and move forward.Can we decide that this task is done and move on to the next thing?Validated - a measurement of design value.Was this idea as good as we thought it was? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  46. Q&A UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012
  47. Thanks!@andersramsayandersramsay.comdesigningwithagile.comhttp://rosenfeldmedia.com/workshops/ UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

×