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

Keeping Subscribers Engaged in Your Design System

Keeping Subscribers Engaged in Your Design System

There’s no denying the valuable powerhouse potential of well thought-out design systems. They can provide live, interactive examples of often used components, assist the rapid build of new pages and applications, and ensure brand consistency by providing stable “trickle-down” CSS changes. A design system (or “style guide” or “pattern library”) can change the way a large team builds the web.

But what about the difficulties of a mature design system? Nearly two years and three major versions since beta, the enterprise design system I’ve spent the past 18 months working on still faces the same question: “How do we encourage people to keep using our design system?”

In this session, we’ll go over some tips and technologies to to keep subscribers engaged in our design systems after adoption and as the system grows. We’ll Discuss:

* Identifying pressure points of subscribers and creating solid solves
* Finding an avenue for funding your design system team
* Building feedback into your process
* Treating your design system as a fully functional, marketed product
* Iterating to minimize the guesswork and make educated choices
* Staying up to date, integrated, and useful to the entire team

This session is for you if….
* You are currently part of a design system team,
* You are currently part of a team implementing a design system,
* You are thinking about becoming either of the above,
* You have ever struggled to get buy-in for your ideas, or
* You really, really want people to like the thing you built.

Fa3f2214786607d2c2e1828ff00323dd?s=128

Catherine Meade

April 09, 2019
Tweet

Transcript

  1. Keeping Subscribers Keeping Subscribers Engaged in Your Engaged in Your

    Design System Design System bit.ly/meade-design-systems bit.ly/meade-design-systems speakerdeck.com/catheraaine speakerdeck.com/catheraaine 1
  2. Self Portrait with Straw Hat, 1887 by Vincent Van Gogh

    via VincentVanGogh.org 2
  3. Self Portrait with Straw Hat, 1887 by Vincent Van Gogh

    via VincentVanGogh.org 3
  4. Catherine Meade Catherine Meade DEVELOPER, SPARKBOX DEVELOPER, SPARKBOX she /

    her she / her @catheraaine @catheraaine 4
  5. What is a Design What is a Design System? System?

    5
  6. DEFINE: DEFINE: Design System Design System 6

  7. “A brand style guide is a document that codifies how

    an organization presents itself to the world. Put another way, it’s a reference tool that helps maintain consistency by demonstrating what a brand looks, feels and sounds like.” 99designs.com/blog 7
  8. designsystemssurvey.seesparkbox.com 8

  9. DEFINE: DEFINE: Design System Design System 9

  10. Design System Design System Pattern Library Pattern Library Style Guide

    Style Guide 10
  11. DEFINE: DEFINE: Subscriber Subscriber 11

  12. So what's the problem? So what's the problem? 12

  13. NOT ASKING: NOT ASKING: How do I get people on

    board with building a How do I get people on board with building a design system? design system? 13
  14. How do we encourage people How do we encourage people

    to keep using our design to keep using our design system? system? 14
  15. designsystemssurvey.seesparkbox.com 15

  16. THE ANSWER: THE ANSWER: Your Design System Your Design System

    = Your Product. = Your Product. 16
  17. THE ANSWER: THE ANSWER: Your Design System Your Design System

    = Your = Your Desirable, Desirable, Funded, Funded, Teachable, Teachable, Attentive, Attentive, Documented, Documented, Adaptable, Adaptable, Branded Branded Product. Product. 17
  18. Desirable Desirable 18

  19. Find a frustration point your Find a frustration point your

    subscribers have, and ease it. subscribers have, and ease it. 19
  20. BUILD SOMETHING DESIRABLE BUILD SOMETHING DESIRABLE Have an Ambassador Have

    an Ambassador 20
  21. BUILD SOMETHING DESIRABLE BUILD SOMETHING DESIRABLE Hold Stakeholder Interviews Hold

    Stakeholder Interviews 21
  22. Hubspot Hubspot "Your system should be owned by all." bit.ly/ds-hubspot

    22
  23. BUILD SOMETHING DESIRABLE BUILD SOMETHING DESIRABLE Win trust by solving

    your Win trust by solving your subscriber’s problems. subscriber’s problems. 23
  24. Funded Funded 24

  25. Funding ➡ Deliverables Funding ➡ Deliverables 25

  26. Funding ➡ Deliverables ➡ Funding ➡ Deliverables ➡ Process Process

    26
  27. design-system.pluralsight.com 27

  28. Where is the Money? Where is the Money? UX/Design Research

    & Development Tech Debt 28
  29. 29

  30. Teachable Teachable 30

  31. BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Subscribers come first. Subscribers

    come first. 31
  32. BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Hold Regular Office Hours

    Hold Regular Office Hours 32
  33. BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Create a Digestible Create

    a Digestible Changelog / Release Notes Changelog / Release Notes bit.ly/ds-release-notes 33
  34. atlassian.design 34

  35. BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Host Internal Workshops Host

    Internal Workshops & Lunch 'n' Learns & Lunch 'n' Learns 35
  36. BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Develop a Virtual Learning

    Develop a Virtual Learning Library Library 36
  37. BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Subscribers come first. Subscribers

    come first. 37
  38. Attentive Attentive 38

  39. BE ATTENTIVE BE ATTENTIVE Listen to your customer. Listen to

    your customer. 39
  40. design-system.pluralsight.com 40

  41. BE ATTENTIVE BE ATTENTIVE Listen to your customer. Listen to

    your customer. 41
  42. Documented Documented 42

  43. DOCUMENT IT WELL DOCUMENT IT WELL SemVer for the Win!

    SemVer for the Win! semver.org 43
  44. DOCUMENT IT WELL DOCUMENT IT WELL Name things. Name things.

    (.ellipses != .ellipsis) 44
  45. DOCUMENT IT WELL DOCUMENT IT WELL Build a documentation site.

    Build a documentation site. 45
  46. carbondesignsystem.com 46

  47. Document it well. Document it well. 47

  48. Adaptable Adaptable 48

  49. BE ADAPTABLE BE ADAPTABLE Iterate as the need arises. Iterate

    as the need arises. 49
  50. BE ADAPTABLE BE ADAPTABLE Iterate as the need arises. Iterate

    as the need arises. 50
  51. Individuals commit the sunk cost fallacy when they continue a

    behavior or endeavor as a result of previously invested resources (time, money or effort) (Arkes & Blumer, 1985). behavioraleconomics.com 51
  52. Your system has to Your system has to be willing

    to change and grow. be willing to change and grow. 52
  53. Branded Branded 53

  54. BRANDING MATTERS BRANDING MATTERS Name Your System Name Your System

    54
  55. polaris.shopify.com 55

  56. BRANDING MATTERS BRANDING MATTERS Make It Official Make It Official

    56
  57. design.trello.com 57

  58. BRANDING MATTERS BRANDING MATTERS Send Newsletters Send Newsletters 58

  59. Self Portrait with Straw Hat, 1887 by Vincent Van Gogh

    via VincentVanGogh.org 59
  60. Your Design System Your Design System = Your = Your

    Desirable, Desirable, Funded, Funded, Teachable, Teachable, Attentive, Attentive, Documented, Documented, Adaptable, Adaptable, Branded Branded Product. Product. 60
  61. Thanks! Thanks! Catherine Meade Catherine Meade DEVELOPER, SPARKBOX DEVELOPER, SPARKBOX

    | | @catheraaine @catheraaine cat@heysparkbox.com cat@heysparkbox.com bit.ly/meade-design-systems bit.ly/meade-design-systems 61
  62. | ✨ Resources ✨ ✨ Resources ✨ Slide Repository |

    Slide PDF | Foundry Article | Design Systems Survey 2018 | @catheraaine cat@heysparkbox.com bit.ly/meade-design-systems speakerdeck.com/catheraaine http://bit.ly/ds-foundry designsystemssurvey.seesparkbox.com 62