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
   

   View Slide

2. About me…
   

   View Slide

3. I work at Adobe as a Principal Designer
   

   View Slide

4. I lead the design team for Adobe XD, a new
   tool for designing app and websites
   

   View Slide

5. Adobe XD is also the first and only tool that lets you
   design with voice for devices like the Amazon Echo
   

   View Slide

6. View Slide

7. Formerly, I was design director at NYTimes.com
   

   View Slide

8. I write a blog about design, technology and culture at Subtraction.com
   

   View Slide

9. adobe.ly/wireframe
   And I’m the host of Wireframe, a podcast that tells in-depth
   stories about the world of design
   

   View Slide

10. First, a story…
    

    View Slide

11. First, a story called…
    “A Talk for Gimlet Creative”
    

    View Slide

12. First, a story called…
    “A Talk for Gimlet Creative?”
    

    View Slide

13. SECTION NAME
    Mon Apr 22
    From: Rachel
    To: Khoi
    Subject: a talk for Gimlet Creative?
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

16. SECTION NAME
    Wed Apr 24
    From: Rachel
    To: Khoi
    Crazy idea - what about a week from Thursday?
    

    View Slide

17. SECTION NAME
    Wed Apr 24
    From: Khoi
    To: Rachel
    Hmm mmmmaybe.
    

    View Slide

18. So here we are.
    

    View Slide

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…
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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…
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. Sun Mon Tue Wed Thu Fri Sat
    24 25 26 27
    28 29 30 1 2
    Obviously, nothing got done Tuesday
    

    View Slide

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?
    

    View Slide

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…
    

    View Slide

30. Maybe you guys just all want to
    talk about Avengers: Endgame?
    

    View Slide

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!
    

    View Slide

32. Actually…
    

    View Slide

33. Thinking about Thanos and what
    he tries to do in these movies…
    

    View Slide

34. © 2019 Marvel
    

    View Slide

35. He’s kind of
    a designer!
    A terrible one
    © 2019 Marvel
    

    View Slide

36. So let’s talk about 

    Avengers: Endgame
    

    View Slide

37. First, there will be
    some mild spoilers.
    

    View Slide

38. Things that happen:
    Bad guys try to kill people.
    Good guys win.
    

    View Slide

39. Also, there’s an anthropomorphic raccoon
    from space who talks with a Jersey accent.
    © 2019 Marvel
    

    View Slide

40. For those unfamiliar: Thanos sees suffering throughout the
    universe and believes it’s caused by overpopulation
    

    View Slide

41. So he conspires to kill half of all living beings, believing that the remaining lives will flourish
    

    View Slide

42. This counts as design.
    It’s twisted and villainous, but it’s design
    

    View Slide

43. Wait, so what is design?
    

    View Slide

44. There are lots of definitions…
    But here’s one that will suit us well
    

    View Slide

45. “Design [is] a plan for
    arranging elements to
    accomplish a particular
    purpose.”
    — Charles Eames
    Hat tip to @odannyboy
    

    View Slide

46. Yup. Design.
    Cruel and horrific, but it’s design
    

    View Slide

47. Design and technology
    are intrinsically linked.
    

    View Slide

48. Thanos can’t implement his plan without the technology of the
    Infinity Gauntlet and its stones, which do a bunch of magical stuff
    

    View Slide

49. Design is the application
    of technology and human
    intention to a problem.
    

    View Slide

50. Design is the application
    of technology and (super)human
    intention to a problem.
    

    View Slide

51. So what is the design process?
    There are many different processes, but most of them boil down to these basic steps…
    

    View Slide

52. 1. Define the problem.
    

    View Slide

53. 1. Define the problem.
    2. Imagine the possibilities.
    

    View Slide

54. 1. Define the problem.
    2. Imagine the possibilities.
    3. Test a hypothesis.
    

    View Slide

55. 1. Define the problem.
    2. Imagine the possibilities.
    3. Test a hypothesis.
    4. Repeat.
    

    View Slide

56. So let’s consider how well Thanos
    did following this process…
    

    View Slide

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…
    

    View Slide

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…
    

    View Slide

59. 1. Define the problem.
    Actually, it’s more accurate to think of this as…
    

    View Slide

60. Redefine the problem.
    

    View Slide

61. The original problem statement
    is almost never the right
    expression of that problem.
    

    View Slide

62. The original problem statement
    is almost never the right
    expression of that problem.
    Example…
    

    View Slide

63. Problem Statement
    There are too many people
    competing for too few resources.
    

    View Slide

64. New Problem Statement
    Resource production is insufficient 

    for the current population
    

    View Slide

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?
    

    View Slide

66. Successful designs almost
    invariably result from
    informed redefinition of the
    problem.
    

    View Slide

67. Redefinition comes from
    research.
    

    View Slide

68. Research means
    understanding your user.
    

    View Slide

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?
    

    View Slide

70. Ways designers research.
    

    View Slide

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…
    

    View Slide

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
    

    View Slide

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…
    

    View Slide

74. Important note—
    You are not your user.
    

    View Slide

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
    

    View Slide

76. The hardest thing to
    imagine is anything.
    

    View Slide

77. Designers thrive on
    constraints.
    

    View Slide

78. Constraints are a filter for ideas.
    And ideas are the result of a
    voracious appetite for inspiration.
    

    View Slide

79. Inspiration comes from everywhere
    

    View Slide

80. Every designer’s creative
    process is different.
    

    View Slide

81. Some designers like to sketch
    

    View Slide

82. Some designers like to start exploring right in their tools
    

    View Slide

83. Some designers like to explore ideas in code
    

    View Slide

84. Inspiration can come from any art form
    

    View Slide

85. And of course there’s a whole industry devoted to helping people be more creative
    

    View Slide

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
    

    View Slide

87. The key to successful creativity
    is preserving the notion of
    possibility.
    

    View Slide

88. Oftentimes possibilities are
    obscured by time, quality and
    resources.
    

    View Slide

89. Oftentimes possibilities are
    obscured by time, quality and
    resources.
    The ability to alway ask Why? is
    crucial.
    

    View Slide

90. Problem Statement
    Resource production is insufficient 

    for the current population
    If your creative process is optimized for possibilities, you might consider…
    

    View Slide

91. Why not use

    the reality stone?
    

    View Slide

92. Critique is an invaluable
    tool for designers.
    

    View Slide

93. Building a strong design team who can engage in constructive discourse about design is essential
    

    View Slide

94. Collaboration is vital to a
    healthy design process.
    

    View Slide

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
    

    View Slide

96. To have good collaboration,
    you need good collaborators
    

    View Slide

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
    

    View Slide

98. 3. Test a hypothesis.
    

    View Slide

99. Few things are more appealing
    to a designer than his or her
    own idea.
    

    View Slide

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
     

     View Slide

101. An untested design is just
     one designer’s opinion.
     

     View Slide

102. An untested design is just
     one designer’s opinion.
     It must be validated.
     

     View Slide

103. There is no substitute for a
     prototype.
     

     View Slide

104. Prototypes allow you to get something very close to “real”—without committing to code that you may ultimately want to discard
     

     View Slide

105. Even cheap prototypes are
     invaluable.
     

     View Slide

106. If a picture is worth a thousand words, 

     a prototype is worth a thousand meetings.”
     “
     

     View Slide

107. People pay attention

     when things move.
     This is why prototypes are so effective
     

     View Slide

108. Thumbnail sketches are a very effective way to start the design process…
     

     View Slide

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
     

     View Slide

110. You could create static comps for all of the different states that you have in mind…
     

     View Slide

111. But a truly interactive prototype makes the designer’s intention so much more real (click here to view)
     

     View Slide

112. Creating a prototype
     creates clarity.
     

     View Slide

113. Creating a prototype
     creates clarity.
     For clients and
     stakeholders.
     

     View Slide

114. Creating a prototype
     creates clarity.
     For clients and
     stakeholders.
     And for designers.
     Prototypes can help you fall out of love with bad ideas
     

     View Slide

115. The more quickly an idea
     becomes a prototype, the
     more quickly ideas become
     solutions
     

     View Slide

116. 4. Repeat.
     

     View Slide

117. Design is inherently iterative.
     

     View Slide

118. Definition informs possibilities.
     

     View Slide

119. Definition informs possibilities.
     Possibilities inform hypotheses.
     

     View Slide

120. Definition informs possibilities.
     Possibilities inform hypotheses.
     Hypotheses inform definition.
     

     View Slide

121. The “godhead genius”
     archetype of design is a myth.
     Solutions don’t just magically present themselves to creative savants
     

     View Slide

122. Design is a process of
     progressively bringing a
     solution into focus.
     

     View Slide

123. Design is never really finished.
     At some point, it just ships.
     

     View Slide

124. Alert—the next idea
     is a mild spoiler
     

     View Slide

125. When Thanos implemented
     his design, he just assumed he
     was done.
     © 2019 Marvel
     

     View Slide

126. For certain kinds of solutions,
     design has to keep going.
     

     View Slide

127. Luckily for Thanos…
     

     View Slide

128. Luckily for Thanos…
     There’s probably going to be a sequel.
     © 2019 Marvel
     

     View Slide

129. @khoi
     khoi@adobe.com
     Thank you.
     

     View Slide

130. @khoi
     khoi@adobe.com
     letterboxd.com/khoi
     Thank you.
     For listening to me talk 

     about Avengers: Endgame.
     

     View Slide