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.

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
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