Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Introduction to prototyping for user interface design, including how prototyping fits into an overall design thinking process.

Presented at University of Iowa's Dev/Iowa Bootcamp, June 2014 (

Recommended reading:

Published in: Design, Technology
  • Be the first to comment


  1. 1. prototyping ! David Sturtz twitter: @sturtz
  2. 2. [Explaining prototyping to a five-year-old.]
  3. 3. Frozen storyboard image. (Walt Disney Pictures) via NPR
  4. 4. Prototypes tell a story.
  5. 5. We prototype to think.
  6. 6. We prototype to learn.
  7. 7. We prototype to decide.
  8. 8. Design Thinking “a human-centered, creative, iterative, 
 and practical approach to finding the best ideas and ultimate solutions.” 
 — Tim Brown, IDEO
  9. 9. Empathize Observe Engage Immerse
  10. 10. INTERVIEWS + ETHNOGRAPHY Tools Telephone Skype / Video Chat Web conferencing/screen sharing applications Digital photos Blogs, notebooks, diaries ! empathize What is it? An open-ended conversation with users about your area of interest. ! Why do it? The best bang-for-your-buck as a first step in getting to know your users. Allow these conversations to snowball using affinity diagramming and mental models. ! Pay attention to tasks and goals.
  11. 11. EMPATHY MAP empathize
  12. 12. PARTICIPATORY DESIGN Tools Paper, scissors, glue YUI Design Stencils Other images empathize What is it? A tangible representation of a system ! Why do it? Fun for everyone. Allows participants to express needs in a different format. We’re not interested in the actual prototypes as much as the conversations about the reasons behind them.
  13. 13. PARTICIPATORY DESIGN empathize
  14. 14. PARTICIPATORY DESIGN empathize
  15. 15. Define [USER] needs to [USER’s NEED] 
 because [SURPRISING INSIGHT]. Analogy Design Principles
  16. 16. Ideate 1. Defer judgment 2. Encourage wild ideas 3. Build on the ideas of others 4. Stay focused on the topic 6. Be visual 7. Go for quantity
  17. 17. Prototype If a picture is worth a thousand words, 
 a prototype is worth a thousand pictures.
  18. 18. “Prototypes should only command as much time, effort, and investment as are needed to generate useful feedback and evolve an idea.”
 — Tim Brown, IDEO
  19. 19. SKETCHBOARDS getting organized
  20. 20. USER FLOWS prototyping
  21. 21. CUSTOMER JOURNEY MAPS prototyping
  22. 22. STORYBOARDS / COMICS prototyping
  23. 23. PAPER PROTOTYPES prototyping
  24. 24. WIZARD OF OZ prototyping
  25. 25. PAPER + POWERPOINT prototyping
  26. 26. BALSAMIQ MOCKUPS prototyping Balsamiq Mockups
  27. 27. AXURE prototyping Axure RP
  28. 28. HTML / BOOTSTRAP / ETC. prototyping ! !
  29. 29. WEB-BASED TOOLS Tools Mockflow ProtoShare HotGloo FluidUI InvisionApp ... etc. prototyping
  30. 30. ADOBE EDGE REFLOW prototyping
  31. 31. PATTERN LIBRARIES prototyping
  32. 32. Recommended… Design Thinking ! Customer Journey Mapping ! Comics ! Design Pattern Libraries !
  33. 33. Recommended…
  34. 34. prototyping ! David Sturtz twitter: @sturtz
  35. 35. Photo Credits "Shaping" by Becky Wetherington "Tea Anyone?" by Manish Bansal "Lauri at the Wheel" by kellinahandbasket 2183799236 "Trimmed Bowls" by Martin Cathrae