Adopting MDS

The Design System is flexible and allows for progressive adoption by product teams. The MDS team monitors adoption across the Morningstar product portfolio by tracking product progress across steps.

Steps

The Design System is adopted per product across gradual steps in priority order. These steps serve as milestones to track adoption across all products no matter the pace of an individual product team.

Step	Criteria
Step 0 Non Adopter	Branding / visual language is out of date. Product is obviously not complying with System. Interface is dated and inconsistent with latest conventions.
Step 1 Plan & Dependency	Codebase has system NPM dependency. Team has compiled, tuned, and organized System assets for integration and extension. Team shows adoption commitment via roadmap and backlog.
Step 2 Visual Language	Color Typography Icons Constants applied to non-MDS components. No more than 9 months behind latest release
Step 3 Priority Components	Buttons Forms: Checkboxes, Radios, Text, Select Switches Data Tables List Groups No more than 6 months behind latest release
Step 4 Full Adoption	Team has adopted every relevant UI component, including: Modals Dialogs Notifications No more than 3 months behind latest release

Planning

Approaches

Product teams tend to adopt a design system’s UI Component library using one of two approaches:

Big Bang: Across several sprints, a product team stops all other work to remove an old system and install the Morningstar Design System. This concentrated period slows a product’s work on new features, defects, and optimizations, but it cleanly and quickly applies the Design System so that a product can move forward confident that adoption is complete.
Incremental: Due to existing commitments and competing priorities, a product team may choose to adopt MDS over a longer period of time. As such, the team may fold in tasks of replacing existing product features with MDS features alongside other work. Adoption steps tied to specific dates or sprints can provide a helpful barometer of intermediate goals and also help teams understand in what order MDS features should be adopted.

Working With the MDS Team

When considering adoption, contact the MDS team at [email protected] to schedule time to discuss your objectives and approach. This collaborative conversation will help you identify the following for your product’s adoption:

Approach: Will it be a “Big Bang” or “Incremental” adoption of the System?
Timing: When might you start design and engineering work (potentially need more support) and complete the adoption process?
Priorities: What MDS features are most relevant to your product? Knowing this will help the MDS team to recommend effective techniques and shortcuts for planning and breaking down the work.
Depth: Not every MDS feature may be relevant or feasible to integrate into your product. What are the priorities and/or limitations?
Customization: How can you extend MDS to suit your product’s needs, and are any of those extensions relevant for the MDS team to support within the library itself?

Link Template