Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Design System A Reflection On the Value We've Delivered In Our First Year

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

System Demonstration 30 min Intermission 10 min System Operations 45 min Q&A 10 min Refreshments

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

We’re Public! designsystem.morningstar.com

Slide 9

Slide 9 text

“Build something that people want to buy.“ Chief Software Officer

Slide 10

Slide 10 text

Visual Language

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Neutrals

Slide 13

Slide 13 text

MUI-Bootstrap Neutrals

Slide 14

Slide 14 text

0 8 16 20 23 27 28 40 60 75 80 87 92 95 98 100 MUI-Bootstrap Neutrals

Slide 15

Slide 15 text

MDS Neutrals 0 12 20 37 50 67 80 90 95 100

Slide 16

Slide 16 text

MDS & Accessibility

Slide 17

Slide 17 text

Cyan

Slide 18

Slide 18 text

White Text has a Contrast Ratio of 2.73 Cyan…No More

Slide 19

Slide 19 text

Introducing…Interactive Blue

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

Now, the Big Reveal…

Slide 22

Slide 22 text

What is a component in MDS?

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

“Include what’s shared, omit what’s not.”

Slide 25

Slide 25 text

Adding new components to the MDS library Consider adding a new component ✔ Team A Team B Team C Team E Team D Team F

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

How do we ensure quality in components?

Slide 29

Slide 29 text

Process!

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

So, that process?

Slide 33

Slide 33 text

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]

Slide 34

Slide 34 text

5 Phase Process 1 [Discovery] 2 [Design] 3 [Build] 4 [Doc] 5 [Publish]

Slide 35

Slide 35 text

[Discovery]

Slide 36

Slide 36 text

Surveys and Interviews to Gather Requirements

Slide 37

Slide 37 text

Product Audit

Slide 38

Slide 38 text

Create a Template and Start Documentation Early

Slide 39

Slide 39 text

[Design]

Slide 40

Slide 40 text

Building on Emerging Standards

Slide 41

Slide 41 text

Design Iteration

Slide 42

Slide 42 text

Design Iteration

Slide 43

Slide 43 text

Simple Spec

Slide 44

Slide 44 text

Morningstar Designers! Body Text

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

Design review with engineers, too!

Slide 47

Slide 47 text

[Build]

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

MDS Sketch Sticker Sheet

Slide 50

Slide 50 text

Consistent Naming and Organization Body Text

Slide 51

Slide 51 text

Deep Symbol Library

Slide 52

Slide 52 text

Craft Library Body Text

Slide 53

Slide 53 text

Craft Library Body Text

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Charts

Slide 56

Slide 56 text

Charts at Morningstar

Slide 57

Slide 57 text

Chart Taxonomy

Slide 58

Slide 58 text

Chart Structure

Slide 59

Slide 59 text

Chart Standards

Slide 60

Slide 60 text

Chart Standards

Slide 61

Slide 61 text

Morningstar Base Charts

Slide 62

Slide 62 text

Morningstar Base Charts in MDS

Slide 63

Slide 63 text

Project Architecture

Slide 64

Slide 64 text

Constants

Slide 65

Slide 65 text

Constants YAML JSON SCSS LESS

Slide 66

Slide 66 text

Constants

Slide 67

Slide 67 text

Components

Slide 68

Slide 68 text

Components NJK = SCSS = CSS HTML

Slide 69

Slide 69 text

Components NJK SCSS

Slide 70

Slide 70 text

Documentation Components

Slide 71

Slide 71 text

Documentation Components

Slide 72

Slide 72 text

Documentation Components

Slide 73

Slide 73 text

Javascript? JS?

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

JS JS JS JS JS CSS HTML SCSS

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Preventing Unexpected Changes

Slide 78

Slide 78 text

60+ products

Slide 79

Slide 79 text

https://xkcd.com/1428/

Slide 80

Slide 80 text

Preventing Unexpected Changes • Rigorous PR review process • Accessibility Guidelines Documented • Browser Support Documented • Visual Diffing!

Slide 81

Slide 81 text

Visual Diffing with BackstopJS 3

Slide 82

Slide 82 text

Visual Diffing with BackstopJS 3

Slide 83

Slide 83 text

Visual Diffing with BackstopJS 3

Slide 84

Slide 84 text

Visual Diffing with BackstopJS 3

Slide 85

Slide 85 text

Visual Diffing with BackstopJS 3

Slide 86

Slide 86 text

Visual Diffing with BackstopJS 3

Slide 87

Slide 87 text

Visual Diffing with BackstopJS 3

Slide 88

Slide 88 text

https://garris.github.io/BackstopJS/

Slide 89

Slide 89 text

Communicating Change

Slide 90

Slide 90 text

SemVer Semantic Versioning http://semver.org v1.10.1

Slide 91

Slide 91 text

SemVer Semantic Versioning http://semver.org v1.10.1 Major (Breaking) Changes

Slide 92

Slide 92 text

SemVer Semantic Versioning http://semver.org v1.10.1 Major (Breaking) Changes Minor Changes

Slide 93

Slide 93 text

SemVer Semantic Versioning http://semver.org v1.10.1 Major (Breaking) Changes Minor Changes Patch Changes

Slide 94

Slide 94 text

SemVer Semantic Versioning Is this a breaking change? Absolutely! Maybe. No Way!

Slide 95

Slide 95 text

http://designsystem.morningstar.com/about/versioning.html

Slide 96

Slide 96 text

SemVer Semantic Versioning Is this a breaking change? Absolutely! No Way!

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Post 1.0.0 support

Slide 103

Slide 103 text

Regular Releases

Slide 104

Slide 104 text

v1.10.0

Slide 105

Slide 105 text

Intermission

Slide 106

Slide 106 text

System Operations

Slide 107

Slide 107 text

Building a Morningstar Design System, Over Time 2016 2017 2018 Strategy v1.0.0 Release 1.1.0 & Beyond Previous Systems

Slide 108

Slide 108 text

Systems “Strategy” (Pitch) Deck Why Stories Industry Best Practices Approach Scope People & Processes Community Objectives & Key Results

Slide 109

Slide 109 text

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.

Slide 110

Slide 110 text

Buttons Background Color Border Radius • Color • Font-Size • Font-Weight • Font-Family Margin Margin Padding Default Focus Hover Active Disabled

Slide 111

Slide 111 text

Buttons are Complex Large Small Dark Background, Too

Slide 112

Slide 112 text

Buttons are Expensive Do you really want to calculate this cost? To get inconsistent and incomplete buttons? 1 Developer × 2 Sprints × 30+ Squads

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

Bi-Weekly Sprint Showcases

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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 ✔ ✔ ✔ ✔ ✔

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

http://designsystem.morningstar.com/

Slide 121

Slide 121 text

MDS 60+ Adopting Product Squads

Slide 122

Slide 122 text

How to Adopt? “You choose…” ✅✅✅◻◻ Big Bang
 (All at once) Incremental
 (One story at a time)

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

Monitor Adoption Commitment & Timing, by Product 60+ rows!

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

Consolidating Libraries & Teams

Slide 128

Slide 128 text

2017 2015 2016 MDS MUI-Bootstrap For a Flagship Product &
 “Whoever Else Wants It” Mad Hatter For a Flagship Product For Everyone

Slide 129

Slide 129 text

Emergent Design & Engineering Collaboration MUI-B (Bootstrap) Code MUI Sticker Sheet +

Slide 130

Slide 130 text

MUI-Bootstrap (MUI-B) Shortcomings Minimal Doc Accessibility Issues Out-of-Date Visual Language

Slide 131

Slide 131 text

CSS Methodology Label Bootstrap CSS BEM

Slide 132

Slide 132 text

January 25, 2017 at 2pm Rebuild from the ground up, the right way. Let’s do this. For everyone.” “

Slide 133

Slide 133 text

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.“ “

Slide 134

Slide 134 text

MUI-Components, a BEM-based MUI-B for London Teams MUI-B MUI-C (by the “London Team”)

Slide 135

Slide 135 text

MUI-Bootstrap Adopter No Design System Yet MDS

Slide 136

Slide 136 text

MDS MUI-C MUI-Bootstrap Adopter No Design System Yet

Slide 137

Slide 137 text

MDS MUI-C MUI-Bootstrap Adopter No Design System Yet

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

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.

Slide 140

Slide 140 text

☎ Option 5: Pick up the phone

Slide 141

Slide 141 text

All Roads Lead to MDS MUI-B Code MUI-C Code TO BE
 RETIRED TO BE
 STOPPED MDS Code Migrate Merge Efforts

Slide 142

Slide 142 text

Who is the MDS Team? Body Text Portland Nashville Washington London Chicago

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

Limited Capacity Prior to MDS Designers Engineers Leaders Content PjM PdM 8S 2016 100% 50% 8S

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

Who is the MDS Team? Nashville Washington London Chicago

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

Thanks!

Slide 152

Slide 152 text

No content

Slide 153

Slide 153 text

No content