You've built a design system...now what?

A lot of hard work goes into building a design system. You establish a type scale and color palette, develop a set of components, and build your system’s website. But what happens once all those things are in place?

In this session, you’ll learn how to get people to actually use what you’ve built. Learn the essential steps to guarantee longevity, continued growth, and how to have fun along the way from the team maintaining IBM’s largest design system.

Transcript

1. 1 You’ve built a design system… now what? Design Systems London Bethany Sonefeld November 2018
2. @bsonefeld • 2 Hey, hi, hello! @bsonefeld
3. @bsonefeld • 3
4. @bsonefeld • 4 teams libraries components 38 3 90 Carbon Design System @ IBM
5. @bsonefeld • 5
6. @bsonefeld • 6 wtf happens afterwards?
7. @bsonefeld • 7 EXPECTATION EXPECTATION EXPECTATION
8. @bsonefeld • 8 REALITY REALITY
9. 9 Governance Establishing process
10. @bsonefeld • 10 Issue templates
11. @bsonefeld • Issue templates 11 • Detailed description • Feature request? Bug? • Steps to reproduce issue • Browser? • What version are you using? • Screenshots
12. @bsonefeld • 12 Governance / Issue templates E Description Joe Schmoe opened this issue 17 minutes ago Dropdown caret not rendering in IE11 #52 Open Steps to reproduce 1 2 3 4 5 < /> < /> < /> < /> Code snippets E Description Lauryn Taylor opened this issue 12 days ago Screenshots Data table sorting returning error #40 Open Steps to reproduce
13. @bsonefeld • 13 Creating a template Governance / Issue templates
14. @bsonefeld • 14 Voila! Governance / Issue templates
15. @bsonefeld • Prioritizing work Code of Conduct
16. @bsonefeld • 16 TLDR; don’t be an a-hole Governance / Code of Conduct
17. @bsonefeld • 17 Joe ! @here 6:02 AM I’m running into an error using the Carbon checkbox Can anyone assist? @channel "? @channel My build is still failing consistently Joe ! 6:03 AM Governance / Code of Conduct
18. @bsonefeld • 18 But really, you still probably shouldn’t do it. Cool, don’t do it. NO YES When to use @here or @channel NO YES Read the docs. Is your issue breaking production code? YES Have you read troubleshooting docs? Is this issue really fucking important? NO
19. @bsonefeld • Code of Conduct 19 • Be respectful • Be understanding • Be courteous • Be welcoming
20. @bsonefeld • 20 Governance / Code of Conduct
21. @bsonefeld • 21 How do you enforce the design system?
22. @bsonefeld • 22 Governance / Enforcing a design system Step 1: Don’t be the design police
23. @bsonefeld • 23 Governance / Enforcing a design system Step 2: If you see something, say something
24. @bsonefeld • Component check-ins 24 Governance / Enforcing a design system
25. 25 Adoption Embracing the system
26. @bsonefeld • 26 EXPECTATION EXPECTATION Release a thing Monday, 8:30am Monday, 10:30am People start using it (do nothing)
27. @bsonefeld • 27 REALITY REALITY Release a thing Monday, 8am 3 months later People start using it Answer a bunch of questions Check GitHub for new issues Wallow in self-pity
28. @bsonefeld • 28 Design systems shouldn’t be mandated
29. @bsonefeld • 29 4 secrets for increasing adoption of your design system
30. @bsonefeld • 30 #1: Be available #carbon-components #carbon-design-system #carbon-react Kendall 11:11 AM Any info on when the new Text inputs will be available? #carbon-design-system Bethany 11:13 AM Yes! They’re slated to be released into the Vanilla components by the end of next sprint. React is TBD ☺ Chris 1:52 PM Can anyone point me to where I can download IBM Plex? Camilla 2:08 PM @chris github.com/IBM/plex Adoption / Increasing adoption
31. @bsonefeld • 31 #2: Provide all the documentation Adoption / Increasing adoption • Migration guides • Component usage guidelines • Getting started / installing
32. “ ” @bsonefeld • If marketing can’t read the docs to figure out which color and typeface to use in a Word document, you have failed. 32 - RUNE MADSEN @runemadsen
33. @bsonefeld • 33 #3: Show your value Adoption / Increasing adoption Page performance Decrease inconsistencies Built in accessibility
34. @bsonefeld • 34 #4: Overcommunicate Adoption / Increasing adoption E Bethany Sonefeld 10:30 AM Hey y’all, we’re excited to share out our roadmap for Version 8 of Carbon! 
 
 So, what can you expect with V8? • • • •
35. @bsonefeld • Adoption secrets 35 1 Provide documentation 2 Be available Show your value 3 Build trust! Overcommunicate 4
36. 36 Maintaining Keeping the lights on
37. @bsonefeld • 37 Bug fixes
38. @bsonefeld • 38 send halp
39. @bsonefeld • Contribution
 process 39 1. Contributor opens an issue 2. Systems team reviews request + communicates w/ contributor 3. Contributor submits PR 4. Systems team reviews PR 5. PR is merged
40. @bsonefeld • 40 Contribution levels LIGHT MEDIUM HEAVY Adding new component Changing guidelines, adding icons Small change or tweak Maintaining / Bug fixes
41. @bsonefeld • 41 Continuous 
 improvement
42. @bsonefeld • 42 Case study: Data Tables
43. @bsonefeld • 43 Data Tables: V1 Maintaining / Continuous improvements
44. @bsonefeld • 44 Camille 2:56 PM How do I remove the zebra stripes from the Carbon table? Jesse 10:23 AM Do we have a pattern for batch actions on the data table? Zoe 12:02 PM What’s the pattern for sorting data in a table? Maintaining / Continuous improvements
45. @bsonefeld • 45 Maintaining / Continuous improvements
46. @bsonefeld • Product needs 46 STYLING FLEXIBILITY • Borders • Zebra stripes • Background colors ADDED FUNCTIONALITY • Filtering • Sorting • Batch actions
47. @bsonefeld • 3-4 month design overhaul 47 Maintaining / Continuous improvements
48. @bsonefeld • 48 Data Tables: V2 Maintaining / Continuous improvements
49. 49 Growing Continuing to flourish
50. @bsonefeld • 50 Strategy
51. @bsonefeld • 51 Growing / Strategy Carbon V8 Design Roadmap Sprint 18 Aug 28 - Sept 8 Visual IA, UX, Content Operations FED Sprint 19 Sept 11 - Sept 22 Sprint 20 Sept 25 - Oct 6 Sprint 21 Oct 9 - Oct 20 Data Table UX & website guidelines Data Table visuals Carbon lockup (5-8 concepts) 2-3 refined concepts Final tweaks Plex template: website Data Table assets for prod Data Table: website Data table: Vanilla updates Plex: website transition Plex: Component transition Tiles: website Homepage: content Homepage: content layout + visual updates Design Kit: Add on repo vs. core kit Website + repo ecosystem: add-ons Website: Refactor images —> Plex Website IA: restructure V8 Release Design review #1: Have a roadmap
52. @bsonefeld • 52 Growing / Strategy #2: Focus on your product’s needs
53. @bsonefeld • 53
54. @bsonefeld • 54 Team culture
55. @bsonefeld • #1: Make time to innovate 55 Growing / Team culture
56. @bsonefeld • 56 #2: Celebrate your wins & have fun Growing / Team culture
57. @bsonefeld • 57 Thanks, y’all! @bsonefeld