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. 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
  2. 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
  3. 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.
  4. 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
  5. 0 8 16 20 23 27 28 40 60 75

    80 87 92 95 98 100 MUI-Bootstrap Neutrals
  6. 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.
  7. 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.
  8. Adding new components to the MDS library Consider adding a

    new component ✔ Team A Team B Team C Team E Team D Team F
  9. 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
  10. 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
  11. 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]
  12. 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)
  13. 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
  14. Preventing Unexpected Changes • Rigorous PR review process • Accessibility

    Guidelines Documented • Browser Support Documented • Visual Diffing!
  15. Building a Morningstar Design System, Over Time 2016 2017 2018

    Strategy v1.0.0 Release 1.1.0 & Beyond Previous Systems
  16. Systems “Strategy” (Pitch) Deck Why Stories Industry Best Practices Approach

    Scope People & Processes Community Objectives & Key Results
  17. 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.
  18. Buttons Background Color Border Radius • Color • Font-Size •

    Font-Weight • Font-Family Margin Margin Padding Default Focus Hover Active Disabled
  19. Buttons are Expensive Do you really want to calculate this

    cost? To get inconsistent and incomplete buttons? 1 Developer × 2 Sprints × 30+ Squads
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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 ✔ ✔ ✔ ✔ ✔
  25. 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
  26. 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
  27. 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
  28. 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
  29. 2017 2015 2016 MDS MUI-Bootstrap For a Flagship Product &


    “Whoever Else Wants It” Mad Hatter For a Flagship Product For Everyone
  30. January 25, 2017 at 2pm Rebuild from the ground up,

    the right way. Let’s do this. For everyone.” “
  31. 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.“ “
  32. 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.
  33. All Roads Lead to MDS MUI-B Code MUI-C Code TO

    BE
 RETIRED TO BE
 STOPPED MDS Code Migrate Merge Efforts
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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