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

37a6dd860cb30d372629bdf0c06ecbe7?s=47 Bethany Sonefeld
November 16, 2018

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.

37a6dd860cb30d372629bdf0c06ecbe7?s=128

Bethany Sonefeld

November 16, 2018
Tweet

Transcript

  1. 1.

    1 You’ve built a design system… now what? Design Systems

    London Bethany Sonefeld November 2018
  2. 11.

    @bsonefeld • Issue templates 11 • Detailed description • Feature

    request? Bug? • Steps to reproduce issue • Browser? • What version are you using? • Screenshots
  3. 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
  4. 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
  5. 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
  6. 19.

    @bsonefeld • Code of Conduct 19 • Be respectful •

    Be understanding • Be courteous • Be welcoming
  7. 23.

    @bsonefeld • 23 Governance / Enforcing a design system Step

    2: If you see something, say something
  8. 26.

    @bsonefeld • 26 EXPECTATION EXPECTATION Release a thing Monday, 8:30am

    Monday, 10:30am People start using it (do nothing)
  9. 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
  10. 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
  11. 31.

    @bsonefeld • 31 #2: Provide all the documentation Adoption /

    Increasing adoption • Migration guides • Component usage guidelines • Getting started / installing
  12. 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
  13. 33.

    @bsonefeld • 33 #3: Show your value Adoption / Increasing

    adoption Page performance Decrease inconsistencies Built in accessibility
  14. 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? • • • •
  15. 35.

    @bsonefeld • Adoption secrets 35 1 Provide documentation 2 Be

    available Show your value 3 Build trust! Overcommunicate 4
  16. 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
  17. 40.

    @bsonefeld • 40 Contribution levels LIGHT MEDIUM HEAVY Adding new

    component Changing guidelines, adding icons Small change or tweak Maintaining / Bug fixes
  18. 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
  19. 46.

    @bsonefeld • Product needs 46 STYLING FLEXIBILITY • Borders •

    Zebra stripes • Background colors ADDED FUNCTIONALITY • Filtering • Sorting • Batch actions
  20. 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