Iterative Prototyping

Iterative Prototyping2114.409: Creative Research Practice

HTTP://WWW.FLICKR.COM/PHOTOS/ROSENFELDMEDIA/3978305312/

This presentation borrows heavily from Shen Zhao, Richard Davis, Scott Klemmer with permission

Creative Research Practice

• Write a dissertation

• Build a company

• Start a movement

Methodology to: Our version:

• Data-centric

• Emphasize feedback

• Emphasize skills/recipes

Observa(on+&+Brainstorming+

Itera(ve+Prototyping+

Evalua(on+&+Analysis+ Publica(on+

HTTP://WWW.FLICKR.COM/PHOTOS/CYBERSLAYER/952953634/Goal

Where are we going?

How do we get there?

If we always turn right, we’ll eventually reach our goal Is there a right-hand

rule for design?

HTTP://WWW.FLICKR.COM/PHOTOS/DHAMMZA/195319646/

Two Core Principles

divergence -convergence

K

K

iteration

A

A

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

Demo/Pitch

Design Critique

Cognitive Walkthrough

Heuristic Evaluation

Controlled Experiment

Survey

Analytics

synthesis feedback

prototype

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

Concrete

Iterative PrototypingStart

Concierge

HighFidelity

Adapted from Scott Klemmer (CS147, Fall 2010)

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge Today’sFocus

Adapted from Scott Klemmer (CS147, Fall 2010)

Actors

Setting

Goals

Actions

“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 the professor starts the lecture, he starts the note-taking application on his phone. The application automatically notes the current date, time and class. During the class he can press one of two buttons - to start recording audio or to take a picture. After recording, the application allows him to tag the recording with keywords. Later, when he is home, he 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.”

Scenario

Storyboard VideoTextSource: Richard Davis

Workshop

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

Interface Sketch WorkshopSquare corners

Grid/templates

Good pen

Limited detail

Multicolor ink

Visual hierarchy

Annotations

HTTP://WWW.FLICKR.COM/PHOTOS/JOLLY_SONALI/5790735754/

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

Concierge

HTTP://WWW.FLICKR.COM/PHOTOS/ROSEFIRERISING/456689214/

Workshop

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

PaperPrototype

HTTP://WWW.FLICKR.COM/PHOTOS/NASHIH/5487801683/

Why might we prefer alow-fidelity representation?

HTTP://WWW.FLICKR.COM/PHOTOS/PINTIPINTIPINTI/3510465346/

Photorealistic RenderingRough Sketch

HTTP://WWW.FLICKR.COM/PHOTOS/PG/4028986155/

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

Wizard of Oz

Adapted from Scott Klemmer (CS147, Fall 2010)

Scenario

Sketch Wireframe Mockup

PaperPrototype

Wizard ofOz

Various Functional Prototypes

Storyboard Video

HighFidelity

Concrete

Iterative PrototypingStart

Concierge

Adapted from Scott Klemmer (CS147, Fall 2010)

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

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

More Administrative

Send me a one paragraph project abstract that makes your project sound exciting.

Mentors Homework

This weekend door closes for HW2/HW3 revisions.

Feedback

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