design prototyping: bringing wireframes to life

Design PrototypingBringing Wireframes to Life

Dan Harrelson

Please *

* As if I could stop you...

@danharrelson#mix09#proto

Introduction

•Design deliverables

•What’s design prototyping?

•Why prototype?

•What makes a good prototype?

•Techniques for prototyping

No Product Awesome Product

Design processes are dynamic

Design processes are dynamic

Design processes are dynamic

Design processes are dynamic

We take in all sorts of input

Competitive AnalysisUser Research

Brand Guidelines

Metrics

Technology

Business Strategy

We work with lots of different people

Stakeholders

Prospects

CustomersDesigners

Developers

Partners

Users

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

* http://en.wikipedia.org/wiki/Prototyping

Prototypes... allow engineers and designers the ability to

explore design alternatives, test theories and

confirm performance prior to starting production of a new product *

Proof of concept

secure

scalable

connected

connected integrated

Rails

.NET

mashuphard

easy

REST

JSON

Silverlight

AIR

slow

fast

api

performance

XAML

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

Prototypes

Design prototype

animated

usable

slick

branded

friendly

hardeasy

competitivepersonalsafe

functionalcomplex

simplestatic

interactive

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

See how a concept will Function

FeelWorkWork

Experiences are Interactive

Experiences are Responsive

Experiences have Emotion*

*Wireframes Don’t

Generate conceptsValidate concepts

What makes a good prototype?

Interactive

FastHow Fast?How about an

afternoon?

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

DisposableDisposable

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

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

Do prototype:

•Core interactions•Important patterns•Risky functionality

Don’t prototype:

•Solved problems•Agreed upon solutions

Focused

Focused

Complex

Cri

tica

l DesignPrototype

QuickWireframe

Prototypingtechniques

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

Thanks!

Questions?Comments?

Dan Harrelson@danharrelsondan@adaptivepath.com

September 15-18, 2009San Francisco

http://uxweek.com/

Use promotional code MIX and get 10% off either registration price.

April 2-3, 2009San Francisco

http://adaptivepath.com/events/2009/apr

May 11-14, 2009Berlin

June 15-18, 2009San Francisco

November 2-5, 2009Washington, D.C.

http://adaptivepath.com/events/2009/uxi/