Morningstar Design System at Chicago Design System Meetup January 2018

The Morningstar's Design System team shared our journey from several disparate design systems toward a centralized team driving change across the organization at the Chicago Design Systems Meetup in January 2018. We demonstrated how Morningstar defined the need for a design system internally and how we delivered on our strategy.

The talk covers:

• The value that the design system has already brought Morningstar
• How it has strengthened Morningstar's visual style and UI components across product teams
• How the team collaborates and drives change across the organization
• How product teams are adopting the design system

Speakers:
Brian Verhoeven, Design Director, Morningstar
Adam Rowe, Senior Visual Designer, Morningstar
Brian Bouril, Senior Software Engineer, Morningstar
Matt Jankowski, Senior Visual Designer, Morningstar
Alex Hayashi, Visual Designer, Morningstar
Kevin Powell, Sr. Front End Developer, Eightshapes
Nathan Curtis, Principal & Founder, EightShapes

Transcript

2. The Chicago area chapter of the global Interaction Design Association (IxDA) exists to bring together local area designers in all disciplines that overlap with interaction design, whether it be product, digital, space, research, or even business, that strive to create user-centered design solutions. meetup.com/IxDAChicago The Local Leaders
4. Design System A Reflection On the Value We've Delivered In Our First Year
5. The Team Brian Verhoeven
 Design Director, Morningstar Nathan Curtis
 Principal & Founder, EightShapes Kevin Powell
 Senior Front End Developer, EightShapes Brian Bouril
 Senior Software Engineer, Morningstar Adam Rowe
 Senior Visual Designer, Morningstar Johnny Reading
 Senior Visual Designer, Morningstar Alex Hayashi
 Visual Designer, Morningstar James Colvard
 Senior Front End Developer, Morningstar Jack Mystkowski
 Content Strategist, Morningstar Cheng Liu
 Senior Software Engineer, Morningstar Matt Jankowski
 Senior Visual Designer, Morningstar Nadhim Orfali
 Senior Software Engineer, Morningstar
6. System Demonstration 30 min Intermission 10 min System Operations 45 min Q&A 10 min Refreshments
7. The Morningstar Design System is a collection of brand, visual, UX and technical standards built into an HTML & CSS framework so that 60+ products can quickly build accessible, high-quality, consistent experiences.
8. We’re Public! designsystem.morningstar.com
9. “Build something that people want to buy.“ Chief Software Officer
10. Visual Language
11. Visual Language T Y P O G R A P H Y C O L O R I C O N O G R A P H Y B O R D E R S S P A C E L A Y E R I N G Aa
12. Neutrals
13. MUI-Bootstrap Neutrals
14. 0 8 16 20 23 27 28 40 60 75 80 87 92 95 98 100 MUI-Bootstrap Neutrals
15. MDS Neutrals 0 12 20 37 50 67 80 90 95 100
16. MDS & Accessibility
17. Cyan
18. White Text has a Contrast Ratio of 2.73 Cyan…No More
19. Introducing…Interactive Blue
20. More than just buttons • Non-linked text 
 to background contrast ratio minimum 4.5:1 
 // primary-text-light is 16.6:1 • Linked text 
 to background contrast ratio minimum 4.5:1 
 // interactive-text-light 5.3:1 • Non-linked text 
 to linked text contrast ratio minimum 3:1 
 // contrast ratio of 3.2:1 Lorem ipsum dolor sit amet, numquam fabellas sea id, 
 duo nibh dicam luptatum ex. Et eos soleat labore alterum, usu et maiorum incorrupte. No has omnes maiestatis, aeque putant periculis sea te. Has no tantas ridens vidisse. Mel enim idque ornatus cu. No nec error singulis. 
 Affert accusam conclusionemque usu eu, mel accumsan.
21. Now, the Big Reveal…
22. What is a component in MDS?
23. What is a component in MDS? Components are the common pieces of our UI that serve as the building blocks designers and engineers use to construct consistent experiences across Morningstar products.
24. “Include what’s shared, omit what’s not.”
25. Adding new components to the MDS library Consider adding a new component ✔ Team A Team B Team C Team E Team D Team F
26. Adding new components to the MDS library ✘ Team A Team B Team C Team E Team D Team F Don’t add, but reconsider if more need emerges
27. Adding new components to the MDS library Team A Team B Team C Team E Team D Team F MDS Coverage MDS provides the highest shared value
28. How do we ensure quality in components?
29. Process!
32. So, that process?
33. BY Designer, Engineer, Content Strategist USING Word Online 4 [Doc] BY Any Team Member USING Publishing tools and system templates 5 [Publish] 5 Phase Process BY Any Team Member USING Doc, Interviews, Surveys, Audits 1 [Discovery] BY Designer USING Sketch, Invision, etc. 2 [Design] BY Any Team Member (Usually an Engineer) USING HTML, CSS 3 [Build]
34. 5 Phase Process 1 [Discovery] 2 [Design] 3 [Build] 4 [Doc] 5 [Publish]
35. [Discovery]
36. Surveys and Interviews to Gather Requirements
37. Product Audit
38. Create a Template and Start Documentation Early
39. [Design]
40. Building on Emerging Standards
41. Design Iteration
42. Design Iteration
43. Simple Spec
44. Morningstar Designers! Body Text
45. Recurring Open Design and Content Review Meetings Mon Tue Wed Thu Fri Mon Tue Wed Thu Fri Visual Critique (60 min) Visual Critique (60 min) Content Power Hour (60 min) Content Power Hour (60 min) Design Rodeo (60 min)
46. Design review with engineers, too!
47. [Build]
48. In-browser demonstration that covered: • http://designsystem.morningstar.com/sink-pages/components/mastheads.html • http://designsystem.morningstar.com/sink-pages/components/buttons.html • http://designsystem.morningstar.com/sink-pages/components/notifications.html • http://designsystem.morningstar.com/sink-pages/components/data-tables.html • http://designsystem.morningstar.com/sink-pages/components/list-groups.html • http://designsystem.morningstar.com/sink-pages/components/forms.html • http://designsystem.morningstar.com/components/mastheads.html • http://designsystem.morningstar.com/components/site-navigation.html • http://designsystem.morningstar.com/components/steppers.html • http://designsystem.morningstar.com/ux-patterns/navigation.html
49. MDS Sketch Sticker Sheet
50. Consistent Naming and Organization Body Text
51. Deep Symbol Library
52. Craft Library Body Text
53. Craft Library Body Text
55. Charts
56. Charts at Morningstar
57. Chart Taxonomy
58. Chart Structure
59. Chart Standards
60. Chart Standards
61. Morningstar Base Charts
62. Morningstar Base Charts in MDS
63. Project Architecture
64. Constants
65. Constants YAML JSON SCSS LESS
66. Constants
67. Components
68. Components NJK = SCSS = CSS HTML
69. Components NJK SCSS
70. Documentation Components
71. Documentation Components
72. Documentation Components
73. Javascript? JS?
75. JS JS JS JS JS CSS HTML SCSS
77. Preventing Unexpected Changes
78. 60+ products
79. https://xkcd.com/1428/
80. Preventing Unexpected Changes • Rigorous PR review process • Accessibility Guidelines Documented • Browser Support Documented • Visual Diffing!
81. Visual Diffing with BackstopJS 3
82. Visual Diffing with BackstopJS 3
83. Visual Diffing with BackstopJS 3
84. Visual Diffing with BackstopJS 3
85. Visual Diffing with BackstopJS 3
86. Visual Diffing with BackstopJS 3
87. Visual Diffing with BackstopJS 3
88. https://garris.github.io/BackstopJS/
89. Communicating Change
90. SemVer Semantic Versioning http://semver.org v1.10.1
91. SemVer Semantic Versioning http://semver.org v1.10.1 Major (Breaking) Changes
92. SemVer Semantic Versioning http://semver.org v1.10.1 Major (Breaking) Changes Minor Changes
93. SemVer Semantic Versioning http://semver.org v1.10.1 Major (Breaking) Changes Minor Changes Patch Changes
94. SemVer Semantic Versioning Is this a breaking change? Absolutely! Maybe. No Way!
95. http://designsystem.morningstar.com/about/versioning.html
96. SemVer Semantic Versioning Is this a breaking change? Absolutely! No Way!
102. Post 1.0.0 support
103. Regular Releases
104. v1.10.0
105. Intermission
106. System Operations
107. Building a Morningstar Design System, Over Time 2016 2017 2018 Strategy v1.0.0 Release 1.1.0 & Beyond Previous Systems
108. Systems “Strategy” (Pitch) Deck Why Stories Industry Best Practices Approach Scope People & Processes Community Objectives & Key Results
109. Morningstar Design System Objectives 1. Strengthen visual style and UI component to cover more products more flexibly. 2. Document a system – using the system – at a URL accessible & valuable to everyone. 3. Thread system into products incrementally. 4. Amplify sharing across products with a system team as connectors & scribes.
110. Buttons Background Color Border Radius • Color • Font-Size • Font-Weight • Font-Family Margin Margin Padding Default Focus Hover Active Disabled
111. Buttons are Complex Large Small Dark Background, Too
112. Buttons are Expensive Do you really want to calculate this cost? To get inconsistent and incomplete buttons? 1 Developer × 2 Sprints × 30+ Squads
113. Roadmap Planning & Leadership Awareness Q1 Q2 Q3 Q4 Leadership Updates Head of Design, Head of Product, Head of Product Operations, CTO Steering Committee Updates Directors of Design (2), Directors of Engineering (5) Strategic Planning Core Team
 (Multi-Day Onsite) Consisting of
114. Two Week System Team Sprints Fri Mon Tue Wed Thu Fri Sprint Planning (60 min) Mon Tue Wed Thu Release Full Team Critique (60 min) Standup (30 min) Full Team Critique (60 min) Standup (30 min) Mid-Sprint Design Review (60 min) Full Team Critique (60 min) Standup (30 min) Full Team Critique (60 min) Retro (30 min) Sprint Showcase (60 min) Manage Up / Creative Direction Bring your own topic: design, dev, whatever Stakeholders Must Attend Includes grooming
115. Bi-Weekly Sprint Showcases
116. Visual Style & Components SECTION PAGE S/M/L MUI-C? DESIGN BUILD DOC PUBLISH Visual Language Constants N/A N/A ✔ ✔ Color ✔ ✔ ✔ ✔ ✔ Space ✔ ✔ 9 MDS-222 9 MDS-660 Icons ✔ ✔ 8 MDS-659 8 MDS-657 10 MDS-658 Typography ✔ ✔ 8 MDS-37 9 MDS-925 Components Buttons ✔ ✔ ✔ ✔ ✔ ✔ Switch ✔ ✔ ✔ ✔ ✔ Modals ✔ ✔ ✔ ✔ 8 MDS-661 Data Tables ✔ ✔ ✔ ✔ ✔ MDS-588 Tooltips ✔ ✔ ✔ ✔ ✔ MDS-589 List Groups ✔ ✔ ✔ ✔ ✔ ✔ MDS-666 Button Groups ✔ ✔ ✔ ✔ ✔ MDS-665 Links ✔ ✔ MDS-302 ✔ ✔ MDS-669 Notifications ✔ ✔ ✔ ✔ 9 MDS-663 Forms --- ✔ ✔ ✔ ✔ MDS-209 9 MDS-664 Pagination ✔ ✔ ✔ ✔ MDS-288 9 MDS-667 Popovers ✔ ✔ ✔ MDS-214 9 MDS-668 Slider ✔ ✔ ✔ ✔ MDS-295 9 MDS-670 Dialogs ✔ ✔ ✔ MDS-282 9 MDS-671 Search Fields ✔ ✔ ✔ ✔ 9 MDS-862 9 MDS-909 Loader ✔ 8 MDS-278 9 MDS-286 9 MDS-675 Dropdown ✔ ✔ 8 MDS-267 9 MDS-283 9 MDS-672 Combo Box ✔ 9 MDS-274 9 MDS-281 10 MDS-926
117. Visual Style & Components SECTION PAGE S/M/L MUI-C? DESIGN BUILD DOC PUBLISH Visual Language Constants N/A N/A ✔ ✔ Color ✔ ✔ ✔ ✔ ✔ Space ✔ ✔ ✔ ✔ MDS-660 Icons ✔ ✔ ✔ MDS-657 MDS-658 Typography ✔ ✔ MDS-37 MDS-925 Components Buttons ✔ ✔ ✔ ✔ ✔ ✔ Switch ✔ ✔ ✔ ✔ ✔ Data Tables ✔ ✔ ✔ ✔ ✔ Tooltips ✔ ✔ ✔ ✔ ✔ List Groups ✔ ✔ ✔ ✔ ✔ ✔ Button Groups ✔ ✔ ✔ ✔ ✔ Links ✔ ✔ ✔ ✔ Pagination ✔ ✔ ✔ ✔ ✔ Popovers ✔ ✔ ✔ ✔ Slider ✔ ✔ ✔ ✔ ✔ Modals ✔ ✔ ✔ ✔ ✔ MDS-661 Forms --- ✔ ✔ ✔ ✔ ✔ MDS-664 Search Fields ✔ ✔ ✔ ✔ ✔ ✔ MDS-909 Loader ✔ ✔ ✔ ✔ MDS-675 Notifications ✔ ✔ ✔ ✔ MDS-663 Dialogs ✔ ✔ ✔ MDS-671 Combo Box ✔ ✔ MDS-274 ✔ MDS-281 MDS-926 Dropdown ✔ ✔ MDS-267 ✔ MDS-283 MDS-672
118. Visual Style & Components SECTION PAGE S/M/L MUI-C? DESIGN BUILD DOC PUBLISH Visual Language Constants N/A N/A ✔ ✔ Color ✔ ✔ ✔ ✔ ✔ Space ✔ ✔ ✔ ✔ Icons ✔ ✔ ✔ ✔ MDS-658 Typography ✔ ✔ ✔ ✔ Components Buttons ✔ ✔ ✔ ✔ ✔ ✔ Switch ✔ ✔ ✔ ✔ ✔ Data Tables ✔ ✔ ✔ ✔ ✔ Tooltips ✔ ✔ ✔ ✔ ✔ List Groups ✔ ✔ ✔ ✔ ✔ ✔ Button Groups ✔ ✔ ✔ ✔ ✔ Links ✔ ✔ ✔ ✔ Pagination ✔ ✔ ✔ ✔ ✔ Popovers ✔ ✔ ✔ ✔ Slider ✔ ✔ ✔ ✔ ✔ Modals ✔ ✔ ✔ ✔ ✔ Forms --- ✔ ✔ ✔ ✔ ✔ Search Fields ✔ ✔ ✔ ✔ ✔ ✔ Loader ✔ ✔ ✔ ✔ Notifications ✔ ✔ ✔ ✔ ✔ Dialogs ✔ ✔ ✔ ✔ Combo Box ✔ ✔ ✔ ✔ Menus ✔ ✔ ✔ ✔ ✔
119. Themes Before & After 1.0 UP TO 1.0 AFTER 1.0 Priority New Feature Priority New Feature Priority New Feature Maintain and Enhance Maintain and Enhance Community Development
120. http://designsystem.morningstar.com/
121. MDS 60+ Adopting Product Squads
122. How to Adopt? “You choose…” ✅✅✅◻◻ Big Bang
 (All at once) Incremental
 (One story at a time)
123. Step-by-Step Adoption Model 1
 Dependency 
 & Plan 2
 Visual
 Language 3
 Priority
 Components 4
 Full
 Adoption 0
 Non-
 Adopter Branding / visual identity is out of date Product is obviously not complying with system Interface is dated and inconsistent with latest conventions Codebase has system npm dependency Team has compiled, tuned, & organized systems assets for integration & extension Team can demonstrate adoption commitment via roadmap & backlog Color Typography Icons Replaced variables and rules via constants Buttons Forms: Checkboxes, Radios, Text, Select Switches Headings, Article Text Data Tables (Basic) List Groups Data Tables Modals Dialogs Pills Adopted every relevant component offered No more than 9 months behind latest release No more than 6 months behind latest release No more than 3 months behind latest release A N D A N D A N D
124. Monitor Adoption Commitment & Timing, by Product 60+ rows!
125. MDS Adoption Status, Early September 2017 PRODUCT MANAGER PRODUCTS CONTACT(S) PRODUCTS BY ADOPTION LEVEL, BY 12/2017 Person Name Product Name Met in August, Roadmapping 1 2 5 Direct Report Product Name Roadmapping 3 1 Direct Report Product Name Meeting pending 2 Direct Report Product Name No contact yet 1 Direct Report Product Name No contact yet 1 Person Name Product Name Met in August 1 1 Person Name Product Name Met in August 2 1 1 Person Name Product Name Met in August 1 1 Person Name Product Name Met in August 2 1 Person Name Product Name Met in August 4 4 Direct Report Product Name Contact in SlackHQ 1 Direct Report Product Name No contact yet Person Name Product Name Coordinated Unknown Non-Adopter Plan & Dependency Visual Style Core Components Full Adoption
126. Business Unit PRODUCT BY DEC 2017 BY JUNE 2018 Product A Visual Style Full Adoption Product B Plan & Dependency Full Adoption Product C Non-Adopter Non-Adopter Product D Non-Adopter Non-Adopter Strong, demonstrated plan & commitment Full adoption by priority products mid-2018 Brand new features are easier to migrate Incomplete plans / lack of visibility of if/when across other products
127. Consolidating Libraries & Teams
128. 2017 2015 2016 MDS MUI-Bootstrap For a Flagship Product &
 “Whoever Else Wants It” Mad Hatter For a Flagship Product For Everyone
129. Emergent Design & Engineering Collaboration MUI-B (Bootstrap) Code MUI Sticker Sheet +
130. MUI-Bootstrap (MUI-B) Shortcomings Minimal Doc Accessibility Issues Out-of-Date Visual Language
131. CSS Methodology <button class="btn btn-primary”> Label </button> <button class="mds-button mds-button--primary"> Label </button> Bootstrap CSS BEM
132. January 25, 2017 at 2pm Rebuild from the ground up, the right way. Let’s do this. For everyone.” “
133. Lead Product Design working on Flagship Product January 25, 2017 at 4pm So, there’s this other library that a team in London is making. It’ll come sooner, so we may adopt that instead. As may others.“ “
134. MUI-Components, a BEM-based MUI-B for London Teams MUI-B MUI-C (by the “London Team”)
135. MUI-Bootstrap Adopter No Design System Yet MDS
136. MDS MUI-C MUI-Bootstrap Adopter No Design System Yet
137. MDS MUI-C MUI-Bootstrap Adopter No Design System Yet
139. Options to Handle the MDS & MUI-C Competition 1. Put our heads down. Make MDS awesome. Hope for the best. 2. Marketing blitz! Communicate that MDS is the future, not MUI-C. 3. Complain to leadership to shut down MDS or MUI-C. 4. Live with two libraries: some use MDS, others use MUI-C.
140. ☎ Option 5: Pick up the phone
141. All Roads Lead to MDS MUI-B Code MUI-C Code TO BE
 RETIRED TO BE
 STOPPED MDS Code Migrate Merge Efforts
142. Who is the MDS Team? Body Text Portland Nashville Washington London Chicago
143. Implications of Combining MDS & MUI-C Efforts 1. Agreed approach for a unified, Morningstar-wide source-of-truth. 2. Removed redundant services/cost. 3. Improved lack-of-bias for teams to build for more / all teams. 4. Increased capacity to make & doc more than either would have alone. Opportunities 1. Delivery timing / urgency 2. Revisiting tooling and approach (code style, conventions, etc) 3. Rituals across Europe and US Challenges
144. Limited Capacity Prior to MDS Designers Engineers Leaders Content PjM PdM 8S 2016 100% 50% 8S
145. To Get to 1.0 by July 1, the Squad Formed Designers Engineers Leaders Content PjM PdM 8S 2017Q1/2 100% 50% 2016 100% 50% 8S
146. After 1.0, Design Increased, Yet Engineering Declined Designers Engineers Leaders Content PjM PdM 8S 2017Q1/2 2017Q3/4 2016 100% 50% 100% 50% 100% 50% 8S NEW NEW
147. Into 2018, Gradual Change (and a Content Gap) Designers Engineers Leaders Content PjM PdM 8S 2018Q1/2 2017Q1/2 2017Q3/4 2016 100% 50% 100% 50% 100% 50% 100% 50% 8S NEW NEW NEW
148. Who is the MDS Team? Nashville Washington London Chicago
149. Iconography Segment & Owners Throughout the Design Community Visual Style UI Components UX Patterns Editorial Voice & Tone Accessibility Brand Charts Nathan Leahigh Irena Svidovsky Katie Wolf Adam Rowe Jonathan Duncan Jack Mystkowski Jason Ackley Matt Jankowski
150. Presenter Contact Info Brian Verhoeven
 Design Director, Morningstar brianverhoeven Nathan Curtis
 Principal & Founder, EightShapes nathanacurtis @nathanacurtis Kevin Powell
 Senior Front End Developer, EightShapes kevinmpowell Brian Bouril
 Senior Software Engineer, Morningstar brianbouril Adam Rowe
 Senior Visual Designer, Morningstar admrwe Matt Jankowski
 Senior Visual Designer, Morningstar Alex Hayashi
 Visual Designer, Morningstar ajyhayashi
151. Thanks!