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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. We’re Public!
    designsystem.morningstar.com

    View full-size slide

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

    View full-size slide

  8. Visual Language

    View full-size slide

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

    View full-size slide

  10. MUI-Bootstrap Neutrals

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. MDS & Accessibility

    View full-size slide

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

    View full-size slide

  15. Introducing…Interactive Blue

    View full-size slide

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

    View full-size slide

  17. Now, the Big Reveal…

    View full-size slide

  18. What is a component in MDS?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Adding new components to the MDS library
    Consider adding a
    new component

    Team A Team B
    Team C
    Team E
    Team D
    Team F

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. How do we ensure quality in components?

    View full-size slide

  25. So, that process?

    View full-size slide

  26. 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]

    View full-size slide

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

    View full-size slide

  28. Surveys and Interviews to Gather Requirements

    View full-size slide

  29. Product Audit

    View full-size slide

  30. Create a Template and Start Documentation Early

    View full-size slide

  31. Building on Emerging Standards

    View full-size slide

  32. Design Iteration

    View full-size slide

  33. Design Iteration

    View full-size slide

  34. Morningstar Designers!
    Body Text

    View full-size slide

  35. 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)

    View full-size slide

  36. Design review with engineers, too!

    View full-size slide

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

    View full-size slide

  38. MDS Sketch Sticker Sheet

    View full-size slide

  39. Consistent Naming and Organization
    Body Text

    View full-size slide

  40. Deep Symbol Library

    View full-size slide

  41. Craft Library
    Body Text

    View full-size slide

  42. Craft Library
    Body Text

    View full-size slide

  43. Charts at Morningstar

    View full-size slide

  44. Chart Taxonomy

    View full-size slide

  45. Chart Structure

    View full-size slide

  46. Chart Standards

    View full-size slide

  47. Chart Standards

    View full-size slide

  48. Morningstar Base Charts

    View full-size slide

  49. Morningstar Base Charts in MDS

    View full-size slide

  50. Project Architecture

    View full-size slide

  51. Constants
    YAML JSON
    SCSS LESS

    View full-size slide

  52. Components
    NJK =
    SCSS = CSS
    HTML

    View full-size slide

  53. Components
    NJK SCSS

    View full-size slide

  54. Documentation Components

    View full-size slide

  55. Documentation Components

    View full-size slide

  56. Documentation Components

    View full-size slide

  57. Javascript?
    JS?

    View full-size slide

  58. JS JS JS JS JS
    CSS
    HTML
    SCSS

    View full-size slide

  59. Preventing Unexpected Changes

    View full-size slide

  60. 60+ products

    View full-size slide

  61. https://xkcd.com/1428/

    View full-size slide

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

    View full-size slide

  63. Visual Diffing with BackstopJS 3

    View full-size slide

  64. Visual Diffing with BackstopJS 3

    View full-size slide

  65. Visual Diffing with BackstopJS 3

    View full-size slide

  66. Visual Diffing with BackstopJS 3

    View full-size slide

  67. Visual Diffing with BackstopJS 3

    View full-size slide

  68. Visual Diffing with BackstopJS 3

    View full-size slide

  69. Visual Diffing with BackstopJS 3

    View full-size slide

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

    View full-size slide

  71. Communicating Change

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  79. Post 1.0.0
    support

    View full-size slide

  80. Regular
    Releases

    View full-size slide

  81. Intermission

    View full-size slide

  82. System Operations

    View full-size slide

  83. Building a Morningstar Design System, Over Time

    2016 2017 2018
    Strategy v1.0.0 Release 1.1.0 & Beyond
    Previous Systems

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. Buttons are Complex
    Large Small
    Dark Background, Too

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  91. Bi-Weekly Sprint Showcases

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  96. http://designsystem.morningstar.com/

    View full-size slide

  97. MDS
    60+ Adopting Product Squads

    View full-size slide

  98. How to Adopt? “You choose…”

    ✅✅✅◻◻
    Big Bang

    (All at once)
    Incremental

    (One story at a time)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  103. Consolidating Libraries & Teams

    View full-size slide

  104. 2017
    2015 2016
    MDS
    MUI-Bootstrap
    For a Flagship Product &

    “Whoever Else Wants It”
    Mad Hatter
    For a Flagship Product For Everyone

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  107. CSS Methodology

    Label

    Bootstrap CSS
    BEM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  111. MUI-Bootstrap Adopter No Design System Yet
    MDS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  115. Option 5: Pick up the phone

    View full-size slide

  116. All Roads Lead to MDS
    MUI-B Code
    MUI-C Code
    TO BE

    RETIRED
    TO BE

    STOPPED
    MDS Code
    Migrate
    Merge
    Efforts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  123. Who is the MDS Team?
    Nashville
    Washington
    London
    Chicago

    View full-size slide

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

    View full-size slide

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

    View full-size slide