1 You’ve built a design system… now what? Design Systems London Bethany Sonefeld November 2018

@bsonefeld • 2 Hey, hi, hello! @bsonefeld

@bsonefeld • 3

@bsonefeld • 4 teams libraries components 38 3 90 Carbon Design System @ IBM

@bsonefeld • 5

@bsonefeld • 6 wtf happens afterwards?

@bsonefeld • 7 EXPECTATION EXPECTATION EXPECTATION

@bsonefeld • 8 REALITY REALITY

9 Governance Establishing process

@bsonefeld • 10 Issue templates

@bsonefeld • Issue templates 11 • Detailed description • Feature request? Bug? • Steps to reproduce issue • Browser? • What version are you using? • Screenshots

@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

@bsonefeld • 13 Creating a template Governance / Issue templates

@bsonefeld • 14 Voila! Governance / Issue templates

@bsonefeld • Prioritizing work Code of Conduct

@bsonefeld • 16 TLDR; don’t be an a-hole Governance / Code of Conduct

@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

@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

@bsonefeld • Code of Conduct 19 • Be respectful • Be understanding • Be courteous • Be welcoming

@bsonefeld • 20 Governance / Code of Conduct

@bsonefeld • 21 How do you enforce the design system?

@bsonefeld • 22 Governance / Enforcing a design system Step 1: Don’t be the design police

@bsonefeld • 23 Governance / Enforcing a design system Step 2: If you see something, say something

@bsonefeld • Component check-ins 24 Governance / Enforcing a design system

25 Adoption Embracing the system

@bsonefeld • 26 EXPECTATION EXPECTATION Release a thing Monday, 8:30am Monday, 10:30am People start using it (do nothing)

@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

@bsonefeld • 28 Design systems shouldn’t be mandated

@bsonefeld • 29 4 secrets for increasing adoption of your design system

@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

@bsonefeld • 31 #2: Provide all the documentation Adoption / Increasing adoption • Migration guides • Component usage guidelines • Getting started / installing

“ ” @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

@bsonefeld • 33 #3: Show your value Adoption / Increasing adoption Page performance Decrease inconsistencies Built in accessibility

@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? • • • •

@bsonefeld • Adoption secrets 35 1 Provide documentation 2 Be available Show your value 3 Build trust! Overcommunicate 4

36 Maintaining Keeping the lights on

@bsonefeld • 37 Bug fixes

@bsonefeld • 38 send halp

@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

@bsonefeld • 40 Contribution levels LIGHT MEDIUM HEAVY Adding new component Changing guidelines, adding icons Small change or tweak Maintaining / Bug fixes

@bsonefeld • 41 Continuous 
 improvement

@bsonefeld • 42 Case study: Data Tables

@bsonefeld • 43 Data Tables: V1 Maintaining / Continuous improvements

@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

@bsonefeld • 45 Maintaining / Continuous improvements

@bsonefeld • Product needs 46 STYLING FLEXIBILITY • Borders • Zebra stripes • Background colors ADDED FUNCTIONALITY • Filtering • Sorting • Batch actions

@bsonefeld • 3-4 month design overhaul 47 Maintaining / Continuous improvements

@bsonefeld • 48 Data Tables: V2 Maintaining / Continuous improvements

49 Growing Continuing to flourish

@bsonefeld • 50 Strategy

@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

@bsonefeld • 52 Growing / Strategy #2: Focus on your product’s needs

@bsonefeld • 53

@bsonefeld • 54 Team culture

@bsonefeld • #1: Make time to innovate 55 Growing / Team culture

@bsonefeld • 56 #2: Celebrate your wins & have fun Growing / Team culture

@bsonefeld • 57 Thanks, y’all! @bsonefeld