1.
LEONARDO DA VINCI
Artist
Engineer
Inventor
Philosopher
UX Designer

2.
INTRODUCTIONS

3.
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 /

4.
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/

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

6.
PROTOTYPING
IS THE MATERIALZATION
OF A DESIGN CONCEPT

7.
PROTOTYPING
IS ABOUT SIMULATING
SENSORY INPUT + OUTPUT

8.
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?

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

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

11.
PROTOTYPING
SHOULD BE
RAPID +
ITERATIVE

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

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

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

15.
PAPER TECHNIQUES

16.
Strive for simulating true
CONTEXT OF USE

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

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

19.
YES…NO…AND A LITTLE BIT.

20.
PUSH YOUR CAPABILITIES
THE RESOURCES ARE THERE FOR YOU

21.
Prototype Fidelity Spectrum

22.
Prototype Fidelity Spectrum

23.
Production
Software + Hardware

24.
Fidelity != Insight

25.
Questions?

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

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

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

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

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

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

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

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

34.
• 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

35.
WHY MUST WE CARRY ALL THIS?!

36.
THINK OUTSIDE THE
“RECTANGLE”

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

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

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

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

41.
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).

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

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

44.
PAPER PROTOTYPING
TIPS & TECHNIQUES

45.
Cut Out and Slide Thru

46.
Stick On and Peel Off

47.
Duplicate and Change State

48.
Questions?

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

50.
Books

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