Antifragile Design (Great Wide Open)

Transcript

1. ANTI
   FRAGILE
   DESIGN
   

   View Slide

2. KEVIN CLARK
   Senior Product Designer, Shopify
   @vernalkick
   HELLO!
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. DESIGNING
    AT SCALE
    

    View Slide

11. 01 / EVERY USER
    IS DIFFERENT
    

    View Slide

12. So who do we design for?
    

    View Slide

13. OURSELVES?
    

    View Slide

14. THEIR LIFE OUR LIFE
    

    View Slide

15. We can’t design solutions for
    problems we don’t understand
    

    View Slide

16. View Slide

17. Good design isn’t
    MAGIC
    

    View Slide

18. USER RESEARCH
    

    View Slide

19. It’s about understanding how another
    person thinks — what’s going on inside her
    head and heart. And most importantly, it’s
    about acknowledging her reasoning and
    emotions as valid, even if they differ from
    your own understanding.
    — INDI YOUNG
    PRACTICAL EMPATHY
    

    View Slide

20. View Slide

21. https://medium.com/design-x-data/are-you-a-good-driver-how-designers-use-data-to-get-to-the-truth-3c534fcaf9d2
    DATA
    

    View Slide

22. Behavioural data shows us what
    people really do, and how it differs
    from what they say.
    — MATT COOPER-WRIGHT
    IDEO
    

    View Slide

23. View Slide

24. EMPATHY
    

    View Slide

25. https://medium.com/tab-design/empathy-for-big-audiences-d0b1c5167ca2
    IDENTIFY

    MINDSETS & CONTEXTS
    

    View Slide

26. — What is going through someone’s head when they are
    trying to achieve X?
    https://medium.com/tab-design/empathy-for-big-audiences-d0b1c5167ca2
    IDENTIFY

    MINDSETS & CONTEXTS
    

    View Slide

27. — What is going through someone’s head when they are
    trying to achieve X?
    — What are people likely to be feeling when they want Y?
    https://medium.com/tab-design/empathy-for-big-audiences-d0b1c5167ca2
    IDENTIFY

    MINDSETS & CONTEXTS
    

    View Slide

28. — What is going through someone’s head when they are
    trying to achieve X?
    — What are people likely to be feeling when they want Y?
    — In what context is someone going to be doing Z?
    https://medium.com/tab-design/empathy-for-big-audiences-d0b1c5167ca2
    IDENTIFY

    MINDSETS & CONTEXTS
    

    View Slide

29. View Slide

30. The best interface is the
    one within reach
    — CAMERON MOLL
    

    View Slide

31. View Slide

32. View Slide

33. DESIGN SYSTEMS
    THAT CAN EVOLVE
    AND ADAPT TO
    USERS’ NEEDS
    

    View Slide

34. A design system is a definition of the
    architecture, content, visual and templates
    to produce [...] a consistent and effective
    product experience.
    — NATHAN CURTIS
    

    View Slide

35. ֦অ Ӯኴ
    

    View Slide

36. View Slide

37. Broccoli
    UNITED STATES
    

    View Slide

38. Green Peppers
    JAPAN
    

    View Slide

39. Hockey
    UNITED STATES
    

    View Slide

40. Soccer
    UNITED KINGDOM
    

    View Slide

41. YOU CAN’T DESIGN
    WITHOUT REAL DATA
    

    View Slide

42. View Slide

43. View Slide

44. 02 / EVERYONE HAS
    DIFFERENT NEEDS
    FAIL
    

    View Slide

45. To see what my friends are up to
    To relieve boredom
    To look at my friends' pictures
    To procrastinate
    To send messages to my friends
    To let my friends know what I'm up to
    To post my own pictures
    To look at funny videos or links
    To find friends from my past
    0 1 2 3 4 5
    http://www.sciencedirect.com/science/article/pii/S0191886911005149
    WHY DO YOU USE FACEBOOK?
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. THE WHOLE TEAM NEEDS
    TO CARE ABOUT DESIGN
    04 /
    

    View Slide

52. View Slide

53. SHIP FAST AND ITERATE
    Show early
    

    View Slide

54. SHIP FAST AND ITERATE
    Show early
    

    View Slide

55. DEFAULT TO OPEN
    

    View Slide

56. FRESH EYES
    

    View Slide

57. — Describe the problem you’re trying to solve
    — Indicate what type of feedback you’d like to receive
    — Present your work, don’t sell it
    PRESENTER
    

    View Slide

58. — Highlight problems, not suggest solutions
    — Ask lots of questions
    — Be candid
    AUDIENCE
    

    View Slide

59. — Make sure that people stay on track (15-20 minutes)
    — Make sure everyone has the chance to speak
    — Make sure the feedback given answers the right questions
    FACILITATOR
    

    View Slide

60. It’s uncomfortable…
    

    View Slide

61. It’s uncomfortable…
    at first.
    

    View Slide

62. You want to wait until it’s perfect
    

    View Slide

63. You want to wait until it’s perfect
    Except it’s never perfect
    

    View Slide

64. You want to wait until it’s perfect
    Except it’s never perfect
    So you’re never done
    

    View Slide

65. You want to wait until it’s perfect
    Except it’s never perfect
    So you’re never done
    And you never share it
    

    View Slide

66. WORK IN PUBLIC
    

    View Slide

67. OPEN
    SOURCE
    DESIGN
    

    View Slide

68. STYLEGUIDES
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. Share what you know!
    

    View Slide

73. DEALING WITH
    COMPLEXITY
    05 /
    

    View Slide

74. “But I only need this one extra feature!”
    ×1000000000
    

    View Slide

75. SOFTWARE
    COMPLEXITY
    OVER TIME
    

    View Slide

76. SOFTWARE
    COMPLEXITY
    OVER TIME
    

    View Slide

77. View Slide

78. If your UI even vaguely
    resembles an airplane cockpit,
    you’re doing it wrong.
    — JOHN GRUBER
    http://daringfireball.net/linked/2008/12/01/fahey-bulk-rename-utility
    

    View Slide

79. SOFTWARE
    COMPLEXITY
    OVER TIME
    

    View Slide

80. THE SWEET SPOT
    

    View Slide

81. View Slide

82. DECIDE ON DEFAULTS
    RATHER THAN OPTIONS
    

    View Slide

83. HAVE A SINGLE WAY OF
    DOING SOMETHING
    

    View Slide

84. View Slide

85. View Slide

86. CHOOSE
    PERSONALIZATION
    OVER CUSTOMIZATION
    

    View Slide

87. View Slide

88. SO WHAT IS
    ANTIFRAGILE DESIGN?
    

    View Slide

89. It breaks if you drop it
    FRAGILE
    

    View Slide

90. It stays the same if you drop it
    RESILIENT
    

    View Slide

91. It gets stronger with every hit
    ANTIFRAGILE
    

    View Slide

92. EMBRACE
    UNCERTAINTY
    Lesson #1
    

    View Slide

93. Lesson #2
    BE VULNERABLE
    

    View Slide

94. Lesson #3
    DESIGN YOUR
    PROCESS
    

    View Slide

95. Doing things
    10%
    90%
    Staring into space
    thinking about how
    to do things better
    

    View Slide

96. THANK YOU
    @VERNALKICK
    

    View Slide