Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Antifragile Design (Great Wide Open)

Kevin Clark
March 16, 2016

Antifragile Design (Great Wide Open)

Kevin Clark

March 16, 2016
Tweet

More Decks by Kevin Clark

Other Decks in Design

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