Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Morningstar Design System at Chicago Design System Meetup January 2018

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

Brian Verhoeven

January 24, 2018
Tweet

More Decks by Brian Verhoeven

Other Decks in Technology

Transcript

  1. None
  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
  3. None
  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!

  30. None
  31. None
  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

  54. None
  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?

  74. None
  75. JS JS JS JS JS CSS HTML SCSS

  76. None
  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!
  97. None
  98. None
  99. None
  100. None
  101. None
  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

  138. None
  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!

  152. None
  153. None