Design Prototyping
Bringing Wireframes to Life
Dan Harrelson

Please *
@danharrelson
#mix09
#proto
* As if I could stop you...

Introduction
• Design deliverables
• What’s design prototyping?
• Why prototype?
• What makes a good prototype?
• Techniques for prototyping

Design processes
are dynamic
No Product Awesome Product

Design processes
are dynamic

Design processes
are dynamic

Design processes
are dynamic

Competitive Analysis
User Research
Business Strategy Brand Guidelines
Technology
We take in all
Metrics
sorts of input

Users Stakeholders
Developers
Designers
Customers
Partners
We work with lots
of different people
Prospects

We come up with
some dynamic ideas

We output some
pretty static stuff
• Sitemaps
• User flows
• Personas
• Wireframes
• Visual comps

We need something
more dynamic:
Design Protoyping

Prototypes
... allow engineers and
designers the ability to
explore design alternatives,
test theories and
confirm performance
prior to starting
production of a
new product *
*
http://en.wikipedia.org/wiki/Prototyping

easy connected
.NET integrated
fast AIR JSON
performance
slow
Rails
Silverlight
REST
connected
api
Proof of concept
XAML
scalable mashup
hard
secure

Prototypes
... allow engineers and
designers the ability to
explore design alternatives,
test theories and
confirm performance
prior to starting
production of a
new product *
*
http://en.wikipedia.org/wiki/Prototyping

branded hard
easy
complex
static functional
simple
animated
safe personal
competitive friendly
slick
Design prototype
interactive
usable

Why prototype?

Wireframes
aren’t enough

Prototype
goes here

Reduce
documentation

Get internal buy-in*
*money for your concept

Usability test

See how a concept
will Function
Work
Feel

Experiences are
Interactive

Experiences are
Responsive

Experiences have
Emotion*
*Wireframes Don’t

Generate concepts
Validate concepts

What makes a
good prototype?

Interactive

How about an
How Fast?
Fast
afternoon?

http://www.boxesandarrows.com/view/interactive

Disposable
It’s not about the prototype,
it’s about the ideas!

Focused
Don’t prototype: Do prototype:
•Core interactions
•Solved problems
•Important patterns
•Agreed upon solutions
•Risky functionality

Focused
Design
Critical
Prototype
Quick
Wireframe
Complex

Prototyping
techniques

Paper prototyping

Digital prototyping

http://www.boxesandarrows.com/view/quick-and-easy-flash

In conclusion
• Deliverables need to be more dynamic
• Design prototyping can help...
• Good ones are fast, disposable and
focused

Questions?
Comments?
Dan Harrelson
@danharrelson
dan@adaptivepath.co
m

Use promotional code MIX and get 10% off either registration price.
May 11-14, 2009 September 15-18,
April 2-3, 2009 Berlin 2009
San Francisco San Francisco
June 15-18, 2009
San Francisco
http://adaptivepath.com/ November 2-5, 2009 http://uxweek.com/
events/2009/apr
Washington, D.C.
http://adaptivepath.com/even
ts/2009/uxi/