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

by Bethany Sonefeld

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@bsonefeld • 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@bsonefeld • 5

Slide 6

Slide 6 text

@bsonefeld • 6 wtf happens afterwards?

Slide 7

Slide 7 text

@bsonefeld • 7 EXPECTATION EXPECTATION EXPECTATION

Slide 8

Slide 8 text

@bsonefeld • 8 REALITY REALITY

Slide 9

Slide 9 text

9 Governance Establishing process

Slide 10

Slide 10 text

@bsonefeld • 10 Issue templates

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@bsonefeld • 13 Creating a template Governance / Issue templates

Slide 14

Slide 14 text

@bsonefeld • 14 Voila! Governance / Issue templates

Slide 15

Slide 15 text

@bsonefeld • Prioritizing work Code of Conduct

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@bsonefeld • 20 Governance / Code of Conduct

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

25 Adoption Embracing the system

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@bsonefeld • 28 Design systems shouldn’t be mandated

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 Maintaining Keeping the lights on

Slide 37

Slide 37 text

@bsonefeld • 37 Bug fixes

Slide 38

Slide 38 text

@bsonefeld • 38 send halp

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

@bsonefeld • 41 Continuous   improvement

Slide 42

Slide 42 text

@bsonefeld • 42 Case study: Data Tables

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

@bsonefeld • 45 Maintaining / Continuous improvements

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

49 Growing Continuing to flourish

Slide 50

Slide 50 text

@bsonefeld • 50 Strategy

Slide 51

Slide 51 text

@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 reﬁned 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