Integrating Eective Prototyping into Your
Design Process
Fred Beecher, Senior User Experience Consultant
Monday, March 23, 2009

Monday, March 23, 2009

Monday, March 23, 2009

The Dimensions of Fidelity
“Production
Ready” Prototype
Paper JPG Image Mapped HVF Interactive
Prototype JPGs (“Slap & Prototype
Map”)
Visual Fidelity
Paper WF Clickable LVF Interactive
Prototype Wireframe Prototype
Proof of
Concept
Wireframe Image Mapped Sketch
Sketches Scans
Functional Fidelity
Monday, March 23, 2009

Two Additional Dimensions of Fidelity
Technical Fidelity
• “Production-ready” prototypes
• Your prototype is either production-ready or it ain’t
PROBLEMS
• Constrains UX design concepting
• Expensive & time-consuming
WHEN CAN IT WORK?
• You have mad coding skillz
• Your organization has mad resources
Monday, March 23, 2009

Two Additional Dimensions of Fidelity
Fidelity of Content
• Your prototype is NOT just interaction
• Content plays a large role in testing, and testing is the
PROBLEMS
• You can’t have a prototype without content
• Testing prototypes with crappy content will give you
crappy data
YOUR PROTOTYPES MUST CONTAIN PLAUSIBLE CONTENT IF
YOU WANT TO GET GOOD DATA OUT OF TESTING THEM
Monday, March 23, 2009

“There is no such thing as high
or low fidelity, only appropriate
fidelity.” - Bill Buxton
Monday, March 23, 2009

What LVF/LFF Prototypes Are Good For
Discovering missing
functionality
Finding problems with a
workflow
Separating good UX design
concepts
from... less good ones
Getting preliminary consensus on
a UX design direction: “Is this what
you mean?”
Monday, March 23, 2009

What LVF/HFF Prototypes Are Good For
Enabling the use of user testing as a
design tool
Proof-of-Concept testing of isolated
interactions
Enabling remote prototype
testing
Validating UX design direction with
stakeholders
Validating UX implementation of requirements with
stakeholders
Supplementing printed documentation for
development teams
Monday, March 23, 2009

Monday, March 23, 2009

What HVF/LFF Prototypes Are Good For
Discovering any usability problems introduced by the
visual design
Finding problems with a workflow
when testing with non-savvy user
groups
Iterating through multiple form factor
concepts when designing physical
interactive devices
Monday, March 23, 2009

What HVF/HFF Prototypes Are Good For
Enabling user testing as a design tool when
integrating new functionality into established
systems
User testing with non-savvy user
groups
Supplementing printed documentation
for OFFSHORE development teams
“Production-ready” prototypes, by
definition, require both high visual and
functional fidelity
Wowing stakeholders into
submission
Monday, March 23, 2009

Integrating Prototyping Into Your Process
• Start Small
– Maybe even just a tiny, cheap little proof-of-concept
• Know what questions your prototype must answer
– Early in design, the questions will likely be more structural
– Later on, the questions will relate more to usability
• Choose a level of fidelity that will answer them
– Lo fi is generally better at addressing big structural issues
– Hi fi is generally better at addressing usability issues
• Choose a fidelity-appropriate methodology & test
• Evangelize, evangelize, evangelize!
Monday, March 23, 2009

Design Context: Corporate-Agile-Mature
UX
• Develop the detailed scenarios you want to test
• Sketch two or three of your UX design concepts
into simple prototypes & test to choose one
• Build a small interactive prototype of the critical
interactions & proof-of-concept test them
• Work with the team’s prototyper develop a
fleshed-out production-ready prototype & test
it too
Monday, March 23, 2009

Design Context: Corporate-Waterfall-
New UX
• Develop detailed scenarios you want to test
• Build an interactive prototype & walk through it
with project stakeholders
• If possible, test that same prototype with users
• Simultaneously walk through the printed
documentation & the prototype when handing it
o to developers
• If possible, generate an annotated prototype for
developers’ reference
Monday, March 23, 2009

Design Context: Consulting/Agency
• Develop the detailed scenarios you want to test
• Sketch two or three of your UX design concepts
into simple prototypes & test to choose one
– Walk through it with the client to validate your
direction
• Build a small interactive prototype of the critical
interactions & proof-of-concept test them
– Walk through it with the client to validate your
direction
• Flesh out the interactive prototype & test
– Walk through it with visual designers & developers,
along with paper documentation
Monday, March 23, 2009

Design Context: Hardware Device
• Develop the detailed scenarios you want to test
• Do as many iterations of a low functional
fidelity prototype as you can
– They may need to have high visual fidelity if you’re
not designing for a tech-savvy audience
• Do a high-functional fidelity prototype to
supplement the printed documentation you
provide to the engineers
• Proactively keep yourself involved once they
start building hardware prototypes
Monday, March 23, 2009

Thanks! Questions?
Fred Beecher
fbeecher@gmail.com
@fred_beecher
Monday, March 23, 2009