Slides for prototyping workshop I facilitated for the 2015 PhillyCHI Workshop Series. Covers overview of prototyping, methods, and considerations when considering prototype fidelity.

2. LEONARDO DA VINCI
Artist
Engineer
Inventor
Philosopher
UX Designer

4. INTRODUCTIONS

5. noun
a first, typical or preliminary
model of something from
which other forms are
developed or copied
verb
make a prototype of (a
product)
PROTOTYPE
/ prō də tīp /

6. USER
/’yōōzer/
noun
a person who uses or
operates something, esp. a
computer or other machine
noun
practical contact with and
observation of facts or events
EXPERIENCE
/ik’spi(ǝ)reǝns/

7. User experience
encompasses all aspects of
the end-user's interaction
with a product, service,
system, or environment.
USER
EXPERIENCE

13. PROTOTYPING
IS THE MATERIALZATION
OF A DESIGN CONCEPT

14. PROTOTYPING
IS ABOUT SIMULATING
SENSORY INPUT + OUTPUT

15. USER TESTING PRESENTATION
COMMUNICATION
FEASIBILITY
Will this work for my
intended audience?
Will my stakeholders buy
into this?
Will this shit even work?
Will my stakeholders
understand this?
So why do we prototype?

16. AND FOR FUN!
Am I having a good time?

17. “I have not failed,
I’ve just found
10,000 ways that
won’t work”
- Thomas Edison
FAIL
FAST
FAIL
OFTEN

18. PROTOTYPING
SHOULD BE
RAPID +
ITERATIVE

19. Client or stakeholder
can’t make it rain for
prototyping and/or
user testing?
DO IT ANYWAY.

20. RAPID
INSIGHT
TESTING
Prototyping
and testing at
the minimum to
maximize value
and insight.

21. #MOTOTYPE
A miniature prototype
Prototype a single novel feature
or interaction to test or present.

22. PAPER TECHNIQUES

23. Strive for simulating true
CONTEXT OF USE

24. Context
Production on-screen Paper on wrist Production on wrist
Less Context More Context Most Context

25. But…but…do I
have to know
programming to
prototype?!

26. YES…NO…AND A LITTLE BIT.

27. PUSH YOUR CAPABILITIES
THE RESOURCES ARE THERE FOR YOU

28. Prototype Fidelity Spectrum

29. Prototype Fidelity Spectrum

30. Production
Software + Hardware

31. Fidelity != Insight

32. Questions?

33. TOOLSIf your only one is a you’ll treat every problem as a

34. Good ol’ Paper
and Pencil!
• Anyone can do it
• Flexible
• Portable
• No barriers to entry
• Not really dynamic

35. • Shareable
• Ubiquitous
• Simulate realistic state
changes
• Minimal animation
• Limited interactions
• Not really dynamic

36. framerjs
• Requires some
light programming
knowledge
• Simple, but
powerful

37. • Very flexible – can
prototype almost
anything
• Collaborative –
team share feature
• Seasoned platform

38. • Powerful
animations and
interactions
• Recently acquired
by Google
• Render direct to
device

39. • Cloud-based
• Very easy to use
• Limited to
smartphones

40. • Cloud-based
• Very easy to use
• Has smart watch
support

41. • Large variety of
boards from IoT to
wearables
• Easy for newbies
• C and C++
• Huge community
• Easy USB plug and play
• Tons of APIs (including
AS3)
• Lots of other boards to
connect to easily connect
to
• Cloud platform
• Tiny form factor
• Has a JavaScript
API
• A lil motherboard!
• Micro SD ports
• USB Ports
• Programmable with
Scratch and Python

42. WHY MUST WE CARRY ALL THIS?!

45. THINK OUTSIDE THE
“RECTANGLE”

46. ACME Electronics is interested in
competing in the Internet of Things
market, and sees particular opportunity
to sell products that improve the
connection between consumers, their
automobiles, and their home; as well as
reduce the number of artifacts
consumers must carry.

47. ACMEE is looking for vendors to think
outside the box and employ a novel
approach to overcoming some of the
risk factors associated with safety,
security, and identity.

48. ACMEE asks that vendors come up
with a prototype that addresses a
single use-case for the idea. The
prototype should demonstrate all
states of the design relevant to the
use-case and should simulate
context of use as closely as possible.

49. Group 1
Create a lo-fi prototype of a mobile
or wearable product that integrates
security between the car and home.

50. Group 2
Create a lo-fi prototype of a mobile
or wearable product that can
identify its users between the car
and home (think personalization).

51. Group 3
Create a lo-fi prototype of a
wearable and/or in-dash product that
improves safety while driving. ACMEE
has had trouble with complex voice
recognition, so use this sparingly.

52. Group 4
Create a mid-to-hi-fi prototype of a
wearable product that improves
security for the car and/or home.

53. PAPER PROTOTYPING
TIPS & TECHNIQUES

54. Cut Out and Slide Thru

55. Stick On and Peel Off

56. Duplicate and Change State

57. Questions?

58. Last Thoughts
• It only took you 2 hours to develop a prototype
• Dive in, don’t worry about the edge cases yet
• Are paper prototypes juvenile? Appropriate to
present to client or stakeholder?
• Don’t reinvent the wheel – not every idea has to be
original

59. Books

60. Thank you! I value
your feedback!
Follow me:
@mattinteractive