See how "design prototyping" differs from other techniques, and learn how to determine when a prototype is needed. Understand how to tailor your prototype to a particular audience, gather techniques for bringing paper sketches to life, and how interactive sketching can fit in an Agile process.

1. Design Prototyping
Bringing Wireframes to Life
Dan Harrelson

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

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

5. Design processes
are dynamic
No Product Awesome Product

6. Design processes
are dynamic

7. Design processes
are dynamic

8. Design processes
are dynamic

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

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

11. We come up with
some dynamic ideas

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

14. We need something
more dynamic:
Design Protoyping

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

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

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

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

20. Why prototype?

21. Wireframes
aren’t enough

26. Prototype
goes here

27. Reduce
documentation

29. Get internal buy-in*
*money for your concept

30. Usability test

31. See how a concept
will Function
Work
Feel

32. Experiences are
Interactive

33. Experiences are
Responsive

34. Experiences have
Emotion*
*Wireframes Don’t

35. Generate concepts
Validate concepts

36. What makes a
good prototype?

37. Interactive

38. How about an
How Fast?
Fast
afternoon?

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

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

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

42. Focused
Design
Critical
Prototype
Quick
Wireframe
Complex

43. Prototyping
techniques

44. Paper prototyping

45. Digital prototyping

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

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

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

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