View
103
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
Using Rapid Prototyping for Design Iteration
Hugh Beyer
es g te at o
Hugh Beyerhugh.beyer@incontextdesign.com
Karen Holtzblatt, CEOHugh Beyer, CTO
978.823.0100info@incontextdesign.com
www.incontextdesign.comwww.innovationincool.com
UX and Agile: The promiseUX and Agile: The promise
Agile says development in steps – and iterateUX says work with users to create value – and iterate
The “ideal” productPhase 0 The ideal productPhase 0sets direction
(requirements)
User Iteration
What users really need
User Iteration refines the interface
and function
need
Base principle for real user feedbackBase principle for real user feedback
Real user feedback – Doesn’t come from: Product owners
Stakeholders
User surrogates
Purchasers
People who used to be users
DemosDemos
Focus groups
And… You can’t put the user on the team
Users can’t give you a design
U ’t t ll h t th t Users can’t tell you what they want
Contextual DesignContextual Designol
utio
ns
Talk to your customers in the field1 Contextual Inquiry1
men
ts&
So
Interpret the data as a team to capture key issues and activitiesInterpretation Session2
Work Models & 3
Req
uire
m
Consolidate data across customers for a full market viewAffinity Diagramming3
Generate new products & the next product concepts steeped in data Visioning4
Con
cept
s
Interaction Patterns & 6
Work out the details of particular tasks and rolesStoryboards5
e &
Val
idat
e
Define system structure, function, content and user interactionUser Environment Design6
Mock up the interface to validate direction and UI with customersPaper Prototype Interviews7
Def
ine p
Design and test the final look; base stories on validated functionVisual Design & Agile Stories8
Contextual DesignContextual Design
Contextual Inquiry1
Interpretation Session2
Work Models & Affinity 3
Visioning4
Storyboards5
Interaction Patterns & UED6
Validate product concepts, process changes, and user experience while testing user reception
Paper Prototype Interviews7
8
Or bring out concept boards to validate direction before detailed design
Visual Design & Agile Stories 8
Testing a design:Testing a design: Paper prototyping
Using paper prototypesUsing paper prototypes
Test design concepts with users Structure, function, and flow
You are not testing a final, perfect design
Use hand-drawn paper prototypesR h l t t b tt Rough paper reveals structure better
Paper lets the user engage and co-design• Use the language of the user
Pi d t b il bl d h bl• Pieces need to be easily moveable and changeable
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 Move to running prototype as parts stabilize
Test low-level UI after the structure is stable
A paper prototypeA paper prototype
A paper prototypeA paper prototype
Principles for paper prototype interviewingPrinciples for paper prototype interviewing
Context – grounded in real experience Walk through the user’s real work in the paper prototypeg p p p 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 systemWatch 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 interviewStructure 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 Take notes
Wrap-Up Restate key findings
W lk th h i i t f t Walk through any remaining parts of system
Check sales point
Paper prototype interpretation sessionPaper prototype interpretation session
Record the data Separate the conversationsp
• Work practice• Structural• Function• UI detail• Validation
Interpretation rolesInterpretation 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 prototypeResolving 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 sketchCreate new interaction sketch If changes are minor, modify old sketch
Build new paper prototypeBuild new paper prototype Increase amount of detail after each round
R id It ti ithi S i tRapid Iteration within Sprints
Phase 0 stepsPhase 0 steps
Phase 0Phase 0 Release PlanningRelease Planning DevelopmentDevelopment DeploymentDeploymentgg
Field Research• Contextual Inquiry• Work models
Field Research• Contextual Inquiry• Work models
VisioningVisioning Concept Validation• Low-fidelity prototypingConcept Validation• Low-fidelity prototyping
Determines who the customer is and what to build
Necessary precursor to Agile DevelopmentNecessary precursor to Agile Development
Result: Tested and validated product structure and features
Contextual Design enables Agile developmentContextual Design enables Agile development
Phase 0Phase 0 Release PlanningRelease Planning
Developmentsprint | sprint | sprint | sprint | sprint
Developmentsprint | sprint | sprint | sprint | sprint DeploymentDeploymentPlanningPlanning sprint | sprint | sprint | sprint | sprintsprint | sprint | sprint | sprint | sprint p yp y
Detailed design
Detailed design
In-the-moment guidance
In-the-moment guidance
Quick user feedback
Quick user 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 Example schedule of CD Agile Phase 0
User-centered Agile Compressed into a short
Week 1 – Gather data from 8-10 usersWeek 1 – Gather data from 8-10 users
prin
tpr
int
Phase 0
For constrained project focus only!
Week 2 – Consolidate dataWeek 2 – Consolidate data
Sp
Sp
Week 3 – Vision and storyboardWeek 3 – Vision and storyboard
Week 4 – UED and UIWeek 4 – UED and UI
Phase 0 sprintsusing Scrum as a process frameworkS
prin
tS
prin
t
Week 5 – Release planning & validation (2-4 users)Week 5 – Release planning & validation (2-4 users)
rint
rint
Week 6 – Validation & redesignWeek 6 – Validation & redesign
Spr
Spr
ntnt
Development Sprint 1
Spr
inS
prin
Example schedule of an Agile SprintExample schedule of an Agile Sprint
M W: Collaborate with developer; WorkM W: Collaborate with developer; Work
User-centered Agile Prototype testing for
d t il d UI
M-W: Collaborate with developer; Work up detailed designsTh: 4 users + interpretationF: Revise detailed design
M-W: Collaborate with developer; Work up detailed designsTh: 4 users + interpretationF: Revise detailed design
Wee
k 1
Wee
k 1
detailed UI
Testing of initial implementations for rapid feedback
F: Revise detailed designF: Revise detailed design
M: Collaborate on new/detailed designM: Collaborate on new/detailed designek 2
ek 2
eedbacgW/Th: Check design implementation
gW/Th: Check design implementation
Wee
Wee
Put the customer at the center of the design
Recommended