MLS App Design

MLS-Featured2.jpg

details

Released May 2018 / View Live


ROLE

Product Designer: User research, flows and testing, personas, wireframing, UI/UX, prototyping, specs and documentation, presentation, design system creation and maintenance, conducting QA, establishing team processes, Jira ticketing and close communication online and offline.


Game Plan ⚽

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 through personalization and curation so our fans always had the best-in-class content at their fingertips.


a few key Challenges

  • Seamlessly bring together 24 databases into a single user experience


  • Identify and execute a vision by leveraging user goals and insights, while aligning on business objectives 


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


  • Create a React Native product that harmoniously spans across all platforms and operating systems


  • Help to drive fan engagement and bring more focus to the action


  • Bake in key features such as an integrated Fantasy and condensed matches to watch




In addition to meeting and exceeding key metrics, a great measure of success to our team was that 9 of our Clubs now use the MLS app as their primary app experience.


Club representation shines through in designated areas in the app where vibrant UI is loud and clear. We defined a color system that coordinates with each Club to help emphasize visual distinction and influence fandom.


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. Designing and implementing reusable components helped power our React Native app development by enhancing consistency and velocity across a wide variety of screens and features.

Overview.jpg
Group-3.jpg

Opportunities for fans to tailor a personalized experience goes far beyond onboarding. The MLS app has several access points to help manage Followed Topics, set notifications, discover new content, and adjust scores preferences so our users get exactly what they want. We paid special attention to match day (and the days surrounding it) and what that means 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 gets them as close to the field as possible.

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