How to Prototype Like a
Pro 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 able 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 pl 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

E nter Key note

Design
tool
without
feature
creep

clickable Fast Slow Low fidelity
High fidelity Proto types

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 not opia Largest user
interface library for Keynote Power point! and

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