Using rapid prototying_for_design_iteration

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

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 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

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

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

Testing a design:
Paper prototyping

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

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

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

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

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

Rapid It
R 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 the
center of the design

Using rapid prototying_for_design_iteration

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Using rapid prototying_for_design_iteration (20)

More from drewz lin (20)

Using rapid prototying_for_design_iteration