Big picture design without Big Design Up Front (Agile Roots 2010)

4,291 views
4,201 views

Published on

One of the toughest problems facing agile UX designers is keeping the big picture in mind while designing incrementally. This talk builds on prior work at Alias (now Autodesk) that described successful agile adaptations of usability testing, contextual inquiry and iterative prototyping. I’ll present a framework we used to create and implement multi-sprint designs for a complex product without violating the agile taboo against big design.

Published in: Technology, Business
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,291
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Big picture design without Big Design Up Front (Agile Roots 2010)

  1. 1. Big picture design without Big Design Up Front Agile Roots 2010 Desirée Sy Media + Entertainment
  2. 2. Big picture design without Big Design Up Front Agile Roots 2010 Desirée Sy Media + Entertainment
  3. 3. © 2010 Desirée Sy, All rights reserved
  4. 4. flexible tunnel vision just enough sprint tools small increments quality faster to wrong timeboxed product iterative change-friendly t collaborative react instead of faster to product reflect continuous treadmill © 2010 Desirée Sy, All rights reserved
  5. 5. missing ingredient? context UX methods can provide this © 2010 Desirée Sy, All rights reserved
  6. 6. Big picture design without Big Design Up Front Agile Roots 2010 Desirée Sy Media + Entertainment
  7. 7. Ye olde UX • Often front-loaded • Data isn’t refreshed during project • Documents have detail, but often no insight © 2010 Desirée Sy, All rights reserved
  8. 8. a.k.a. Big Design Up Front © 2010 Desirée Sy, All rights reserved
  9. 9. a.k.a. Big Design Up Front © 2010 Desirée Sy, All rights reserved
  10. 10. a.k.a. UX methods “but” © 2010 Desirée Sy, All rights reserved
  11. 11. Big picture design without Big Design Up Front Agile Roots 2010 Desirée Sy Media + Entertainment
  12. 12. • “Adapting Usability Investigations for Agile User-Centered Design” JUS, May 2007 • http://tiny.cc/agileUCD © 2010 Desirée Sy, All rights reserved
  13. 13. 1
  14. 14. dsy.agileUX@gmail.com Twitter: @DesireeSy (tweeting all links in this presentation) © 2010 Desirée Sy, All rights reserved
  15. 15. 2
  16. 16. can’t code (no... really!) © 2010 Desirée Sy, All rights reserved
  17. 17. agile UX practitioner (a very good one) © 2010 Desirée Sy, All rights reserved
  18. 18. ethnography + behaviour prototyping + UX validation © 2010 Desirée Sy, All rights reserved
  19. 19. user research + ‘mini-fi’* prototypes + usability testing © 2010 Desirée Sy, All rights reserved *‘minimum-fidelity’
  20. 20. ... deconstructed to fit within sprint-length © 2010 Desirée Sy, All rights reserved
  21. 21. 3
  22. 22. Usually, I speak here.... ... So if I use UX jargon, please ask me right away © 2010 Desirée Sy, All rights reserved
  23. 23. 4 © 2010 Desirée Sy, All rights reserved
  24. 24. I agile UX © 2010 Desirée Sy, All rights reserved
  25. 25. Agile UX: the good • Narrows the gap • Contextual inquiry & between finding and usability testing on fixing issues actual product • Less “design drift” • Satisfying to see designs in real use • User data has effect on current release • Face-to-face is better than “over the wall” • Most important features are done first • Enables requirements iteration © 2010 Desirée Sy, All rights reserved
  26. 26. Agile UX: the good • Narrows the gap • Contextual inquiry & between finding and usability testing on fixing issues actual product • Less “design drift” • Satisfying to see designs in real use • User data has effect on current release • Face-to-face is better than “over the wall” • Most important features are done first • Enables requirements iteration © 2010 Desirée Sy, All rights reserved
  27. 27. 5
  28. 28. My agile UX background Before we were Autodesk... Alias • products and users • UX team • agile team © 2010 Desirée Sy, All rights reserved
  29. 29. • Commercial, shrinkwrapped software • 3D graphics, highly interactive • Non-standard UI • Users: Creative professionals • Generative, open-ended tasks © 2010 Desirée Sy, All rights reserved
  30. 30. © 2010 Desirée Sy, All rights reserved
  31. 31. UX team • 1 manager • 4 interaction designers (generalists) • 2 graphic designers • UX developer (student intern) © 2010 Desirée Sy, All rights reserved
  32. 32. established UX team © 2010 Desirée Sy, All rights reserved
  33. 33. agile team • 1 product manager • 1 dev lead • 2.5 developers (the 0.5 is the dev lead) • 1.5 interaction designers • 1 UX developer (student intern) • 1 QA • 1 documentation • 1 graphic designer © 2010 Desirée Sy, All rights reserved
  34. 34. full-time*, co-located © 2010 Desirée Sy, All rights reserved *except for managers & graphic designer
  35. 35. product owner = product manager + dev lead + interaction designer © 2010 Desirée Sy, All rights reserved
  36. 36. product owner = every team member © 2010 Desirée Sy, All rights reserved
  37. 37. Sprint Zero + Iteration Planning © 2010 Desirée Sy, All rights reserved
  38. 38. Stay tuned for... agile UX planning (Agile 2010) © 2010 Desirée Sy, All rights reserved
  39. 39. Big picture of the talk • The problem + the framework • Agile + the big picture • Design chunking • Mini-releases • Putting it together © 2010 Desirée Sy, All rights reserved
  40. 40. THE PROBLEM
  41. 41. from Jeff Patton’s keynote © 2010 Desirée Sy, All rights reserved
  42. 42. output outcome we build this we want this ©  2009  Jeff  Pa+on,  all  rights  reserved,  www.AgileProductDesign.com 42
  43. 43. solving problems NOT building solutions © 2010 Desirée Sy, All rights reserved
  44. 44. Learning about the world, imagining solutions, evaluating working solutions in the world Building high- quality working software Pay equal attention to “discovery” practice and “delivery” practice
  45. 45. discovery: problem definition © 2010 Desirée Sy, All rights reserved
  46. 46. some problems take >2 weeks to solve (but they can still be solved in 2-week increments) © 2010 Desirée Sy, All rights reserved
  47. 47. output outcome we build this we want this ©  2009  Jeff  Pa+on,  all  rights  reserved,  www.AgileProductDesign.com 47
  48. 48. Outcomes ARE measurable © 2010 Desirée Sy, All rights reserved
  49. 49. Joshua Porter: http://slidesha.re/bDtLpG © 2010 Desirée Sy, All rights reserved
  50. 50. Dana Chisnell: http://j.mp/aTV8fX © 2010 Desirée Sy, All rights reserved
  51. 51. discovery tools big up front © 2010 Desirée Sy, All rights reserved
  52. 52. flexible tunnel vision just enough sprint tools small increments quality faster to wrong timeboxed product iterative change-friendly t collaborative react instead of faster to product reflect continuous treadmill © 2010 Desirée Sy, All rights reserved
  53. 53. The big picture is true north © 2010 Desirée Sy, All rights reserved
  54. 54. big picture symptoms • Incomplete user workflows • Feature creep (but in smaller units) • “Value” thresholds aren’t defined • Can’t cope with new feedback • Don’t know what “done” means © 2010 Desirée Sy, All rights reserved
  55. 55. agile big picture • Big = “high-level” NOT “detailed” • Not just up front • Capable of continuous improvement • Shared + visible • Just-in-time detail and documentation © 2010 Desirée Sy, All rights reserved
  56. 56. THE FRAMEWORK
  57. 57. Levels of detail Sprint Capability Release Product
  58. 58. Goals • Applied to backlog, let you: • discard • sort • rank • Focus UX investigations • As requirements, they can define “done” © 2010 Desirée Sy, All rights reserved
  59. 59. John Schrag: http://j.mp/9WTn8c © 2010 Desirée Sy, All rights reserved
  60. 60. Example • SketchBook Pro • Tablet PC + Wacom tablets © 2010 Desirée Sy, All rights reserved
  61. 61. AGILE + THE BIG PICTURE
  62. 62. Before breaking designs into iterations... © 2010 Desirée Sy, All rights reserved
  63. 63. ... think about Product and Release goals © 2010 Desirée Sy, All rights reserved
  64. 64. Product goals Product vision • Who it’s for (and not) • What it is (and isn’t) Design/Engineering/Business Principles • Define product characteristics to drive decisions © 2010 Desirée Sy, All rights reserved
  65. 65. In action... Product vision • For creative professionals • Sketching: responsive, quick, loose • Drop: Image processing • Rank: Brushes, make it faster, promote flow © 2010 Desirée Sy, All rights reserved
  66. 66. In action... Design Principles • Elegant simplicity, Stylus-friendly, Self revealing, Maximum work area • Drop/Rank: Don’t add because we can • Design “Done”: All features must have access without a keyboard • Investigate: Discoverability, Clutter © 2010 Desirée Sy, All rights reserved
  67. 67. In action... Design and Engineering Principles • Self revealing/Optimize (fast + small code) • Design had large set of icons, but that added to code weight. We redesigned. Business Principles • Enter broader market • Design and code for trial version © 2010 Desirée Sy, All rights reserved
  68. 68. In action... TiVo Design Principle • It’s entertainment, stupid • “Lean back, not forward” • Drop/rank: No keyboard entry - “How (Not) to Destroy a Great User Experience” UPA 2006 Rich Fulcher, Rachel Garb, Alex Liston, Donna Slote © 2010 Desirée Sy, All rights reserved
  69. 69. In action... Apple iPhone iOS 1.0 and 2.0 • “Done”: Cut + Paste © 2010 Desirée Sy, All rights reserved
  70. 70. When? • Good projects already have them (regardless of SW methodology) • Before Sprint Zero • At the time project is ‘green-lit’ • OR if a product is being ‘reset’ • For small products, could be Sprint Zero of v1 release © 2010 Desirée Sy, All rights reserved
  71. 71. Release goals • Pragmatic distillation of business goals • Although business-focused, needs to be input from development and design • Aligns the team trajectory • Guidance for course corrections • Not the backlog (or a subset of it) © 2010 Desirée Sy, All rights reserved
  72. 72. In action • SketchBook Pro v2 • “Remove barriers to purchase from trial” • Research: Survey. Focused the ‘who’ • Drop/Rank: 200 > 25 > 10 (top 5) • Drop: Saving colours • Consensus: Dropped Rotate Canvas © 2010 Desirée Sy, All rights reserved
  73. 73. In action • Rare but powerful: Redefine the release • SketchBook Pro v1.1 • “Mac OS X port” • Reset the alignment • Promote: Add keyboard shortcuts © 2010 Desirée Sy, All rights reserved
  74. 74. When and how? • Sprint Zero of upcoming release • How many iterations per release? • NO designs! • Just enough detail to share direction • Define problems, not solutions © 2010 Desirée Sy, All rights reserved
  75. 75. DESIGN CHUNKING
  76. 76. Once you have the big picture... © 2010 Desirée Sy, All rights reserved
  77. 77. ... set design goals at the Capability level © 2010 Desirée Sy, All rights reserved
  78. 78. Capability/Sprint goals • Articulate problems to solve for a workflow/user story • Carry forward as sprint goals • Defined through chunked research • Used to chunk designs • Used to chunk mini-releases • Used to define “done” © 2010 Desirée Sy, All rights reserved
  79. 79. In action Brush Resize © 2010 Desirée Sy, All rights reserved
  80. 80. In action Brush Resize • First 5 minutes: learn without documents • Resizing without Brush Editor • One control for size, not 2-5 • Keep focus in-canvas • Fewer dialogues (covering the work) • Stylus only (no keyboard) © 2010 Desirée Sy, All rights reserved
  81. 81. Tear and build • Design a capability over >1 cycle. • Break a design into chunks. • Mix and match chunks in investigations: mini-research, usability test and iterate on mini-prototype. • Look at the design at the Capability level. Now break it into mini-specifications, to be coded over >1 sprint. © 2010 Desirée Sy, All rights reserved
  82. 82. (To repeat:) Stay tuned for... agile UX planning (Agile 2010) © 2010 Desirée Sy, All rights reserved
  83. 83. Caveats • You’ll need to establish a buffer first • Even with the buffer, you’ll still need to write mini-specs for the next cycle • It is Big Design if >1 = too many sprints © 2010 Desirée Sy, All rights reserved
  84. 84. Design chunking • Look at the list of capability goals • What can you investigate over next few sprints? • Layer sprint-sized investigations and prototypes to meet all required goals © 2010 Desirée Sy, All rights reserved
  85. 85. In action Brush Resize design goals: • First 5 minutes: learn without documents • Resizing without Brush Editor • One control for size, not 2-5 • Keep focus in-canvas • Fewer dialogues (covering the work) • Stylus only (no keyboard) © 2010 Desirée Sy, All rights reserved
  86. 86. In action Brush Resize design chunks: • Brush Resize with hotkey • Brush Resize with stylus (interaction) • Brush Resize with stylus (look) • “Workflow” prototype © 2010 Desirée Sy, All rights reserved
  87. 87. In action Brush Resize with hotkey: Disposable code prototypes • Resizing without Brush Editor • One control for size, not 2-5 • Keep focus in-canvas • Fewer dialogues (covering the work) © 2010 Desirée Sy, All rights reserved
  88. 88. In action • Brush Resize with stylus (interaction): Whiteboard prototype • Stylus only (no keyboard) © 2010 Desirée Sy, All rights reserved
  89. 89. In action • Brush Resize with stylus (look): Graphic designs • Stylus only (no keyboard) © 2010 Desirée Sy, All rights reserved
  90. 90. In action • Workflow prototype: Disposable coded prototype • First 5 minutes: learn without documents • Combined with 2 other user stories: Brush Palette and Custom Brushes © 2010 Desirée Sy, All rights reserved
  91. 91. MINI-RELEASES
  92. 92. ‘Small Design’ User Stories • Look at the list of the Capability goals • Which users will see the next cuts + when? • Layer the implementation to deliver on key Capability/Release goals in every sprint • Think worst-case scenario: is each incremental build shippable? © 2010 Desirée Sy, All rights reserved
  93. 93. In action Brush Resize implementation: • Per-brush Property Editor, with Size control • Brush Resize widget © 2010 Desirée Sy, All rights reserved
  94. 94. In action Per-brush Properties dialog with Size control: • Overlap with Custom Brushes • First 5 minutes: learn without documents • Resizing without Brush Editor • One control for size, not 2-5 • Stylus only (no keyboard) © 2010 Desirée Sy, All rights reserved
  95. 95. In action Brush Resize widget: • Keep focus in-canvas • Fewer dialogues (covering the work) © 2010 Desirée Sy, All rights reserved
  96. 96. Usability acceptance criteria • Sit with developers as they are turning the user stories into hard estimates. • Make sure you understand how each of their pieces fits in the capability. • Sit with testers to add code-testable usability criteria if needed. © 2010 Desirée Sy, All rights reserved
  97. 97. In action Heads up display • Fixed decimal point © 2010 Desirée Sy, All rights reserved
  98. 98. PUTTING IT TOGETHER
  99. 99. “Big picture” design • product + release goals = big picture • capability goals come from this • multi-sprint designs become design chunks • design is “done” when design goals are met • write Small Design user stories • UX requirements: on unit with estimates • check incoming reqs against all goals © 2010 Desirée Sy, All rights reserved
  100. 100. expanding agile UX activities © 2010 Desirée Sy, All rights reserved
  101. 101. • Create prototypes • Rapid usability testing • Identify and fix problems • Define mini-specifications • Check implementation © 2010 Desirée Sy, All rights reserved
  102. 102. Machete Clear obstacles (faster and better) © 2010 Desirée Sy, All rights reserved
  103. 103. Compass Check direction (refine intent) © 2010 Desirée Sy, All rights reserved
  104. 104. • Rapid longitudinal user research • Set design goals Help to: • Group and prioritize backlog • Plan product exposure • Recognize “done” © 2010 Desirée Sy, All rights reserved
  105. 105. © 2010 Desirée Sy, All rights reserved
  106. 106. Thanks. dsy.agileUX@gmail.com @DesireeSy © 2010 Desirée Sy, All rights reserved

×