This document discusses using rapid prototyping and iterative design to incorporate user feedback into the product development process. It advocates for: 1) Conducting user research like contextual inquiries and creating work models to understand user needs before design. 2) Developing low-fidelity paper prototypes to validate the product structure and features with users. 3) Iteratively testing prototypes with users, interpreting the feedback, and quickly modifying the prototypes. 4) Integrating this user-centered design process into an Agile development methodology with short sprints to incorporate user input at each stage of design.

1. Using Rapid Prototyping for
Design Iteration
es g te at o
Hugh Beyer
hugh.beyer@incontextdesign.com
Karen Holtzblatt, CEO 978.823.0100 www.incontextdesign.com
Hugh Beyer, CTO info@incontextdesign.com www.innovationincool.com

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. Base principle for real user feedback
Real user feedback – Doesn’t come from:
 Product owners
 Stakeholders
 User surrogates
 Purchasers
 People who used to be users
 Demos
 Focus groups
And…
 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. 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 data
Define & 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. Contextual Design
1 Contextual Inquiry
2 Interpretation Session
3 Work Models & Affinity
4 Visioning
5 Storyboards Validate product concepts,
process changes, and user
experience while testing user
6 Interaction Patterns & UED reception
Or bring out concept boards
7 Paper Prototype Interviews to validate direction before
detailed design
8 Visual Design & Agile Stories

6. Testing a design:
Paper prototyping

7. Using paper prototypes
Test design concepts with users
 Structure, function, and flow
 You are not testing a final, perfect design
Use 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 validating
Iterative 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. A paper prototype

9. A paper prototype

10. Principles for paper prototype interviewing
Context – 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 it
Partnership – co-design
 Modify the prototype as you go
 Suggest changes based on your knowledge of the whole system
Interpretation – understand the issues
 Look for underlying issues related to structure and interaction patterns
 Watch emotional reaction to the system
Focus – validate the structure
 Focus on the work practice the prototype was designed to address
 Ignore visual design issues

11. Structure of a paper prototype interview
Introduction
 Introduce prototype and interview situation
 Get an overview of their work
Transition
 Move to prototype after you find a few hooks
 Orient user in the prototype
During 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 notes
Wrap-Up
 Restate key findings
 W lk through any remaining parts of system
Walk th h i i t f t
 Check sales point

12. Paper prototype interpretation session
Record the data
 Separate the conversations
p
• Work practice
• Structural
• Function
• UI detail
• Validation
Interpretation roles
 Interviewer recounts from prototype
 Notetaker reads their notes
 Participants listen for different types of issues
 Recorder captures issues and labels

13. Resolving issues and iterating the prototype
Organize issues according to structure
 Print issues on Post-its and attach to relevant area on interaction sketches
Resolve large structural issues as a team
 Complex issues at the level of the overall system or UI components
 Record decisions and new issues
Work out details and lower-level issues in sub-teams
 Address all remaining
 Record decisions and new issues
Create new interaction sketch
 If changes are minor, modify old sketch
Build new paper prototype
 Increase amount of detail after each round

14. Rapid It
R id Iteration within Sprints
ti ithi S i t

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. 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. 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. 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. Put the customer at the
center of the design