Major League Soccer

The platform integrates with the majority of MLS properties, including Opta stats, MatchCenter live game stats, and the league’s large library of video content. As a result, fans encounter a streamlined experience with all the multimedia content they’re looking for each time they visit a league or club site.

Working with a blended group of Phase2 team members and MLS technical teams, we created a large Drupal platform that would establish consistency in the code base and data sources while still allowing each team to create a distinct identity. As a result, each team site’s design cohesively fits within MLS’s digital brand despite differences in colors, images, and styles.

Delighting the MLS fanbase was a priority throughout the project. Each team’s site maintainers can easily configure their team’s instance to best fit their technical capabilities. At the same time, we enhanced fans’ ability to enjoy their favorite sport from any device.

When MLS launched its Leagues Cup and Campeones Cup tournaments, the organization demanded the same qualities from the new competition’s digital presence as well.

To achieve this vision, Phase2 looked outside of the league’s existing Drupal CMS tech stack to come up with an innovative solution that met a number of competing demands. Using a combination of Netlify, a lightweight CMS, and Gatsby, a front-end site generator, Phase2 struck the perfect balance of speedy delivery, site performance, fan experience, and cost-efficiency.

Although structurally lightweight, the two sites have to pack a serious technical punch. Match scores, brackets, and live updates, for instance, are fed to the front-end by the MLS Stats API, while sponsorship and digital ads are taken care of via an integration with the league’s ad-tech platforms. On the back-end, Salesforce integration enables the collection and storage of fan information, and Google Analytics tracking allows MLS to keep tabs on site performance and optimization data. In addition, both sites are set up to handle both English and Spanish languages, catering to the league’s diverse fan base.

Netlify, a serverless platform/CMS based on the JAMstack, is the ideal choice for MLS. With a simplified developer workflow and automatic deploys for commits, it promotes fast, secure, and efficient feature development. Choosing Netlify also gives MLS the benefits of a fully featured CMS with traditional editorial capabilities, and some new features too. With Netlify, editors now have side-by-side previews built-in, giving them a 1:1 view of what a page will look like before publishing it to the web.

For lightning-fast page loads Phase2 paired Netlify with Gatsby, a React-based site generator that only loads the necessary HTML, CSS, and JavaScript files. With Gatsby Themes, developers are also able to increase code reuse between the two tournament sites for a faster and cleaner development process.
 

Every January, Major League Soccer holds its SuperDraft, where teams choose players to join them. To support this major event in the MLS calendar, we built a live-updating draft tracker page, including a live streaming video feed, that generates and supports a huge amount of traffic for MLS.

In addition, we also added:

• Integrated Twitter feeds into the homepage to involve a community that wasn’t previously integrated into the website
• Threaded commenting on articles/videos on all sites as a great way for fans to communicate and respond
• Scoreboard live updates during matches
• Flexible homepages that allow clubs to display any content they want in many different formats on the front page so that they can put the most relevant and interesting content front and center on any given day.
   

A thorough evaluation of the MLS cloud infrastructure revealed a number of opportunities to enhance the performance of the MLS and Phase2 teams, providing code and content to the community.

By optimizing the codebase - both in changing the way that functional requirements are realized, and in streamlining the way that code is organized - MLS and Phase2 reduced cycle times from sprint planning to production deployment and increased the velocities of their development teams.
Phase2's InfraOps team led the effort to modernize and secure the Kubernetes systems that host the digital platform's services -- hundreds of application containers running in dozens of Kubernetes hosts placed in multiple geographic regions.

DevOps practices, such as implementing infrastructure as code (IAC), enabled the disciplined and orderly management of these complex assets, providing repeatable and auditable provisioning of resources across multiple environments. IAC, along with other open source tools, provided disaster recovery capabilities that could be exemplified by being able to re-provision a major piece of a Kubernetes cluster during business hours with zero downtime.

Application and infrastructure monitoring technologies provide an ongoing read of the platform and its components, presenting MLS and Phase2 with realtime views that synthesized events from multiple, related elements for optimization and troubleshooting needs.

The synthesis of these tools and practices resulted in the continuous and fluid orchestration of the MLS digital platform's component elements, seamlessly allocating and re-allocating pods and deployments among nodes as site traffic increased. As the MLS Is Back event marked the return to play since the start of the COVID lockdowns, the expertly engineered digital platform met and surpassed the demands of the soccer community re-engaging with the sport in what was literally the only game in town, or at least on TV.

With the solutions engineered by Phase2, MLS is poised to continue its growth as a leader in sports and offer its fanbase the best digital fan experience possible.

Major League Soccer (MLS) is a professional soccer league representing the sport's highest level in both the United States and Canada. Since its initial season in 1996, the league has expanded to include 26 teams - 23 in the U.S. and 3 in Canada.