How to

Prototype
L i k e a P ro

Original iPod Prototype

 A picture
is worth a
thousand
words
A prototype
is worth a
thousand
pictures
 What's a
prototype?
Early version
of an idea
Test a b l e

Early version
of an idea
This is not
a prototype
This is not
a prototype
This is
Why Prototype?
To answer
questions

and generate new ones

Validate your
assumptions
 compare
alternatives
Fail
early d
an y
ea p l
ch
To Visualize
your ideas
To Visualize
your ideas
and share them
with others
 To Visualize
your ideas
and share them
with others
Team users
investors clients
So you till you
Fake it make it
What makes
a good
Prototype?
 Quick
You can create multiple
versions fast
and iterate even faster!
 Cheap
You wouldn't mind
throwing it away and
starting all over again
 Favorites Check-in
Chat
Pictures

Minimal
Contains only
core features
 Testable
You can put it in front of
people and have them try it out
(instead of just telling them about it)
Measurable
You can get the
numbers behind what's
working and what's not.
And hopefully fun to
create and use
How to create
a great
Prototype?
1
Plan
 Define stories,
and identify tasks
Create a user
flow diagram
 Sketch rough
interface screens

Photo courtesy of StevenVanwel on Flickr

2
Build
Photo courtesy of Mr. T in DC on Flickr
 Main screen

Login screen

Design main screens

Create UI states
Update Status

Profile pop-up highlight update

Add user interaction
3
Test
Test several
prototypes
To get objective feedback
Decide what
to measure
To get accurate feedback
Choose the
right users
To get relevant feedback
Ask them to
think aloud
To get constant feedback
Interview them
at the end
To get even more feedback
4
Refine
Discuss results
with your team
Integrate findings
Test again
with users
5
Share
Have your
team play
with the
prototype,
instead of
writing long
specification
documents
 n t e r K ey no t e
E
Design
tool
without
feature
creep
 clickable
Fast Slow
Low fidelity High fidelity

Proto ty p e s
 Basic
shapes
The ones you need, without the
distraction of the ones you don't need
Alignment
and
Snapping
 Copy Style

Visual K L

styles K L

Quickly share styles across shapes

Master
slides
- Less copy/paste

- Update multiple pages

with a single change
Hyperlinks
Add user interaction without writing code
 Slide
Transitions
Export
Hyperlinks are preserved!
Test on
Device
Without doing any extra work
Works with
Adobe suite
Copy
Paste
And it costs
less than $25
The whole iWork
suite costs less
than most mock-up
and prototyping tools
 Key n o t o p i a
Largest user interface
library for Keynote
p o i n t!
and Power
 To design
interfaces and
test prototypes
in hours
instead of days
 Paper
sketches Wireframes HTML /JS /
Flash
Mockups Comps

Fast Slow
low fidelity Finally! high fidelity
Hundreds of
UI building
blocks for...
iPad
iPhone
Web/Desktop
Android
BlackBerry
Windows Phone 7
and Facebook
Thousands of companies use it!
And everyone loves it!
I love Keynotopia prototyping templates.
Used them to rapidly develop a fitness app
as part of Phoenix Startup Weekend, and
ended up winning the peoples choice and
best presentation!

-Matt Clower, iOS developer

I work for a major corporation and my

prototype consisted of over 150 slides.
Keynotopia turned 60 days worth of work to
20. The executives loved the presentation and
are contemplating implementing the app.

-Shawn Smith, UX Designer

Because it saves time and money!

$9 save you 9 hours
Get it at Keynotopia