Morningstar speeds up content delivery with Contentstack's headless CMS

Morningstar needed a CMS able to handle complex content that doesn’t fit into the traditional, documentoriented structure. The “Our Picks” list, for example, is a type of content that the company distributes. It contains an analyst’s writing on a theme such as “undervalued stocks in the energy sector,” a structured list of securities (stocks, bonds, options, etc.), financial identifiers of those securities, and supplemental content like PDFs.

“We were able to bring all those pieces together right inside a structured Contentstack type,” said Clay Gregory, principal architect at Morningstar. “Preserving the structure of the pieces, and not having to flatten out content into a prerendered document, enables us to enrich content with real-time data.

Decentralized business with centralized tooling

Morningstar offers a wide range of investment products and services, which can be found at morningstar.com/products. Each product team makes many of its own technology and business decisions in a decentralized approach, but there are also centralized tools that hold data and content used by multiple products.

“Contentstack has really helped us in the last mile aspect of content orchestration,” Gregory said. “The API-first structure of Contentstack makes it easy to pull in information from various sources and package it in the best way for each product.”

Product teams can control the assets, data, and settings of their independent “stack” of content, while overarching Contentstack infrastructure like users, permissions, and single sign-on can be shared across the organization.

Headless flexibility

“Previously, we were building the products over a CMS rather than integrating content into the product,” Gregory said. “With Contentstack, we didn’t want to recreate what we already had. We wanted to take full advantage of the headless space to build out the structures, input mechanisms, and editing experience that best suits the content at hand.”

Contentstack’s headless architecture also helped the team efficiently transition off the old solution. “Being headless means that not only is it API out, it’s also API in,” Gregory explained. “So it’s very easy to run a batch job and load content from the old system into a new content type in Contentstack.”

Cloud-native performance

The move to Contentstack is part of Morningstar’s wider transition to a cloud-based architecture. This includes using the Nuxt.js framework (a Vue.js variant) to build the front-end experience, adopting edge computing, and the wide use of AWS Lambda to run efficient, event-driven functions.

“Integrating a headless CMS into our cloud-native approach allowed us to really optimize edge delivery of a lot of our content,” Gregory said. “Render times are five times faster when compared to our legacy CMS.”

Rapid developer adoption

Many of Morningstar’s financial products are browser-based, as is Contentstack’s editing experience. This allows developers to use the same, familiar tools to work with the CMS that they use to build their own software products.

“Building with Contentstack feels like a natural extension of our existing product development,” Gregory said.

Powerful tools for editors

“Content editors now have modern tooling to do their work,” Gregory said. “We’ve been able to build professional, polished solutions that support their automation needs, their content enrichment needs, and give them a far richer user experience than they had before.”

For example, publishing the “Our Picks” list used to be a multiday process that involved many different people logging into multiple systems. Now, Gregory said, “One person can go into a single UI and select the securities they want, enrich that with input from different systems, hit publish, and it’s live within a matter of minutes. That’s revolutionized how we deliver that content to users.”