Creating and maintaining a design system for 130 teams - Bethany Sonefeld

Bethany Sonefeld
Design Lead, Carbon Design System
Creating & Maintaining
a Design System for 130 Teams
1

Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
The mission of IBM Design
is to create a sustainable
culture of design at IBM.”
—Phil Gilbert, General Manager, IBM Design
“
2

Feb  
2014
Carbon team formation
March 2016
Evolution of
Open Beta
June  
2014
GA release
Feb  
2016
UI redesign
Oct  
2016
Softlayer + Bluemix
Oct  
2017
Rebrand to
IBM Cloud
6

30
Feb 2014
75
June 2014
200
February 2018
Service offerings
IBM Cloud
7

February 2014 February 2018
Service offerings
IBM Cloud
8

EXPECTATION REALITYvs.

Service pages
11

With hundreds of designers and
developers contributing to the product,
we needed a single source of truth
for consistency and cohesion.

Design System Life Cycle
Toddler
14
Teenager Adulting Middle-aged Old & wise Enlightenment

Our toddler years
Learning to walk:
15

Carbon, early 2016:
16

Carbon’s evolution
Mar  
2016
Inception
17

Design Manager
2 Visual designers
Dev LeadDesign Lead
4 Front-end developersResearcher
Team formation
March 2016

Audited current product to
componentize patterns
Product audit
March 2016

• Journey mapping
• Empathy maps
• Mission & goals
• Deliverables
Workshop
March 2016

An IBM Offering Team can discover,
understand, and use the Design
System to independently build their
IBM Cloud approved experience.

By Sprint 6, (May/June) we had a
documentation website, stable code
base, and design kit as our MVP.
Running Agile
April 2016

Bluemix Design Kit
IBM Bluemix 
Design System
Bluemix Components Website
June 2016

Our teenage years
Learning to drive:
24

Carbon, early 2017:
25

Mar  
2016
Inception
June  
2016
Toddler:
Version 6.0
Mar  
2017
Teenager:
Version 7.0
26

1
Vanilla.js
component refactor
Website refactor: React Rebrand to CarbonOpen-sourcing
the system
2 3 4
Our teenage years
March 2017 / Version 7.0

• First thing we did was get
messaging out around Version 7
• Building relationships with
engineering teams
• Breaking changes = angry devs
PRO-TIP
Publish your roadmap early

Our biggest hurdle was getting
open-sourced approval from a
company not familiar with
open-sourced culture
1
February 2017
Open sourcing

• 2 designers (visual and UX)
• 2 developers
• Each review refactored
component
2
Vanilla.js
component refactor
New Pull Request (PR) process
30

2
Vanilla.js component refactor
31

94kb
Version 7.0Version 6.0
16kb
2
compiled css
83%=

541kb
143kb
2
compiled javascript
73%=

3
Website refactor
• Single-page React app
improved performance
• Cleaned up code, increased
maintainability
• Easier for designers to
contribute content
Beneﬁts
34

markdown-it
Markdown parser so designers
could easily contribute to the
website
3
Website refactor
35

Rebrand to Carbon
4

IBM Bluemix 
Design System
37

38
Adulting
Getting our sh*t together:

Mar  
2016
Inception
June  
2016
Toddler:
Version 6.0
Mar  
2017
Teenagers:
Version 7.0
39
Adulting
May  
2017

EXPECTATION
40
EXPECTATIONEXPECTATION

REALITYREALITY
41

Necessary steps to 
maintain a Design System

Slide Title Goes Here
Title hereContributing guidelines
• As more teams use Carbon,
more use cases will pop up that
we didn’t initially plan for
• Allowing contributions to the
system helps off-load the work
43

Title hereCode of Conduct
• Helps with Slack etiquette
• Increased workﬂow for
responding to bugs, open issues
• General best practices on
communication
44

Title hereDocumentation
• The more you can write out
to guide people, the less
questions you will have to
answer
• Documentation is helpful
because it’s a link that can
be shared across orgs and
business units
• It’s better to have too much
information than too little
45

• As adoption increases, so does the
amount of questions
• Make sure you have a strong reason
for design and code decisions
PRO-TIP
Be prepared to answer questions

Title hereConsequences of updates
• Any change you make across the
system could affect a lot of people
• It’s also a lot of manual work for the
systems team to make updates
across all their deliverables
Carbon ecosystem
Design Kit
CodePen
carbon-icons
Theming sandbox add-ons
Vanilla components
React components
carbon-themes
Website
Data Vis
React storybook
Key deliverable Direct (dependent)
IndirectSecondary asset
RelationshipsDeliverables
Tertiary asset
Carbon ecosystem
Design Kit
CodePen
carbon-icons
Vanilla components
React components
carbon-themes
Website
Data Vis
React storybook
Tertiary asset
Carbon ecosystem
Design Kit
CodePen
carbon-icons
Vanilla components
React components
carbon-themes
Website
Data Vis
React storybook
Tertiary asset
47

• Allocate time per sprint to fix bugs
• Encourage outside contributors to
submit PR’s for bug fixes
PRO-TIP
Bug fixes

Title hereGrowing the system
Carbon component check-
ins
• Bi-weekly meetings with our
primary users (IBM Cloud product
designers and developers)
• Time to share / ask questions / get
feedback
49

~*feelin’ gewd*~
50

Mar  
2016
Inception
June  
2016
Toddler:
Version 6.0
Mar  
2017
Teenagers:
Version 7.0
Middle-aged:
Version 8.0
Oct  
2017
52
May  
2017
Adulting

1
Design Kit
Templates
IBM Plex Website visual
refresh
Add-ons
2 3 4
Middle-aged
October 2017 / Version 8.0

1
Add-ons
54
• Carbon-components became core
library
• Add-ons were product speciﬁc
components
• Repos could scale across the carbon-
design-system organization in GitHub
Card Name
Secondary information
Running
Primary 4
Primary 3
Secondary 3A
Secondary 3B
Secondary 3C
Secondary 3D
Primary 2
Primary 1
OverviewGetting started Manage Monitoring Connections
Title
Mobile / / Project Overview / UI Builder /. . .
Running
Create Cluster
Total due now $0.00
estimated
$0.00
$0.00
-
Detail one
Detail two
Detail three
Category label
Need Help? Contact Bluemix Sales
Detail one
Detail two
Category label
$0.00
-
Detail one
Detail two
Category label
$0.00
-
Order Summary USD
Card Name
DocsView credentials
Card Name
Running
Card Name
DocsView credentials

2 Templates: Design Kit
55
Design Kit Actual production

2
Templates: Design Kit
56
• Wanted to still provide layout
guidance without tying it to a product
• Variety of templates:
• Text heavy
• Forms
• Tabular data

3 IBM Plex
57

IBM PlexHelvetica
Primary button Secondary Primary button Secondary
Success notiﬁcation title:
Subtitle: Your application was deployed!
05/09/2016 | 5:41:14 PM
Success notiﬁcation title
Subtitle: Your application was deployed!
05/09/2016 | 5:41:14 PM
Text input label
Hint text here
Text input label
Hint text here
58

4
Website: visual refresh
59
• Wanted quick-links to be more
accessible from the homepage
• Wanted to create a more scalable
“logo” / mark for Carbon

4
Website: visual refresh
60
• Three month design overhaul
• Worked on adding content to
homepage as well as “hero”
image refresh

IBM Bluemix 
Design System
Version 7.0Version 6.0 Version 8.0
61

Growing old & wise
62
Granny knows best:

Carbon, 2018:
63

Growing
wise: 
Version 9.0
May  
2018
64
Mar  
2016
Inception
June  
2016
Toddler:
Version 6.0
Mar  
2017
Teenagers:
Version 7.0
Middle-aged:
Version 8.0
Oct  
2017
May  
2017
Adulting

More to come in May…  
stay tuned!
65

Title here
66
Key takeaways & tips
Building
• Start small (colors,
typography, a11y, grid, icons)
• Build a diverse team
• Focus on your MVP
Growing
• Anticipate what your products
needs are
• Plan for refactors
• Increase your outreach to
teams
Maintaining
• Ramp up your documentation
• Encourage outside contributors
• Dedicate time to JUST ﬁx bugs
• Make time to build & innovate

Thank you! Questions?
67
@_carbondesign
@bsonefeld
bsonefeld@gmail.com
carbon@us.ibm.com

Creating and maintaining a design system for 130 teams - Bethany Sonefeld

More Related Content

What's hot

Similar to Creating and maintaining a design system for 130 teams - Bethany Sonefeld

More from uxpin

Recently uploaded

Creating and maintaining a design system for 130 teams - Bethany Sonefeld