0:00:00.702,0:00:04.871
In my opinion, the single most important idea that you could get out of this class

0:00:04.871,0:00:10.424
is the idea that prototyping is a tremendously valuable strategy for effective design.

0:00:10.424,0:00:15.239
In this video, I’ll introduce what I mean by prototyping and why I think it is so tremendously important.

0:00:15.239,0:00:20.262
This is going to serve as a framing for later videos that we’ll use to introduce concrete techniques.

0:00:21.355,0:00:24.556
In this class, when we talk about prototyping, what we mean is

0:00:24.556,0:00:29.857
rapidly creating an approximation of a design idea so that you can quickly get feedback and learn.

0:00:29.857,0:00:35.241
Prototyping is the pivotal activity in structured innovation, collaboration and creativity in design.

0:00:35.241,0:00:39.020
Prototypes embody design hypotheses and enable designers to get feedback.

0:00:39.020,0:00:42.731
It’s what Donald Schon calls “a reflective conversation with materials”.

0:00:42.731,0:00:48.023
By trying things out and learning — from that exploration — you are able to improve your design

0:00:48.023,0:00:52.144
and be able to gain insights that you otherwise may not have.

0:00:52.144,0:00:57.081
It’s important to remember that the goal in prototyping is not the artefact; it’s feedback:

0:00:57.081,0:01:02.048
Build some prototypes, try them out, and usually you’d learn to try to in the next design.

0:01:02.048,0:01:06.048
One way to think about a prototype is that it’s a question rendered as an artefact.

0:01:06.048,0:01:11.246
It’s something that you make as a way of communicating with other stakeholders:

0:01:11.246,0:01:15.706
These can be clients. These can be other people on your design team.

0:01:15.706,0:01:19.864
These can be users in an interactive system. They can even be yourself.

0:01:19.864,0:01:25.162
And the role of the prototype in this communication is it serves as a common ground

0:01:25.162,0:01:29.715
to help people understand really concretely what everybody is talking about.

0:01:29.731,0:01:33.897
Here’s an example of what I mean by a prototype, courtesy of the design firm IDEO:

0:01:33.897,0:01:41.158
In the mid-90’s, Kodak approached IDEO, asking them to help design an early consumer digital camera.

0:01:41.158,0:01:44.190
Digital cameras were a very interesting technology,

0:01:44.190,0:01:49.623
because they offered new opportunities for being able to review and edit your photos on the camera

0:01:49.623,0:01:51.658
that wasn’t possible with the film camera.

0:01:51.658,0:01:57.251
IDEO was tasked with a way to make sense of possible interactions that you could do on a digital camera

0:01:57.251,0:02:01.146
and to render those on a concrete user interface.

0:02:01.146,0:02:06.684
What they came up with ultimately became this: the Kodak DC-210 digital camera.

0:02:06.684,0:02:09.265
Here’s the user interface on the back:

0:02:09.265,0:02:13.344
There’s a screen and several buttons for being able to naigate through the photographs.

0:02:13.344,0:02:18.953
It also has a dial here for several modes, and a zoom controller right here.

0:02:18.953,0:02:21.574
Now let’s look at the prototype on the screen:

0:02:21.574,0:02:25.140
You’ll probably notice some similarities but also some differences.

0:02:25.140,0:02:29.684
The prototype on the screen and the final product both have buttons.

0:02:29.684,0:02:34.187
They have a screen. They are of similar functionalities in this case.

0:02:34.187,0:02:39.938
However, there’re also some important differences between this prototype and this final version.

0:02:39.938,0:02:41.888
The first one is that the prototype is a lot bigger:

0:02:41.888,0:02:45.978
In order to be able to build a version quickly, they couldn’t make everything miniturized.

0:02:45.978,0:02:51.503
So it takes more a lot more physical space; the layout is similar but the scale has changed.

0:02:51.503,0:02:56.513
Second, one of the most important things about a digital camera is that you be able to take it with you as it is mobile;

0:02:57.682,0:03:01.431
This prototype camera here had an umbilical cord going back to a Macintosh

0:03:01.431,0:03:04.578
that actually ran all of the computations and interactions,

0:03:04.593,0:03:07.737
so there were no computation on the device itself.

0:03:07.737,0:03:12.629
And finally, this was a prototype of a digital camera where you couldn’t take pictures.

0:03:12.629,0:03:16.477
There’s no lens; there’s no photographic elements in this prototype;

0:03:16.477,0:03:23.034
it’s purely a way to understand better the back of camera interactions for reviewing and editing photos.

0:03:23.034,0:03:26.008
And I think this is a really important point about prototypes:

0:03:26.008,0:03:31.714
It’s that prototypes nearly always are and ought to be incomplete.

0:03:32.822,0:03:35.048
To pop back up from that example:

0:03:35.048,0:03:40.123
Prototyping is a strategy for efficiently dealing with things that are hard to predict.

0:03:40.123,0:03:43.145
And these hard-to-predict things are both

0:03:43.145,0:03:49.072
things that you wonder whether there’ll be an issue but don’t know what the answers’s going to be — your “known unknowns —

0:03:49.072,0:03:54.866
and the things that you don’t know, that you never got to think about — those are your “unknown unknowns”.

0:03:54.866,0:03:58.828
And what’s valuable about prototyping is it helps you to get feedback quickly,

0:03:58.828,0:04:01.846
so you don’t spend time heading down the wrong path.

0:04:01.846,0:04:06.898
If you’ve ever taken an art class, you’ll know the experience of sketching before you make a painting.

0:04:06.898,0:04:09.935
It’s not just for novices: Picasso did the same thing.

0:04:09.935,0:04:14.655
One of the things that we know about human psychology is that

0:04:14.655,0:04:18.308
people are notoriously bad at being able to estimate the space of possible outcomes.

0:04:18.308,0:04:22.571
We often consider far fewer options than are actually likely to happen.

0:04:22.571,0:04:26.595
And this is just as true in the financial world as it is in the creative world.

0:04:26.595,0:04:32.364
For any complex system, whether it is finance or design, the interactions of all these ingredients

0:04:32.364,0:04:38.379
far dominate the things that you can easily predict, and consequently our intuitions are often wrong.

0:04:38.949,0:04:42.414
The strategy that we are going to teach you in this class is to encourage you to focus on

0:04:42.414,0:04:47.390
the goals of the design rather than to think about a particular design itself

0:04:47.390,0:04:50.904
and trying to railroad that strategy forward.

0:04:50.904,0:04:54.243
A classic novice error is to come up with one idea for a design:

0:04:54.243,0:04:59.531
You think you’ve got something that’s super cool and just keep arguing for that particular option.

0:04:59.531,0:05:02.801
Instead of having that concrete thing you want to argue for,

0:05:02.801,0:05:07.508
think about what you hope to achieve with that design idea — what’s your goal there.

0:05:08.385,0:05:14.637
In this class we’re going to teach how to set goals early and evolve them and revise your design using data.

0:05:14.637,0:05:19.112
As Bill Buxton points out in his excellent book « Sketching User Interfaces »,

0:05:19.112,0:05:23.287
the kinds of alternatives that you’re going to consider at different points of the design process

0:05:23.287,0:05:25.151
are going to be different.

0:05:25.151,0:05:30.006
Early on, you may be thinking about a really broad range of possibilities.

0:05:30.713,0:05:33.772
And then you might narrow in for a little while.

0:05:33.772,0:05:36.606
Then you might consider some alternatives and narrow in.

0:05:36.606,0:05:41.991
And this alternating flair and focus is a hallmark of an effective design process.

0:05:41.991,0:05:45.492
Later on in the design, as you get toward the final product,

0:05:45.492,0:05:51.141
you’re going to be thinking about small variations like fonts or colours or micro changes in layout.

0:05:51.141,0:05:54.530
Early on you might be thinking about much broader ideas like:

0:05:54.530,0:05:57.822
Is this going to be a mobile service or a desktop service?

0:05:57.822,0:06:01.168
And what kind of thing is this going to be anyhow?

0:06:01.168,0:06:08.140
Recognizing the need for and value of this oscillation can help you prepare for an effective design process.

0:06:08.140,0:06:13.351
The Palm Pilot’s design process provides us with a wonderful example of prototyping.

0:06:13.351,0:06:18.714
The Palm Pilot was one of the first digital PDA’s — personal digital assistants —

0:06:18.714,0:06:24.044
and it helped you handle your to-do lists, and calendar, and contact information and notes.

0:06:25.137,0:06:30.564
Its lead inventor was Jeff Hawkins; and Jeff, when he first envisioned the Palm Pilot,

0:06:30.564,0:06:37.111
one of the first things that he did was create a block of wood that was the size of the device that he envisioned.

0:06:37.111,0:06:42.678
And what he would do is carry this block of wood around with him and he would use it as if it were a real device:

0:06:42.678,0:06:48.470
So he would tap on it and enter information, add contacts, record things in his calendar,

0:06:48.470,0:06:53.222
take notes, furiously scribbling the whole time.

0:06:53.222,0:06:56.584
So what did Jeff and his team learn from this prototype?

0:06:56.584,0:07:01.870
Well, they obviously didn’t learn anything about the silicone or the battery life or anything of the Palm Pilot

0:07:01.870,0:07:04.038
because the whole thing was made out of wood!

0:07:04.038,0:07:08.113
What they learned was about the form factor, and what we can see here

0:07:08.113,0:07:14.194
is that this was a great example of the rights and roles that a prototype can play in the design process.

0:07:14.194,0:07:20.106
A prototype should not be required to be complete; it’s going to be incomplete in strategic and important ways.

0:07:20.506,0:07:26.266
It should be easy to change — Don’t like the size of your Palm Pilot? Just cut it off a different size!

0:07:26.866,0:07:28.682
And finally, it should get to retire:

0:07:28.682,0:07:34.708
That, when you move on to a later phase in the design process, you no longer need the early prototypes.

0:07:35.324,0:07:39.807
Given that we are in a class about designing computer systems and we’re talking about a block of wood,

0:07:39.807,0:07:46.288
you might reasonably ask, “What’s going on here?” or maybe, “What is it that prototypes prototype?”

0:07:46.288,0:07:50.525
And the answer is that there are several things that a prototype can prototype.

0:07:50.525,0:07:56.268
One kind of prototype prototypes the feel — “What does this look like?”

0:07:56.268,0:08:01.397
Another kind prototypes the implementation — “What might this work like?”

0:08:01.397,0:08:05.016
And yet another kind of prototype prototypes the role —

0:08:05.016,0:08:08.635
“What might the experience of using this interactive system be like?”

0:08:08.635,0:08:12.966
This course will teach you a number of strategies that cover a bit of each of these categories.

0:08:12.966,0:08:15.604
You can plot a prototype in two dimensions.

0:08:15.604,0:08:18.645
You can think about how much you’ll learn from that prototype,

0:08:18.645,0:08:21.388
and you can think about how long it took you to create it.

0:08:21.388,0:08:24.466
And what you want to able to do, especially early on in the design process,

0:08:24.466,0:08:28.638
is to be able to maximize the amount of learning that you are being able to get from that prototype,

0:08:28.638,0:08:31.719
and minimize the amount of time that it is going to take you to create it,

0:08:32.380,0:08:35.665
because — remember — a prototype is going to be incomplete,

0:08:35.665,0:08:39.488
and it’s going to be something that you are going to get rid of most likely at some point in the process,

0:08:39.488,0:08:44.240
and so there’s no point in sinking a lot of time into something that you’re soon going to throw away.

0:08:45.886,0:08:50.473
Prototyping is not just for small things. In your prototyping you can think big — really big.

0:08:50.473,0:08:54.155
Here’s an example from Walter Dorwin Teague, this guy right here.

0:08:54.770,0:08:58.340
He is one of America’s foremost industrial designers.

0:08:58.340,0:09:03.371
And he is standing inside of one of the very first Boeing cross-country airplanes.

0:09:03.371,0:09:09.597
And what he’s doing is taking a look at the interior design that his company did for Boeing,

0:09:09.597,0:09:12.910
(and they still work with Boeing to this day).

0:09:12.910,0:09:17.747
What’s notable here is that you’ve got an interior of an aircraft, but there’s no aircraft!

0:09:17.747,0:09:25.172
This is all mocked up in a warehouse. It’s the experience of an airplane without the airplane.

0:09:25.172,0:09:30.878
In creating this prototype, they brought in a number of users, and had people come on with luggage

0:09:30.878,0:09:36.898
and try out the experience of the airplane, where they would sit down, take their seats for the length

0:09:36.898,0:09:42.127
of a cross-country flight, and flight attendants would come through to offer them food and other amenities,

0:09:42.127,0:09:45.159
and you could see things like “Are the aisles wide enough?”,

0:09:45.159,0:09:50.669
“Are the seats comfortable?”, “Will the luggage racks carry the luggage that’s necessary?”

0:09:50.669,0:09:55.423
Walter Teague wasn’t the only industrial designer to be able to use these large prototypes of scale.

0:09:55.423,0:10:00.793
Many of the designers creating ocean-going vessels tried the same strategy

0:10:00.793,0:10:07.613
of prototyping interiors in warehouses, and in fact as Walter Isaacson’s biography of Steve Jobs reports,

0:10:07.613,0:10:13.345
when Apple was creating its first retail stores, they got some warehouse space outside of San Jose,

0:10:13.345,0:10:19.909
and every week went to a fake retail store to try out the retail experience in advance of first opening,

0:10:19.909,0:10:25.672
and one of the things that that biography reports about the retail experience at Apple was,

0:10:25.672,0:10:32.028
by the virtue of prototyping it and trying out different configurations of the store, the Apple team realized

0:10:32.028,0:10:39.290
that the stores can be configured around activities — such as music — rather than around individual products,

0:10:39.290,0:10:43.823
and this significantly changed the layout of the Apple Stores prior to their opening.

0:10:44.700,0:10:48.679
Linus Pauling may be the premier chemist in the 20th century.

0:10:48.679,0:10:53.138
He was awarded the Nobel Prize for his work on describing the nature of chemical bonds.

0:10:53.138,0:10:56.900
What his work philosophy shares with that of professional designers

0:10:56.900,0:11:02.714
is the practice of trying out multiple alternative ideas, approaches, and solution strategies.

0:11:02.714,0:11:06.808
As he says here, “The best way to have a good idea is to have a lot of ideas.”

0:11:07.223,0:11:12.670
And we see that here in a hundred different prototypes that the design firm IDEO produced for Microsoft

0:11:12.670,0:11:15.495
when it was creating its first mouse.

0:11:15.495,0:11:21.051
There are a number of form alternatives that it explored — symmetric versus assymetric designs,

0:11:21.051,0:11:25.241
ones that emphasize ergonomics versus others that emphasize style —

0:11:25.241,0:11:29.165
and being able to see all of these alternatives and hold them in one’s hand

0:11:29.165,0:11:33.852
helped Microsoft figure out which design was the best fit for it to release the mouse with.

0:11:34.498,0:11:39.910
For the geeks in the audience: You can think about this kind of rapid prototyping strategy that we’re talking about

0:11:39.910,0:11:45.185
as being kind of like simulated annealing, where you have a space of possible options,

0:11:48.078,0:11:53.687
some of them better than the others, and what often happens with serial iterative deisgn

0:11:53.687,0:11:56.802
is that you can hillclimb to the best one.

0:11:56.802,0:11:58.906
But local improvement isn’t enough:

0:11:58.906,0:12:04.384
You need to be able to hop around the design space and try wildly different alternatives.

0:12:04.384,0:12:07.323
That way you can find the global maximum.

0:12:07.323,0:12:12.546
When you’re creating a prototyping strategy, it’s important to think about the cost of change over time.

0:12:12.546,0:12:18.816
For physical products —— like a car, a toaster —, the cost of making changes rises dramatically over time

0:12:18.816,0:12:23.393
throughout the design process, and even more significantly upon release.

0:12:24.655,0:12:30.317
With desktop software that gets distributed on, say, a CDROM, the cost rises aren’t quite so dramatic,

0:12:30.317,0:12:35.654
but it’s still pretty significant, harder to make changes as you go throughout the design process,

0:12:35.654,0:12:39.091
and much more difficult once you’ve shipped it out to consumers.

0:12:41.798,0:12:47.328
Web sites, and other forms of software as a service, make it much easier to make changes over time.

0:12:49.913,0:12:55.269
But the costs and difficulty of making changes is still increasing for a number of reasons.

0:12:55.269,0:13:00.631
One of the most important is that people get used to a particular piece of software over time.

0:13:00.631,0:13:05.724
And so even if you could change it easily, you’d upset and confuse a significant user base.

0:13:05.724,0:13:11.724
The same is true for developers [of] any software that has API’s that people are writing applications on top of.

0:13:11.724,0:13:16.665
Once people get used to it, or have built things that rely on a piece of software,

0:13:16.665,0:13:19.190
it becomes more difficult to change.

0:13:19.190,0:13:22.507
Altogether, what this means is that you want to create a design process

0:13:22.507,0:13:25.431
where you’re making your biggest changes early,

0:13:27.431,0:13:31.411
and as you build momentum with users, you’re continuing to refine,

0:13:31.411,0:13:34.777
and adapt, and tweak, and improve your system as it goes on.

0:13:36.792,0:13:41.071
I think I can sum up the introductory message of this framing video in one sentence:

0:13:41.071,0:13:47.186
It’s that “prototypes are questions; ask lots of them.”

0:13:47.186,0:13:50.555
We’ll see you next time.