Understanding the Design Process through Avengers: Endgame

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.

A16405be12e852d43ff65e16351a9cba?s=128

Khoi Vinh

May 02, 2019
Tweet

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
  6. None
  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.