Weitere ähnliche Inhalte Ähnlich wie Creating and maintaining a design system for 130 teams - Bethany Sonefeld (20) Kürzlich hochgeladen (20) Creating and maintaining a design system for 130 teams - Bethany Sonefeld2. 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
3. Bethany Sonefeld | Carbon Design System | ©2018 IBM CorporationBethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 3
6. Feb
2014
Carbon team formation
March 2016
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Evolution of
Open Beta
June
2014
GA release
Feb
2016
UI redesign
Oct
2016
Softlayer + Bluemix
Oct
2017
Rebrand to
IBM Cloud
6
7. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
30
Feb 2014
75
June 2014
200
February 2018
Service offerings
IBM Cloud
7
8. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
February 2014 February 2018
Service offerings
IBM Cloud
8
10. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 10
EXPECTATION REALITYvs.
12. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 12
With hundreds of designers and
developers contributing to the product,
we needed a single source of truth
for consistency and cohesion.
14. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Design System Life Cycle
Toddler
14
Teenager Adulting Middle-aged Old & wise Enlightenment
16. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Carbon, early 2016:
16
17. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Carbon’s evolution
Mar
2016
Inception
17
18. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 18
Design Manager
2 Visual designers
Dev LeadDesign Lead
4 Front-end developersResearcher
Team formation
March 2016
19. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 19
Audited current product to
componentize patterns
Product audit
March 2016
20. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 20
• Journey mapping
• Empathy maps
• Mission & goals
• Deliverables
Workshop
March 2016
21. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 21
An IBM Offering Team can discover,
understand, and use the Design
System to independently build their
IBM Cloud approved experience.
22. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 22
By Sprint 6, (May/June) we had a
documentation website, stable code
base, and design kit as our MVP.
Running Agile
April 2016
23. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 23
Bluemix Design Kit
IBM Bluemix
Design System
Bluemix Components Website
June 2016
25. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Carbon, early 2017:
25
26. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Mar
2016
Inception
June
2016
Toddler:
Version 6.0
Mar
2017
Teenager:
Version 7.0
26
Carbon’s evolution
27. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 27
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
28. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 28
• 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
29. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 29
Our biggest hurdle was getting
open-sourced approval from a
company not familiar with
open-sourced culture
1
February 2017
Open sourcing
30. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
• 2 designers (visual and UX)
• 2 developers
• Each review refactored
component
2
Vanilla.js
component refactor
New Pull Request (PR) process
30
31. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
2
Vanilla.js component refactor
31
32. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 32
94kb
Version 7.0Version 6.0
16kb
2
Vanilla.js component refactor
compiled css
83%=
33. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 33
541kb
Version 7.0Version 6.0
143kb
2
Vanilla.js component refactor
compiled javascript
73%=
34. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
3
Website refactor
• Single-page React app
improved performance
• Cleaned up code, increased
maintainability
• Easier for designers to
contribute content
Benefits
34
35. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
markdown-it
Markdown parser so designers
could easily contribute to the
website
3
Website refactor
35
36. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 36
Rebrand to Carbon
4
37. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
IBM Bluemix
Design System
Version 7.0Version 6.0
37
39. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Mar
2016
Inception
June
2016
Toddler:
Version 6.0
Mar
2017
Teenagers:
Version 7.0
39
Carbon’s evolution
Adulting
May
2017
40. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
EXPECTATION
40
EXPECTATIONEXPECTATION
42. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 42
Necessary steps to
maintain a Design System
43. Slide Title Goes Here
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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
44. Slide Title Goes Here
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Title hereCode of Conduct
• Helps with Slack etiquette
• Increased workflow for
responding to bugs, open issues
• General best practices on
communication
44
45. Slide Title Goes Here
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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
46. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 46
• 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
47. Slide Title Goes Here
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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
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
Theming sandbox add-ons
Vanilla components
React components
carbon-themes
Website
Data Vis
React storybook
Key deliverable Direct (dependent)
IndirectSecondary asset
RelationshipsDeliverables
Tertiary asset
47
48. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 48
• Allocate time per sprint to fix bugs
• Encourage outside contributors to
submit PR’s for bug fixes
PRO-TIP
Bug fixes
49. Slide Title Goes Here
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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
52. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Mar
2016
Inception
June
2016
Toddler:
Version 6.0
Mar
2017
Teenagers:
Version 7.0
Middle-aged:
Version 8.0
Oct
2017
52
Carbon’s evolution
May
2017
Adulting
53. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation 53
1
Design Kit
Templates
IBM Plex Website visual
refresh
Add-ons
2 3 4
Middle-aged
October 2017 / Version 8.0
54. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
1
Add-ons
54
• Carbon-components became core
library
• Add-ons were product specific
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
Secondary information
DocsView credentials
Card Name
Secondary information
Running
Card Name
Secondary information
DocsView credentials
55. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
2 Templates: Design Kit
55
Design Kit Actual production
56. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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
58. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
IBM PlexHelvetica
Primary button Secondary Primary button Secondary
Success notification title:
Subtitle: Your application was deployed!
05/09/2016 | 5:41:14 PM
Success notification 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
59. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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
60. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
4
Website: visual refresh
60
• Three month design overhaul
• Worked on adding content to
homepage as well as “hero”
image refresh
61. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
IBM Bluemix
Design System
Version 7.0Version 6.0 Version 8.0
61
64. Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
Growing
wise:
Version 9.0
May
2018
64
Carbon’s evolution
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
66. Slide Title Goes Here
Bethany Sonefeld | Carbon Design System | ©2018 IBM Corporation
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 fix bugs
• Make time to build & innovate