Using rapid prototying_for_design_iteration


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using rapid prototying_for_design_iteration

  1. 1. Using Rapid Prototyping for Design Iteration es g te at o Hugh Beyer hugh.beyer@incontextdesign.comKaren Holtzblatt, CEO 978.823.0100 www.incontextdesign.comHugh Beyer, CTO
  2. 2. UX and Agile: The promise Agile says development in steps – and iterate UX says work with users to create value – and iterate Phase 0 The “ideal” product ideal sets direction(requirements) User Iteration refines the interface and function What users really need
  3. 3. Base principle for real user feedbackReal user feedback – Doesn’t come from:  Product owners  Stakeholders  User surrogates  Purchasers  People who used to be users  Demos  Focus groupsAnd…  You can’t put the user on the team  Users can’t give you a design U Users can’t t ll you what th want ’t tell h t they t
  4. 4. Contextual Design olutions 1 Contextual Inquiry Talk to your customers in the field ments & So 2 Interpretation Session Interpret the data as a team to capture key issues and activities Work Models &Requirem 3 Affinity Diagramming Consolidate data across customers for a full market view 4 Visioning Generate new products & the next product concepts steeped in dataDefine & Validate Concepts 5 Storyboards Work out the details of particular tasks and roles Interaction Patterns & 6 User Environment Design Define system structure, function, content and user interaction 7 Paper Prototype Interviews Mock up the interface to validate direction and UI with customers p e 8 Visual Design & Agile Stories Design and test the final look; base stories on validated function
  5. 5. Contextual Design1 Contextual Inquiry2 Interpretation Session3 Work Models & Affinity4 Visioning5 Storyboards Validate product concepts, process changes, and user experience while testing user6 Interaction Patterns & UED reception Or bring out concept boards7 Paper Prototype Interviews to validate direction before detailed design8 Visual Design & Agile Stories
  6. 6. Testing a design:Paper prototyping
  7. 7. Using paper prototypesTest design concepts with users  Structure, function, and flow  You are not testing a final, perfect designUse hand-drawn paper prototypes R Rough paper reveals structure b tt h l t t better  Paper lets the user engage and co-design • Use the language of the user • Pi Pieces need t b easily moveable and changeable d to be il bl d h bl  Paper allows for real work, not just demo  Find what works for users instead of just validatingIterative prototyping process  A new iteration every 10 days  Move to running prototype as parts stabilize  Test low-level UI after the structure is stable
  8. 8. A paper prototype
  9. 9. A paper prototype
  10. 10. Principles for paper prototype interviewingContext – grounded in real experience  Walk through the user’s real work in the p p p g paper prototype yp  Make sure users interact with itPartnership – co-design  Modify the prototype as you go  Suggest changes based on your knowledge of the whole systemInterpretation – understand the issues  Look for underlying issues related to structure and interaction patterns  Watch emotional reaction to the systemFocus – validate the structure  Focus on the work practice the prototype was designed to address  Ignore visual design issues
  11. 11. Structure of a paper prototype interviewIntroduction  Introduce prototype and interview situation  Get an overview of their workTransition  Move to prototype after you find a few hooks  Orient user in the prototypeDuring the Interview  Replace sample data with real data  Have the user interact with the prototype to do real work • Do NOT fall into demo mode  Modify prototype with user’s suggestions  Take notesWrap-Up  Restate key findings  W lk through any remaining parts of system Walk th h i i t f t  Check sales point
  12. 12. Paper prototype interpretation sessionRecord the data  Separate the conversations p • Work practice • Structural • Function • UI detail • ValidationInterpretation roles  Interviewer recounts from prototype  Notetaker reads their notes  Participants listen for different types of issues  Recorder captures issues and labels
  13. 13. Resolving issues and iterating the prototypeOrganize issues according to structure  Print issues on Post-its and attach to relevant area on interaction sketchesResolve large structural issues as a team  Complex issues at the level of the overall system or UI components  Record decisions and new issuesWork out details and lower-level issues in sub-teams  Address all remaining  Record decisions and new issuesCreate new interaction sketch  If changes are minor, modify old sketchBuild new paper prototype  Increase amount of detail after each round
  14. 14. Rapid ItR id Iteration within Sprints ti ithi S i t
  15. 15. Phase 0 steps Release Phase 0 Development Deployment Planning g Field Research • Contextual Inquiry Visioning Concept Validation • Work models • Low-fidelity prototyping  Determines who the customer is and what to build  Necessary precursor to Agile Development  Result: Tested and validated product structure and features
  16. 16. Contextual Design enables Agile development Release Development Phase 0 Deployment p y Planning sprint | sprint | sprint | sprint | sprint Detailed In-the-moment Quick user design guidance feedback  Sprint planning – Detailed planning session to define tasks for the sprint  Sprint development – The coding and UX work of the sprint  Sprint review – End of sprint reflection
  17. 17. Example schedule of CD Agile Phase 0 Week 1 – Gather data from 8-10 users User-centered Agile print  Compressed into a short Sp Phase 0 Week 2 – Consolidate data  For constrained project focus only! Week 3 – Vision and storyboard Phase 0 sprints Sprint using Scrum as a process framework Week 4 – UED and UI Week 5 – Release planning & validation (2-4 users) rint Spr Week 6 – Validation & redesign nt Sprin Development Sprint 1
  18. 18. Example schedule of an Agile Sprint M-W: M W: Collaborate with developer; Work Week 1 up detailed designs User-centered Agile Th: 4 users + interpretation  Prototype testing for F: Revise detailed design detailed d t il d UI  Testing of initial implementations for rapid Wee 2 M: Collaborate on new/detailed design g feedback eedbac ek W/Th: Check design implementation
  19. 19. Put the customer at thecenter of the design