Designing with Agile Workshop

1. Designing with AgileFast, Effective Methods that Work @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. What’s a topquestion you hopeto get answeredtoday? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

4. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprintingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

5. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

6. Experience Delivery @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

9. Agile + UX = ?Methods like Scrum and XP...are optimized for this… ...but insufficient for this. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. Traditional Relay Race- Team members mostly run alone.- Communication occurs mainly through document hand-offs.- One big crossing of the ﬁnish line. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

13. PM GD Dev BA Biz UXAgile Rugby Game- Intensive and continuous collaboration.- Communication through direct collaboration.- Reach the ﬁnish line early and often to win the game. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. A Rugby Game Meeting Workshop- An intensive passing game across roles/perspectives.- Rapidly iterating toward shared understanding. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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. 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

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. Teams- 4-6 per team.- 1 product owner @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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. “Sunshine App” Start / End DatesBusiness Goal(s)Success metricsUsers/PersonasDesign VisionCadenceTeam Next Milestone @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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

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. Source: Lane HalleyProvisional Personas- Team participation facilitates user empathy.- Continue to evolve with our understanding of our users. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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

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. ? 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. 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

38. Power in Numbers@ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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. 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

43. Storymapping UI Exploration MVP/ Road MapSizing/Estimating @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. Design Studio- Tapping into the whole team’s knowledge and imagination.- Can be used for research or actual design. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

47. A Design Studio PatternDeﬁne area of (Warmup/ Raw Sketchingfocus. Materials) Timebox Critique Iterate? @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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. 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. 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

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. 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. MVPs and UX- Designing MVPs should be core to modern UX Practice.- Light-weight prototypes can be your ﬁrst 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. 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. 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. 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. Go Ugly EarlyStrategy: Build the functionality ﬁrst, with just a bare-bones UI.Great for: Products in which the selling point is a technicalspecial sauce. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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. 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

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. 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. Automating Collaboration with Cadences- Apply Agile approach to planning to ensure that whole team is designing together.- Can also be applied to ﬁeld research, usability testing and other UX activities. @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. 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. 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

70. Showcase @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. Agile + UX = ?Kick-OffPersonasStoriesUI DesignMinimum Viable ProductsSprinting, ValidatingRetrospective @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

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. Book/Software GiveawayThanks to our Sponsors! @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

75. Thanks!@andersramsayandersramsay.comdesigningwithagile.com @ANDERSRAMSAY / DESIGNINGWITHAGILE.COM / #AGILEUX

Designing with Agile Workshop

Anders Ramsay

Designing with Agile Workshop