Slide 1
Slide 1 text
Khoi Vinh
May 2, 2019
Understanding the Design Process
through Avengers: Endgame
This is a talk I gave to the team of audio producers at Gimlet Creative to help them better understand how designers
work. Where relevant, supplemental narrative from my talk track appears at the bottom right corner of the slide.
NOTE
Slide 2
Slide 2 text
About me…
Slide 3
Slide 3 text
I work at Adobe as a Principal Designer
Slide 4
Slide 4 text
I lead the design team for Adobe XD, a new
tool for designing app and websites
Slide 5
Slide 5 text
Adobe XD is also the first and only tool that lets you
design with voice for devices like the Amazon Echo
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Formerly, I was design director at NYTimes.com
Slide 8
Slide 8 text
I write a blog about design, technology and culture at Subtraction.com
Slide 9
Slide 9 text
adobe.ly/wireframe
And I’m the host of Wireframe, a podcast that tells in-depth
stories about the world of design
Slide 10
Slide 10 text
First, a story…
Slide 11
Slide 11 text
First, a story called…
“A Talk for Gimlet Creative”
Slide 12
Slide 12 text
First, a story called…
“A Talk for Gimlet Creative?”
Slide 13
Slide 13 text
SECTION NAME
Mon Apr 22
From: Rachel
To: Khoi
Subject: a talk for Gimlet Creative?
Slide 14
Slide 14 text
SECTION NAME
Mon Apr 22
From: Rachel
To: Khoi
Would you be interested/able to give the Gimlet
Creative team an hour of your time to help us
get a little smarter about design?
Slide 15
Slide 15 text
SECTION NAME
Wed Apr 24
From: Khoi
To: Rachel
Hi there, sure, I’d be happy to do this. When did
you have in mind?
Slide 16
Slide 16 text
SECTION NAME
Wed Apr 24
From: Rachel
To: Khoi
Crazy idea - what about a week from Thursday?
Slide 17
Slide 17 text
SECTION NAME
Wed Apr 24
From: Khoi
To: Rachel
Hmm mmmmaybe.
Slide 18
Slide 18 text
So here we are.
Slide 19
Slide 19 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
That left me about eight days to write a new talk…
Slide 20
Slide 20 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
Though of course nothing got done on Wednesday
Slide 21
Slide 21 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
And I was actually traveling so the rest of the week was lost
Slide 22
Slide 22 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
And then, with kids, weekends aren’t really productive either
Slide 23
Slide 23 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
Monday was my first day back in the office, so I didn’t get to work on the talk all day
Slide 24
Slide 24 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
So Tuesday was going to be the day that I got it all done! But then this happened…
Slide 25
Slide 25 text
Confirmation #: 161756482
Auditorium: 5
Reserved Seats: K8, K9
Tickets: 2 Adult
Your Movie: Avengers: Endgame (PG-13)
Showtime: 6:00 PM on Tuesday, April 30, 2019
Slide 26
Slide 26 text
Turns out it’s hard to write a new talk when you’re watching a movie with a three hour running time
© 2019 Marvel
Slide 27
Slide 27 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
Obviously, nothing got done Tuesday
Slide 28
Slide 28 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
So I had to do it all Wednesday, but where to start?
Slide 29
Slide 29 text
Sun Mon Tue Wed Thu Fri Sat
24 25 26 27
28 29 30 1 2
And now here we are on Thursday morning, so I have a proposal for you…
Slide 30
Slide 30 text
Maybe you guys just all want to
talk about Avengers: Endgame?
Slide 31
Slide 31 text
I probably shouldn’t have spent time on this, but somehow I managed to write a review over at Letterboxd
Because I have opinions!
Slide 32
Slide 32 text
Actually…
Slide 33
Slide 33 text
Thinking about Thanos and what
he tries to do in these movies…
Slide 34
Slide 34 text
© 2019 Marvel
Slide 35
Slide 35 text
He’s kind of
a designer!
A terrible one
© 2019 Marvel
Slide 36
Slide 36 text
So let’s talk about
Avengers: Endgame
Slide 37
Slide 37 text
First, there will be
some mild spoilers.
Slide 38
Slide 38 text
Things that happen:
Bad guys try to kill people.
Good guys win.
Slide 39
Slide 39 text
Also, there’s an anthropomorphic raccoon
from space who talks with a Jersey accent.
© 2019 Marvel
Slide 40
Slide 40 text
For those unfamiliar: Thanos sees suffering throughout the
universe and believes it’s caused by overpopulation
Slide 41
Slide 41 text
So he conspires to kill half of all living beings, believing that the remaining lives will flourish
Slide 42
Slide 42 text
This counts as design.
It’s twisted and villainous, but it’s design
Slide 43
Slide 43 text
Wait, so what is design?
Slide 44
Slide 44 text
There are lots of definitions…
But here’s one that will suit us well
Slide 45
Slide 45 text
“Design [is] a plan for
arranging elements to
accomplish a particular
purpose.”
— Charles Eames
Hat tip to @odannyboy
Slide 46
Slide 46 text
Yup. Design.
Cruel and horrific, but it’s design
Slide 47
Slide 47 text
Design and technology
are intrinsically linked.
Slide 48
Slide 48 text
Thanos can’t implement his plan without the technology of the
Infinity Gauntlet and its stones, which do a bunch of magical stuff
Slide 49
Slide 49 text
Design is the application
of technology and human
intention to a problem.
Slide 50
Slide 50 text
Design is the application
of technology and (super)human
intention to a problem.
Slide 51
Slide 51 text
So what is the design process?
There are many different processes, but most of them boil down to these basic steps…
Slide 52
Slide 52 text
1. Define the problem.
Slide 53
Slide 53 text
1. Define the problem.
2. Imagine the possibilities.
Slide 54
Slide 54 text
1. Define the problem.
2. Imagine the possibilities.
3. Test a hypothesis.
Slide 55
Slide 55 text
1. Define the problem.
2. Imagine the possibilities.
3. Test a hypothesis.
4. Repeat.
Slide 56
Slide 56 text
So let’s consider how well Thanos
did following this process…
Slide 57
Slide 57 text
1. Did he define the problem?
2. Did he imagine the possibilities?
3. Did he test a hypothesis?
4. Did he repeat?
So Thanos doesn’t get a passing grade here. But…
Slide 58
Slide 58 text
We can learn from bad
design as much as we can
from good design.
Let’s dig into each step of the process a bit more…
Slide 59
Slide 59 text
1. Define the problem.
Actually, it’s more accurate to think of this as…
Slide 60
Slide 60 text
Redefine the problem.
Slide 61
Slide 61 text
The original problem statement
is almost never the right
expression of that problem.
Slide 62
Slide 62 text
The original problem statement
is almost never the right
expression of that problem.
Example…
Slide 63
Slide 63 text
Problem Statement
There are too many people
competing for too few resources.
Slide 64
Slide 64 text
New Problem Statement
Resource production is insufficient
for the current population
Slide 65
Slide 65 text
Hello, there’s a
power stone
If you think of the problem that way, you might consider using the power stone to solve the universe’s resource needs?
Slide 66
Slide 66 text
Successful designs almost
invariably result from
informed redefinition of the
problem.
Slide 67
Slide 67 text
Redefinition comes from
research.
Slide 68
Slide 68 text
Research means
understanding your user.
Slide 69
Slide 69 text
Research means
understanding your user.
• Who are they?
• What do they want?
• In what context do they want it?
• What challenges do they face?
Slide 70
Slide 70 text
Ways designers research.
Slide 71
Slide 71 text
Ways designers research.
• Make a researcher do it
This is the best way to do it, because researchers are unbiased
and much more effective. But if this is not an option…
Slide 72
Slide 72 text
Ways designers research.
• Make a researcher do it
• Run a survey
• Ask users to keep a log
• Examine data
• Observe firsthand
• Assume the role of the user
Slide 73
Slide 73 text
Ways designers research.
• Make a researcher do it
• Run a survey
• Ask users to keep a log
• Examine data
• Observe firsthand
• Assume the role of the user
This is an important research method but it comes with a caveat…
Slide 74
Slide 74 text
Important note—
You are not your user.
Slide 75
Slide 75 text
2. Imagine the possibilities.
This is the “creative” part, where designers create mockups to express what the
solution might be, (usually) through visual means
Slide 76
Slide 76 text
The hardest thing to
imagine is anything.
Slide 77
Slide 77 text
Designers thrive on
constraints.
Slide 78
Slide 78 text
Constraints are a filter for ideas.
And ideas are the result of a
voracious appetite for inspiration.
Slide 79
Slide 79 text
Inspiration comes from everywhere
Slide 80
Slide 80 text
Every designer’s creative
process is different.
Slide 81
Slide 81 text
Some designers like to sketch
Slide 82
Slide 82 text
Some designers like to start exploring right in their tools
Slide 83
Slide 83 text
Some designers like to explore ideas in code
Slide 84
Slide 84 text
Inspiration can come from any art form
Slide 85
Slide 85 text
And of course there’s a whole industry devoted to helping people be more creative
Slide 86
Slide 86 text
Creative processes are a
balance between time,
quality and resources. Fast
Good Cheap
The old cliché that says you can only ever have two of these three is mostly true
Slide 87
Slide 87 text
The key to successful creativity
is preserving the notion of
possibility.
Slide 88
Slide 88 text
Oftentimes possibilities are
obscured by time, quality and
resources.
Slide 89
Slide 89 text
Oftentimes possibilities are
obscured by time, quality and
resources.
The ability to alway ask Why? is
crucial.
Slide 90
Slide 90 text
Problem Statement
Resource production is insufficient
for the current population
If your creative process is optimized for possibilities, you might consider…
Slide 91
Slide 91 text
Why not use
the reality stone?
Slide 92
Slide 92 text
Critique is an invaluable
tool for designers.
Slide 93
Slide 93 text
Building a strong design team who can engage in constructive discourse about design is essential
Slide 94
Slide 94 text
Collaboration is vital to a
healthy design process.
Slide 95
Slide 95 text
“I design
how it
looks”
Comps and Mockups Prototypes and Multidimensions
Single-user
Collaborative
“We design
how it
works”
Design is no longer a solo endeavor, if it ever was
Slide 96
Slide 96 text
To have good collaboration,
you need good collaborators
Slide 97
Slide 97 text
To have good collaboration,
you need good collaborators
Thanos surrounded himself
with henchmen
© 2019 Marvel
It’s no wonder it went all wrong for him, then
Slide 98
Slide 98 text
3. Test a hypothesis.
Slide 99
Slide 99 text
Few things are more appealing
to a designer than his or her
own idea.
Slide 100
Slide 100 text
Thanos fell in love with the
idea of snapping his fingers
and killing half the universe
But he never validated his idea before he implemented it
Slide 101
Slide 101 text
An untested design is just
one designer’s opinion.
Slide 102
Slide 102 text
An untested design is just
one designer’s opinion.
It must be validated.
Slide 103
Slide 103 text
There is no substitute for a
prototype.
Slide 104
Slide 104 text
Prototypes allow you to get something very close to “real”—without committing to code that you may ultimately want to discard
Slide 105
Slide 105 text
Even cheap prototypes are
invaluable.
Slide 106
Slide 106 text
If a picture is worth a thousand words,
a prototype is worth a thousand meetings.”
“
Slide 107
Slide 107 text
People pay attention
when things move.
This is why prototypes are so effective
Slide 108
Slide 108 text
Thumbnail sketches are a very effective way to start the design process…
Slide 109
Slide 109 text
And a static mockup is even better, but it still can’t show you the intended interactivity in the design
Design by Howard Pinsky • @pinsky. • letsxd.com
Slide 110
Slide 110 text
You could create static comps for all of the different states that you have in mind…
Slide 111
Slide 111 text
But a truly interactive prototype makes the designer’s intention so much more real (click here to view)
Slide 112
Slide 112 text
Creating a prototype
creates clarity.
Slide 113
Slide 113 text
Creating a prototype
creates clarity.
For clients and
stakeholders.
Slide 114
Slide 114 text
Creating a prototype
creates clarity.
For clients and
stakeholders.
And for designers.
Prototypes can help you fall out of love with bad ideas
Slide 115
Slide 115 text
The more quickly an idea
becomes a prototype, the
more quickly ideas become
solutions
Slide 116
Slide 116 text
4. Repeat.
Slide 117
Slide 117 text
Design is inherently iterative.
Slide 118
Slide 118 text
Definition informs possibilities.
Slide 119
Slide 119 text
Definition informs possibilities.
Possibilities inform hypotheses.
Slide 120
Slide 120 text
Definition informs possibilities.
Possibilities inform hypotheses.
Hypotheses inform definition.
Slide 121
Slide 121 text
The “godhead genius”
archetype of design is a myth.
Solutions don’t just magically present themselves to creative savants
Slide 122
Slide 122 text
Design is a process of
progressively bringing a
solution into focus.
Slide 123
Slide 123 text
Design is never really finished.
At some point, it just ships.
Slide 124
Slide 124 text
Alert—the next idea
is a mild spoiler
Slide 125
Slide 125 text
When Thanos implemented
his design, he just assumed he
was done.
© 2019 Marvel
Slide 126
Slide 126 text
For certain kinds of solutions,
design has to keep going.
Slide 127
Slide 127 text
Luckily for Thanos…
Slide 128
Slide 128 text
Luckily for Thanos…
There’s probably going to be a sequel.
© 2019 Marvel
Slide 130
Slide 130 text
@khoi
[email protected]
letterboxd.com/khoi
Thank you.
For listening to me talk
about Avengers: Endgame.