Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Designing with Agile Workshop

This is a full day workshop on applying Agile thinking to UX practice and integrating UX into Agile projects. The workshop is part of the Rosenfeld Media workshop series.

  • Soyez le premier à commenter

Designing with Agile Workshop

  1. 1. Designing with AgileFast, Effective Methods that Work @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  2. 2. Workshop Overview- Agile + UX = ?- Kick-Off- Personas- Stories- UI Design- Minimum Viable Products- Sprinting- Retrospective- Book/Software Give-Away! @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  3. 3. What’s a topquestion you hopeto get answeredtoday? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  4. 4. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  9. 9. Agile + UX = ?Methods like Scrum and XP...are optimized for this… ...but insufficient for this. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  10. 10. Agile UX PAINFeeding the beast“There’s a whole team of developers and I’m the only UX designer.They’re building features faster than I can design them. I can’t keep up!”Half-Baked UX“Our PO’s under pressure to deliver the next release and signing offon features despite crap-ass usability. Help!”Sprint Tunnel-Vision“Yes, we technically delivered all the features this sprint, butlooking at the big picture, the design’s an incoherent mess!”AGILEFALL“Our developers are a fine-tuned Agile machine, but our design dept.can’t figure out how to fit in what we do, so we’re basically still just continuingto create big-ass spec docs and handing them to the devs.” @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  12. 12. Traditional Relay Race- Team members mostly run alone.- Communication occurs mainly through document hand-offs.- One big crossing of the finish line. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  13. 13. PM GD Dev BA Biz UXAgile Rugby Game- Intensive and continuous collaboration.- Communication through direct collaboration.- Reach the finish line early and often to win the game. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  14. 14. Our top goal is to…but what’s most important is that we…tho what we really must do is to… But I thought… Whaa…? What about…?A Relay Race Meeting- Not designed for collaboration.- Slow debugging of issues, differences in understanding. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  15. 15. A Rugby Game Meeting Workshop- An intensive passing game across roles/perspectives.- Rapidly iterating toward shared understanding. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  16. 16. A UX Rugby Toolkit...- Cardstorming- Collaborative Chartering- Design Studio- Dotvoting- Ideation Clearinghouse- Paired Interviews- Product Box- Provisional Personas- Speed Boat- Story Mapping and many more... @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  17. 17. Transforming UX Practice... ...and beyond. - Org. Structure - Biz Dev - SalesCollaboration-centered Design - Marketing - Facilities - Human Resources - IT DepartmentOpen, Lean Documents @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  18. 18. Putting Agile UX in Context Traditional UX Design, Usability What are we making? Startup Lean UX Agile UX Measuring,validating Collaboration, product/market fit. Delivery Are we making How do we the right thing? make it? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  19. 19. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  20. 20. Source: David HussmanCollaborative Chartering: An Agile Kick-Off- At-a-glance view of the project.- Big visible open document, created through active team involvement. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  23. 23. Teams- 4-6 per team.- 1 product owner @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  24. 24. Our Sample ProjectDesign a Tablet App for a Children’s CharityProviding education and shelter for abandonedand orphaned children around the world.(a real charity I’ve worked with) @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  25. 25. Collaborative Chartering Activity 1.Business sponsor presents project goals. 2.Team crowd-sources shared understanding. 3.Start creating your collaborative charter project document. 4.Iterate with Biz Sponsor. 5.Distill down to top goals. 6.Next: Continue populating, updating the charter with additional activities... Source: David Hussman@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  26. 26. “Sunshine App” Start / End DatesBusiness Goal(s)Success metricsUsers/PersonasDesign VisionCadenceTeam Next Milestone @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  27. 27. The Business Owner’s Pitch“We’ve just received funding from an anonymous donor to update our digital presence. Ourcurrent website is very outdated. We think we can better reach our target demographicthrough mobile media and social networking, so we’d like to create a tablet app. We think thatwill be an effective way to increase overall donation revenue, with all the social networking andwhat-not out there. We know we have a good cause and we want to make sure visitors agreeand we’d like them to be confident their donation is going toward the actual cause. And yet,what really matters are the donations. We’ve also been struggling on the upsell front. This isslightly less important. Well, actually, it’s really a top priority come to think of it, since it willlead to higher overall revenue. Though what really is important is to attract users to the site.And just as important is that they make a donation and that it is easy to make a donation.Usability is a must. Also, the payment part must be easy. Should be completely seamless.And we want lots of social networking and Facebook and Twitter in there too.” @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  28. 28. Business Goals1. Convince visitors to make a donation.2. Persuade visitors to donate a little more than intended.3. Instill confidence donation is going toward cause.4. Motivate visitors to tell others to donate. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  29. 29. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  30. 30. Agile and Research- A shift to more outcome-driven and continuous research.- Made possible due to light-weight, team-oriented methods. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  32. 32. Source: Lane HalleyProvisional Personas- Team participation facilitates user empathy.- Continue to evolve with our understanding of our users. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  33. 33. Persona Activity1. Send two people from one team to the next team.2. Conduct 5-minute interviews.3. Collect as many cards as possible.4. Chunk and prioritize cards.5. Create a Persona as a team. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  34. 34. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  35. 35. 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 @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  36. 36. ? 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) @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  37. 37. A Type of Lean Document As an auto sales rep, I want to search for parts visually, so I can be sure I’m ordering the right part.Placeholders (Future) Supporters (Now)Words/Content needed to trigger Words/Content needed to support adetails in a future conversation or current conversation or collaboration.collaboration. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  39. 39. StorymappingJill is attracted Jill is persuaded Jill makes a Jill donates ato the site to donate donation little more Priority MVP? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  40. 40. Storymapping Activity 1. Use Biz goals, Personas as a foundation. 2. Create cards from research, cardstorming. 3. Chunk, prioritize cards. 4. Create storymap backbone. 5. Populate map. 6. Iterate, as needed.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  41. 41. Create Cards with Cardstorming - 3m timebox. - Write down as many scenarios or feature ideas you can think of. - One per sticky. - After the timebox, start chunking cards. - Transition to self-organized storymapping as a team.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  42. 42. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  43. 43. Storymapping UI Exploration MVP/ Road MapSizing/Estimating @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  44. 44. Stories and UI DesignFeature Dev-ReadyStories StoriesWritten by Independentusers, business Negotiable Valuable Estimable Story Glue Small More Accurate Estimates Testable Better Story Coverage @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  45. 45. Design Studio- Tapping into the whole team’s knowledge and imagination.- Can be used for research or actual design. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  47. 47. A Design Studio PatternDefine area of (Warmup/ Raw Sketchingfocus. Materials) Timebox Critique Iterate? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  48. 48. 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.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  49. 49. Critique- Post the sketches.- 2-minute round-robin, then open critique.- Take careful notes, attach to the respective sketches.- Look for and work to resolve vision differences.- (Optional) Dot-vote to uncover trending solutions. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  50. 50. Dot-voting - Quickly captures trending opinions. - How many dots? About half of qty items to vote on, rounded up. - Use markers or stickie dots. - Everyone votes at once. - Voters can distribute dots any way they want.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  51. 51. Generate Cards from UI/Storymap Refresh1.Revisit the storymap backbone and feature set. Still accurate?2. Work with “devs” to generate card from UI.3. Attach/Map feature cards to “dev-cards” (optional)Jill is attracted Jill is persuaded Jill makes a Jill donates ato the site to donate donation little moreStatic Landing ProcessPage credit card payments“Donator- Make paymentmeter” via SMS @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  52. 52. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  53. 53. The Hudson Bay StartFur-trappers in Canada predicting what they will need to survive forweeks or months in the Northern Territories. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  54. 54. MVP Design Hypothesis: - This is my prediction of what I’ll need to survive for 2 months in the middle of nowhere. UX: How do we Experiment: design effective - Trek into nearby woods and camp out for a few days. experiments? Measurement/Learning: - Did I use more/less food than I expected in 3 days? Did I discover gear I needed but didn’t have with me? etc.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  55. 55. MVPs and UX- Designing MVPs should be core to modern UX Practice.- Light-weight prototypes can be your first experiment, but good to quickly follow with a code-based experiment.- MVP design usually draws on a combination of strategies. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  56. 56. PainkillerStrategy: Find the biggest pain point that can be removed with theleast amount of effort.Great for: Enterprise systems, esp. when replacing a legacy system. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  57. 57. Fa$t MoneyStrategy: Remove features/content the customer is not directly paying for.Great for: Consumer products, esp. with domain-specific content/features. Image source: http://www.creativedreamincubator.com/images/products/buynow50.jpg @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  58. 58. Turk ItStrategy: Manually simulate system operations.Great for: Products with complex algorithms, back-endoperations. Image source: http://en.wikipedia.org/wiki/File:Tuerkischer_schachspieler_racknitz3.jpg @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  59. 59. Go Ugly EarlyStrategy: Build the functionality first, with just a bare-bones UI.Great for: Products in which the selling point is a technicalspecial sauce. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  60. 60. Fake it ‘til you make it (Archetypal Lean Startup Landing page)Strategy: Once a final product is imagined, market it, measureinterest, and adjust based on market response.Great for: Any product with a high degree of uncertainty aboutcustomer interest. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  61. 61. What’s your MVP?Attract Convert Transact Upsell What is the cost of these features? MVP? What is the team’s delivery capacity? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  62. 62. The UX of Estimating- Be sure estimate is informed by UI Exploration- Be present, prepared to speak up and negotiate- Understand the estimation units (e.g. points) @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  63. 63. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  64. 64. An Agile Project Lifecycle(Three UX Dynamics of Agile Projects) Opening Game Short, intensive Mid Game Alien territory for many UX designers End Game Validate, reflect, adapt. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  65. 65. Designing while Building - Supporting the current sprint - Preparing for the next sprint - Learning from the previous sprint. More about logistics than design.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  66. 66. Automating Collaboration with Cadences- Apply Agile approach to planning to ensure that whole team is designing together.- Can also be applied to field research, usability testing and other UX activities. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  67. 67. Automating design reviews with Style Guides/Trailing Docs- Document after initial implementation.- Testers, developers participate in doc production.- Reduces “chase-down” churn. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  68. 68. The Scrum/Kanban BoardNew UX/Biz Active Ready Done Validated Am I going to have them do this? Also just as much a kanban board @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  69. 69. Micro-Sprints - Self-organize into UX/”Dev”/PO - Create paper prototypes that allow for completing the donation process. - I’ll initiate “User Fridays” cadences. - Ask users how much they’d be willing to donate and track your donation and upsell totals.@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  71. 71. Outcome-Driven Research- Measuring interest in the envisioning product.- “Is this user-friendly?” vs “Would you pay for this?”- Enables integrating with Agile methods through continuous rather than up-front research. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  72. 72. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprinting, ValidatingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  73. 73. Retrospective- Enabling continual learning and improvement.- Start with action items from previous retrospective.- What worked? Didn’t work? What questions do you have? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  74. 74. Book/Software GiveawayThanks to our Sponsors! @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX
  75. 75. Thanks!@andersramsayandersramsay.comdesigningwithagile.com @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX