Prototype

Like a Pro

Original iPod Prototype

How to

A prototype is worth a thousand pictures

A picture is worth a thousand

words

What's a prototype?

Early versionof an idea

Testable

Early versionof an idea

This is nota prototype

This is nota prototype

This is

Why Prototype?

To answer questions

and generate new ones

Validate yourassumptions

compare alternatives

Fail early

and cheapl

y

To Visualize your ideas

and share them with others

To Visualize your ideas

Teaminvestors clients

users

and share them with others

To Visualize your ideas

So youFake it

till youmake it

What makes a good

Prototype?

QuickYou can create multiple

versions fastand iterate even faster!

CheapYou wouldn't mind

throwing it away and starting all over again

MinimalContains onlycore features

Pictures ChatFavorites Check-in

TestableYou can put it in front of

people and have them try it out(instead of just telling them about it)

MeasurableYou 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?

1Plan

Define stories, and identify tasks

Create a user flow diagram

Sketch rough interface screens

Photo courtesy of StevenVanwel on Flickr

2BuildPhoto courtesy of Mr. T in DC on Flickr

Design main screens

Login screen

Main screen

Create UI states

Profile pop-up

Update Status

highlight update

Add user interaction

3Test

Test several prototypesTo get objective feedback

Decide what to measureTo get accurate feedback

Choose the right usersTo get relevant feedback

Ask them to think aloudTo get constant feedback

Interview them at the end

To get even more feedback

4Refine

Discuss results with your team

Integrate findings

Test againwith users

5Share

Have your team play with the prototype, instead of writing long specification documents

Enter Keynote

Design tool

without feature creep

SlowLow fidelity High fidelity

Fastclickable

Prototypes

BasicshapesThe ones you need, without the

distraction of the ones you don't need

AlignmentandSnapping

Visualstyles

K L

K L

Copy Style

Quickly share styles across shapes

Master slides

- Less copy/paste

- Update multiple pages with a single change

HyperlinksAdd user interaction without writing code

Slide Transitions

Export

Hyperlinks are preserved!

Test on DeviceWithout doing any extra work

Works with Adobe suite

CopyPaste

And it costs less than $25

The whole iWork suite costs less than most mock-up and prototyping tools

Keynotopia

Largest user interface library for Keynote

and Powerpoint!

To design interfaces and test prototypes

in hours instead of days

Fast

low fidelity

Slow

high fidelityFinally!

Papersketches

MockupsWireframes

CompsHTML /JS /

Flash

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!

Because it saves time and money!

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

Get it at Keynotopia

$9 save you 9 hours