This document discusses iterative prototyping as a methodology for creative research and design. It involves cycles of observation and brainstorming, iterative prototyping, evaluation and analysis, and publication. Prototypes start simply as scenarios, sketches, or paper prototypes and evolve into higher fidelity prototypes. Feedback is incorporated at each stage to diverge and converge on ideas. The core principles are divergence through prototyping variations and convergence through iterative refinement informed by evaluation. Examples of prototyping techniques illustrated include scenarios, storyboards, sketches, wireframes, paper prototyping, and functional "Wizard of Oz" prototypes.

1. Iterative Prototyping
2114.409: Creative Research Practice
This presentation borrows heavily from Shen Zhao,
Richard Davis, Scott Klemmer with permission
HTTP://WWW.FLICKR.COM/PHOTOS/ROSENFELDMEDIA/3978305312/

2. Creative Research Practice
Observa(on+&+ Itera(ve+ Evalua(on+&+
Publica(on+
Brainstorming+ Prototyping+ Analysis+
Methodology to: Our version:
• Write a dissertation • Data-centric
• Build a company • Emphasize feedback
• Start a movement • Emphasize skills/recipes

3. HTTP://WWW.FLICKR.COM/PHOTOS/CYBERSLAYER/952953634/
Goal
Where are we going?
How do we get there?

4. HTTP://WWW.FLICKR.COM/PHOTOS/DHAMMZA/195319646/
If we always turn right, we’ll
eventually reach our goal
Is there a right-hand
rule for design?

5. Two Core Principles
K A
divergence - iteration
convergence
K A

6. Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

7. Demo/Pitch
prototype
Design Critique
Cognitive Walkthrough
synthesis feedback Heuristic Evaluation
Controlled Experiment
Survey
Analytics

8. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

9. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

10. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of Today’s
Concierge
Prototype Oz Focus
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

11. Scenario Workshop
“John wants to take notes while in class. Even though
the slides will be posted online later, he wants to make
sure he captures the most important points. Before
Actors the professor starts the lecture, he starts the note-
taking application on his phone. The application
automatically notes the current date, time and class.
Setting
During the class he can press one of two buttons - to
start recording audio or to take a picture. After
Goals recording, the application allows him to tag the
recording with keywords. Later, when he is home, he
Actions can review his notes, synchronized with the
powerpoint slides downloaded from the course web
site. He can search by keyword, follow the lecture
linearly, or speed up in time.”
Text Storyboard Video
Source: Richard Davis

12. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

13. Interface Sketch Workshop
Square corners
Annotations
Good pen
Grid/templates
Limited detail
Visual hierarchy
Multicolor ink
HTTP://WWW.FLICKR.COM/PHOTOS/JOLLY_SONALI/5790735754/

14. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

15. Concierge Workshop
HTTP://WWW.FLICKR.COM/PHOTOS/ROSEFIRERISING/456689214/

16. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

17. Paper
Prototype
HTTP://WWW.FLICKR.COM/PHOTOS/NASHIH/5487801683/

18. Rough Sketch Photorealistic Rendering
Why might we prefer a
low-fidelity representation?
HTTP://WWW.FLICKR.COM/PHOTOS/PINTIPINTIPINTI/3510465346/ HTTP://WWW.FLICKR.COM/PHOTOS/PG/4028986155/

19. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

20. Wizard of Oz
Adapted from Scott Klemmer (CS147, Fall 2010)

21. Iterative Prototyping
Start
High
Fidelity
Scenario Storyboard Video
Sketch Wireframe Mockup
Paper Wizard of
Concierge
Prototype Oz
Various Functional Prototypes
Concrete
Adapted from Scott Klemmer (CS147, Fall 2010)

22. What to prototype?
Riskiest thing - “test your assumptions”
Core mechanic - “build something juicy”
Something uncomfortable - “rip off the band-aid”
Something comfortable - “start somewhere and tinker”
It depends... but always start with a question

23. Homework
1. Design a prototyping plan for this
week. Post by Monday noon for
feedback.
2. Include at least one paper
prototyping exercise.
3. Every team member should run at
least two subjects through the paper
prototype.
4. Document your work and findings
on your project blog.
HTTP://WWW.FLICKR.COM/PHOTOS/21218849@N03/3901512129/

24. More Administrative
Mentors Homework
Send me a one paragraph This weekend door closes
project abstract that for HW2/HW3 revisions.
makes your project sound
exciting.

25. Feedback
HTTP://WWW.FLICKR.COM/PHOTOS/LEEKSANDBOUNDS/845804752/