Understanding the Design Process through Avengers: Endgame

For those new to design, this is an overview of the process as seen through the lens of the super-villain Thanos, of course.

Transcript

1. 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
2. About me…
3. I work at Adobe as a Principal Designer
4. I lead the design team for Adobe XD, a new tool for designing app and websites
5. Adobe XD is also the first and only tool that lets you design with voice for devices like the Amazon Echo
7. Formerly, I was design director at NYTimes.com
8. I write a blog about design, technology and culture at Subtraction.com
9. adobe.ly/wireframe And I’m the host of Wireframe, a podcast that tells in-depth stories about the world of design
10. First, a story…
11. First, a story called… “A Talk for Gimlet Creative”
12. First, a story called… “A Talk for Gimlet Creative?”
13. SECTION NAME Mon Apr 22 From: Rachel To: Khoi Subject: a talk for Gimlet Creative?
14. 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?
15. 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?
16. SECTION NAME Wed Apr 24 From: Rachel To: Khoi Crazy idea - what about a week from Thursday?
17. SECTION NAME Wed Apr 24 From: Khoi To: Rachel Hmm mmmmaybe.
18. So here we are.
19. 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…
20. Sun Mon Tue Wed Thu Fri Sat 24 25 26 27 28 29 30 1 2 Though of course nothing got done on Wednesday
21. 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
22. 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
23. 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
24. 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…
25. 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
26. Turns out it’s hard to write a new talk when you’re watching a movie with a three hour running time © 2019 Marvel
27. Sun Mon Tue Wed Thu Fri Sat 24 25 26 27 28 29 30 1 2 Obviously, nothing got done Tuesday
28. 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?
29. 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…
30. Maybe you guys just all want to talk about Avengers: Endgame?
31. I probably shouldn’t have spent time on this, but somehow I managed to write a review over at Letterboxd Because I have opinions!
32. Actually…
33. Thinking about Thanos and what he tries to do in these movies…
34. © 2019 Marvel
35. He’s kind of a designer! A terrible one © 2019 Marvel
36. So let’s talk about 
 Avengers: Endgame
37. First, there will be some mild spoilers.
38. Things that happen: Bad guys try to kill people. Good guys win.
39. Also, there’s an anthropomorphic raccoon from space who talks with a Jersey accent. © 2019 Marvel
40. For those unfamiliar: Thanos sees suffering throughout the universe and believes it’s caused by overpopulation
41. So he conspires to kill half of all living beings, believing that the remaining lives will flourish
42. This counts as design. It’s twisted and villainous, but it’s design
43. Wait, so what is design?
44. There are lots of definitions… But here’s one that will suit us well
45. “Design [is] a plan for arranging elements to accomplish a particular purpose.” — Charles Eames Hat tip to @odannyboy
46. Yup. Design. Cruel and horrific, but it’s design
47. Design and technology are intrinsically linked.
48. Thanos can’t implement his plan without the technology of the Infinity Gauntlet and its stones, which do a bunch of magical stuff
49. Design is the application of technology and human intention to a problem.
50. Design is the application of technology and (super)human intention to a problem.
51. So what is the design process? There are many different processes, but most of them boil down to these basic steps…
52. 1. Define the problem.
53. 1. Define the problem. 2. Imagine the possibilities.
54. 1. Define the problem. 2. Imagine the possibilities. 3. Test a hypothesis.
55. 1. Define the problem. 2. Imagine the possibilities. 3. Test a hypothesis. 4. Repeat.
56. So let’s consider how well Thanos did following this process…
57. 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…
58. 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…
59. 1. Define the problem. Actually, it’s more accurate to think of this as…
60. Redefine the problem.
61. The original problem statement is almost never the right expression of that problem.
62. The original problem statement is almost never the right expression of that problem. Example…
63. Problem Statement There are too many people competing for too few resources.
64. New Problem Statement Resource production is insufficient 
 for the current population
65. 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?
66. Successful designs almost invariably result from informed redefinition of the problem.
67. Redefinition comes from research.
68. Research means understanding your user.
69. Research means understanding your user. • Who are they? • What do they want? • In what context do they want it? • What challenges do they face?
70. Ways designers research.
71. 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…
72. 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
73. 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…
74. Important note— You are not your user.
75. 2. Imagine the possibilities. This is the “creative” part, where designers create mockups to express what the solution might be, (usually) through visual means
76. The hardest thing to imagine is anything.
77. Designers thrive on constraints.
78. Constraints are a filter for ideas. And ideas are the result of a voracious appetite for inspiration.
79. Inspiration comes from everywhere
80. Every designer’s creative process is different.
81. Some designers like to sketch
82. Some designers like to start exploring right in their tools
83. Some designers like to explore ideas in code
84. Inspiration can come from any art form
85. And of course there’s a whole industry devoted to helping people be more creative
86. 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
87. The key to successful creativity is preserving the notion of possibility.
88. Oftentimes possibilities are obscured by time, quality and resources.
89. Oftentimes possibilities are obscured by time, quality and resources. The ability to alway ask Why? is crucial.
90. Problem Statement Resource production is insufficient 
 for the current population If your creative process is optimized for possibilities, you might consider…
91. Why not use
 the reality stone?
92. Critique is an invaluable tool for designers.
93. Building a strong design team who can engage in constructive discourse about design is essential
94. Collaboration is vital to a healthy design process.
95. “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
96. To have good collaboration, you need good collaborators
97. 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
98. 3. Test a hypothesis.
99. Few things are more appealing to a designer than his or her own idea.
100. 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
101. An untested design is just one designer’s opinion.
102. An untested design is just one designer’s opinion. It must be validated.
103. There is no substitute for a prototype.
104. Prototypes allow you to get something very close to “real”—without committing to code that you may ultimately want to discard
105. Even cheap prototypes are invaluable.
106. If a picture is worth a thousand words, 
 a prototype is worth a thousand meetings.” “
107. People pay attention
 when things move. This is why prototypes are so effective
108. Thumbnail sketches are a very effective way to start the design process…
109. 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
110. You could create static comps for all of the different states that you have in mind…
111. But a truly interactive prototype makes the designer’s intention so much more real (click here to view)
112. Creating a prototype creates clarity.
113. Creating a prototype creates clarity. For clients and stakeholders.
114. Creating a prototype creates clarity. For clients and stakeholders. And for designers. Prototypes can help you fall out of love with bad ideas
115. The more quickly an idea becomes a prototype, the more quickly ideas become solutions
116. 4. Repeat.
117. Design is inherently iterative.
118. Definition informs possibilities.
119. Definition informs possibilities. Possibilities inform hypotheses.
120. Definition informs possibilities. Possibilities inform hypotheses. Hypotheses inform definition.
121. The “godhead genius” archetype of design is a myth. Solutions don’t just magically present themselves to creative savants
122. Design is a process of progressively bringing a solution into focus.
123. Design is never really finished. At some point, it just ships.
124. Alert—the next idea is a mild spoiler
125. When Thanos implemented his design, he just assumed he was done. © 2019 Marvel
126. For certain kinds of solutions, design has to keep going.
127. Luckily for Thanos…
128. Luckily for Thanos… There’s probably going to be a sequel. © 2019 Marvel
129. @khoi khoi@adobe.com Thank you.
130. @khoi khoi@adobe.com letterboxd.com/khoi Thank you. For listening to me talk 
 about Avengers: Endgame.