Good design teams prototype – often. This presentation takes a hard look at prototyping and provides a framework for assessing the prototyping needs of a team or project. If you have a “standard approach” to prototyping this session will help you re-think your prototyping strategy. If your prototypes are usually created in a similar way, this session will help expand your knowledge of prototyping and ways you can change what you’re doing to be more effective and efficient.

1. #UXPA2016
www.uxpa2016.org
Prototyping:
4 Strategic Factors
for Designers
Lyle Kantrovich
Vivid Mojo – Minneapolis, Minnesota
@Lkantrov

2. #UXPA2016
www.uxpa2016.org
Hand Raising
• Regularly create prototypes
• Regularly test / do research with prototypes
• Regularly review / provide feedback on prototypes
• Have a standard prototyping tool

3. #UXPA2016
www.uxpa2016.org
The Road Ahead
• Think differently about prototyping
• Reconsider how you use prototypes
• Improve your organization’s prototyping maturity

4. #UXPA2016
www.uxpa2016.org
What is a Prototype?
• An early sample, model, or release of a product built to
test a concept or process or to act as a thing to be
replicated or learned from.
– Wikipedia (2016)
• A first or early example that is used as a model for what
comes later
– Merriam Webster
• A first, typical or preliminary model of something,
especially a machine, from which other forms are
developed or copied.
– Oxford Dictionary

5. #UXPA2016
www.uxpa2016.org
What is a Model?
• A three-dimensional representation of a person or
thing or of a proposed structure, typically on a
smaller scale than the original.
– Oxford Dictionary
• A usually miniature representation of something; a
pattern of something to be made; or a set of ideas
and numbers that describe the past, present, or
future state of something (such as an economy or a
business)
– Merriam Webster

6. #UXPA2016
www.uxpa2016.org
What is a Simulation?
• The production of a computer model of something,
especially for the purpose of study
– Oxford Dictionary
• Something that is made to look, feel, or behave like
something else especially so that it can be studied
or used to train people
– Merriam Webster

7. #UXPA2016
www.uxpa2016.org
My Imperfect Definition:
A representation of a design idea
to help communicate, explore,
test or study future possibilities.

8. #UXPA2016
www.uxpa2016.org
Converging Concepts
Related Terms:
• Mockup
• Wireframe
• Beta
• Demo
Model
Simulation
Prototype

9. #UXPA2016
www.uxpa2016.org
Serious Play – by Michael Schrage
Many case studies on
prototyping, simulations,
modeling…from clay to foam
to Excel
Discusses prototyping cultures
and relationship to
innovation.
HBS Press, 1999

10. #UXPA2016
www.uxpa2016.org
Prototypes Create Value Through
Conversations & Interactions.
• Users interacting with the model
• Clients discussing the prototype
• Stakeholders discussing
tradeoffs / needs / use cases
• Team members discussing
materials, build-ability,
maintainability, etc.
Source: Flavio Nazario

11. #UXPA2016
www.uxpa2016.org
Types of Prototypes: Physical
Apple Macintosh LC
Prototype (1989) – Foam
Philips AirFloss Prototype
Source: Philips CommunicationsSource: jimabeles

12. #UXPA2016
www.uxpa2016.org
The Link Trainer (1929)
Source: pasukaru76

13. The question isn’t what kind of
prototypes should we build, but…
What kind of conversations &
interactions do we want to inspire?

14. #UXPA2016
www.uxpa2016.org
Prototype Creators
• Designers create prototypes
• Sometimes a previous or
competing product serves
as a prototype
• Participatory Design involves
users directly in creating
designs / prototypes

15. #UXPA2016
www.uxpa2016.org
The UCD Process
Plan the Design
Process
Understand & Specify
Context of Use
Specify User
Requirements
Produce Design
Solutions to Meet
User Requirements
Evaluate Designs
Against Requirements
Designed Solution Meets
User Requirements
Iterate where
appropriate
ISO 9241-210

16. #UXPA2016
www.uxpa2016.org
Produce Designs
UCD – Prototype Centric Version
Plan the Design
Process
Understand & Specify
Context of Use
Specify User
Requirements
Evaluate Designs
Design Meets User
Requirements
Iterate where
appropriate

17. YOU CAN’T INVENT THE FUTURE
WITHOUT FIRST PROTOTYPING IT.
- Michael Schrage
True innovators don’t create ideas…
they create models & prototypes.
PROTOTYPING IS INNOVATIVE BEHAVIOR

18. #UXPA2016
www.uxpa2016.org
4 Prototyping Factors to Consider
Works Like
Looks Like
Reads Like
Depth & Breadth
• Functionality
• Performance
• Level of Interaction
• Input & Output Methods
• Colors
• Fonts
• Branding
• White space
• Visual “polish”
• Graphics / Photos
• Use of placeholders
• Lorem Ipsum
• Real content
• Scope of features
• Scenarios supported

19. #UXPA2016
www.uxpa2016.org
The “F-Word”
• “Fidelity” is overused, overloaded and overly
simple. It is steeped in assumptions
• Works Like = Functional fidelity
• Looks Like = Visual fidelity
• Reads Like = Content fidelity
• Depth and Breadth = Overall Completeness

20. “What organizations choose NOT to model is
as revealing as what they do.”
- Michael Schrage
A CAUTIONARY WORD

21. #UXPA2016
www.uxpa2016.org
Simplification
• Prototypes = deliberate
simplification (or
oversimplification)
• What should be
simplified and why?
• Simplification and
Complexity both
represent risk Source: Jegi (Flickr)

22. Polish looks for praise.
“ROUGHNESS” INVITES QUESTIONS.

23. #UXPA2016
www.uxpa2016.org
Paper Prototype
• Works like = Low
• Looks like = Low
• Reads like = Low
• Depth & Breadth =
a few screens
Source: Rosenfeld Media

24. #UXPA2016
www.uxpa2016.org
Paper Prototype
Source: Flavio Nazario

25. #UXPA2016
www.uxpa2016.org
757 Cockpit Flight Simulator
• Works like = High
• Looks like = High
• Reads like = High
• Depth & Breadth =
Cockpit Only
Source: Kent Wien (Flickr)

26. #UXPA2016
www.uxpa2016.org
Blueprint
• Works like = Low
• Looks like = Low
• Reads like = Low
• Depth & Breadth =
Summary
Source: David Power (Flickr)

27. #UXPA2016
www.uxpa2016.org
Blueprint – Real Scale
Source: vardehaugen_arkitekter

28. #UXPA2016
www.uxpa2016.org
Wood Prototype – Video Camera
• Works like = Low
• Looks like = Medium
• Reads like = Low
• Depth & Breadth =
Exterior Only
“Form study” used for size, shape,
weight, ergonomics
Source: billibala (Flickr)

29. #UXPA2016
www.uxpa2016.org
3D Architecture Model – Virtual
• Works like = Low
• Looks like = High
• Reads like = Medium
• Depth & Breadth =
Interior & Exterior
Source: Alvin Oei (Flickr)

30. #UXPA2016
www.uxpa2016.org
Axure Prototype
• Works like = Med
• Looks like = Med
• Reads like = High
• Depth & Breadth =
Home + Products

31. #UXPA2016
www.uxpa2016.org
Interactive Prototype – Wikipedia
Android App “Link Preview”
• Works like = High
• Looks like = High
• Reads like = High
• Depth & Breadth =
Link Preview feature
only
Source: Wikimedia

32. DESIGN LEADERSHIP
IS ABOUT MANAGING
PROTOTYPES &
NURTURING PROTOTYPING
CULTURE

33. #UXPA2016
www.uxpa2016.org
Other Prototyping Considerations

34. #UXPA2016
www.uxpa2016.org
Medium
• Clay
• Whiteboard Sketch
• Paper
• Foam Core
• Wood
• Metal
• Cardboard
Virtual:
• PhotoShop
• Axure
• Excel
• Visio / OmniGraffle
• Web
• Desktop or Mobile App

35. THE PHYSICAL MATERIAL USED
IN PROTOTYPING IS A
MAJOR STRATEGIC INNOVATION VARIABLE.
- Michael Schrage
Choice of medium impacts how prototypes
are managed and how teams collaborate.

36. #UXPA2016
www.uxpa2016.org
1956 Packard – Clay Prototype
Clay auto prototypes truncated debate,
rather than inviting discussion.Source: John Lloyd (Flickr)

37. #UXPA2016
www.uxpa2016.org
Medium Impacts Design…
Early HP calculators were
prototyped in cardboard,
resulting in more “squared off”
designs.
They later switched to foam
& resulting designs were
more soft and rounded
HP-35 (1972) HP-39G (2000)Source: WikipediaSource: Kubanczyk (Flickr)

38. #UXPA2016
www.uxpa2016.org
Ownership
• Who can
change it?
• Who gets to
see it?
• When?
Source: DeviantArt BlueAngelPower2003

39. #UXPA2016
www.uxpa2016.org
Prototype Lifetime
Is it throw away?
Will it evolve into the
actual product?
Source: Julia Folsom

40. #UXPA2016
www.uxpa2016.org
Context of (Prototype) Use
• How similar to intended product use?
• Social context?
• Technical context
• Mobile app on mobile
• Mobile app in mobile browser
• Mobile in desktop browser
• Mobile over Webex
• Environment – e.g. distractions, lab vs. home

41. #UXPA2016
www.uxpa2016.org
Refactoring
• How easy will it be to change the prototype?
• Can anyone change it?
• Paper = low skill
• Code = special skills
• Tool = different special skills
• When will we change the level of fidelity?
• Functionality
• Visual
• Content
• When will we stop iterating?
• When do we move from prototype to production (e.g.
code)?

42. #UXPA2016
www.uxpa2016.org
Iterations vs. Variations
v2a
v1a
v3a
v1b v1c
v2b
Variations
Iterations

43. #UXPA2016
www.uxpa2016.org
“Built Like”
• Are there material or architectural risks?
• New technology planned?
• Technical constraints?
• Technical challenges?

44. #UXPA2016
www.uxpa2016.org
Scale
Making it smaller can help simplify.
Source: eBay

45. #UXPA2016
www.uxpa2016.org
Opera Garnier - Architect’s Model
Louis Villeminot - Plaster – 1/50th Scale (1863)
Source: Wikimedia

46. #UXPA2016
www.uxpa2016.org
Cutaway Model – Opera Garnier
Source: Richard White (Flickr)

47. #UXPA2016
www.uxpa2016.org
Planning for prototypes in the
UCD process:
• Prototype the 20% that will get 80% of use/value.
• Target the biggest risks & opportunities.
• For testing, prototype scope needs to cover scope of test
scenarios
• Level of prototype fidelity shouldn’t exceed the team’s level
of thinking (idea maturity).
• If too high? Less feedback, unrealistic expectations.
• If too low? Misinterpretation & unmitigated risks.
• There are “devils” in the details (i.e., interaction & content matter)

48. #UXPA2016
www.uxpa2016.org
A Few Thoughts on Agile
Agile is about getting to a prototype quicker.
• Agile kills documentation…documentation is not a
prototype.
• Agile simplifies “requirements” to generate a
working limited system more quickly
• But it does this often with a certain set of limitations in
terms of risks it adopts.
• “Prototypes” (aka MVP’s) often built with production
materials
• Only one variation at a time usually

49. #UXPA2016
www.uxpa2016.org
Do you need a Prototype?
• Some questions can be answered without a
prototype
• Tree tests & Card Sorts – Labels & Content Organization
• Will the prototype help answer questions? Is
change possible?
• If not, why create a prototype?

50. #UXPA2016
www.uxpa2016.org
Summary
• Adjust your thinking beyond the “F-word”
• Works Like
• Looks Like
• Reads Like
• Depth & Breadth
• Don’t prototype on “autopilot”

51. #UXPA2016
www.uxpa2016.org
Summary (2)
Consider & plan for:
• Roughness
• Simplification
• What doesn’t get
prototyped
• Medium
• Lifetime
• Context of prototype
use
• Competing variations
• Refactoring process
• Scale
• Conversations &
Interactions

52. #UXPA2016
www.uxpa2016.org
Twitter: @Lkantrov
Email: Lyle.Kantrovich@gmail.com
LinkedIn: Lyle Kantrovich
thank you