MLS App Re-Design

Product Design, Design System
Released May 2018 // View Live

MLS-Featured2.jpg

As one of the top professional sports leagues in North America, Major League Soccer features 24 unique and distinct Clubs, all captivating fans both inside and outside the stadium walls. The spirit of the re-designed MLS app was to be the platform in which the Clubs are the spotlight. The simple truth is that fans fall in love with their favorite Club, not the league. To support this, our goal was to surface Club content to create a deeper fan experience, and also to facilitate personalization and curation so our fans always had the best-in-class content at their fingertips.

key Challenges

  • Discover ways to make the MLS app the preferred destination to consume all things MLS

  • Balance user goals, insights, and business objectives to create a holistic product

  • Increase fan engagement and bring more focus to the action


  • Define, maintain, and extend a core Design System for the app and other digital touch points


 

One of our biggest challenges upfront was to establish the first digital Design System at MLS. There was no formalized system outside of branded campaigns and foundational design elements, so we took this as a huge opportunity to not only make a big impact on the app re-design, but to really set the standards for our digital products. We created a bold and flexible Design System that works across all products and platforms, starting with our brand new mobile app.

 

Another early initiative was to better align and serve the fans who will be using this product. By combining pre-existing soccer data from our analytics team with some user research of our own, we were able to gain insight and begin to focus our goals around our primary target audience. We elaborated on this research through more in-depth persona building which was key for us as we got into problem solving and feature strategy.

Grid-process3.jpg

Since Clubs serve as the catalyst to building up and maintaining a majority of our user base, it was important that Club representation was pronounced. We embraced the spirit of their loud and vibrant colors and created a system of our own that distinctly themed each Club in the app.


From core content screens to utility screens, it was essential to keep the design simple and repeatable so it was intuitive and light weight for our fan’s daily engagement. It also enhanced overall consistency as well as development velocity which spanned across a wide variety of screens and features. Throughout this project, we constantly iterated and simplified our component library, regularly shared and improved on our Component Kits, and supported an open dialogue to always push on our processes and efficiencies. This was really successful for our very new, and very small team (which I wrote about in length here.)

Component-Kit.jpg
Overview.jpg
Group-3.jpg

Opportunities for fans to tailor a personalized experience went far beyond onboarding. We designed several access points to help fans manage their Followed Topics, set notifications, discover new content, and adjust scores preferences so they could get exactly what they wanted. We payed special attention to match day (and the days surrounding it) and what that meant to our users since it’s historically our highest engagement periods. This not only effected our decisions around content delivery in core areas in the app, but also made us take a hard look at match center to ensure we understood it’s fundamental purpose and biggest challenges. Putting simplicity and performance first, defining primary and secondary user objectives, and delivering information and video to the users effectively got them as close to the field as possible.

SupportScreens-Settings.jpg
Group-4.jpg
Group-5.jpg