Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using rapid prototying_for_design_iteration


Published on

  • Be the first to comment

  • Be the first to like this

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