Using rapid prototying_for_design_iteration
Upcoming SlideShare
Loading in...5

Using rapid prototying_for_design_iteration






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Using rapid prototying_for_design_iteration Using rapid prototying_for_design_iteration Presentation Transcript

    • 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
    • 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
    • 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
    • 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
    • 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
    • Testing a design:Paper prototyping
    • 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
    • A paper prototype
    • A paper prototype
    • 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
    • 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
    • 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
    • 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
    • Rapid ItR id Iteration within Sprints ti ithi S i t
    • 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
    • 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
    • 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
    • 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
    • Put the customer at thecenter of the design