MLS App Design
May 2018 / View Live
Product Designer: User research, personas, wireframing and flows, prototyping, usability testing, visual design, specs and documentation, design system creation and maintenance, conducting QA, establishing processes, team communication online and offline, regular pairing with engineers
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, and also to facilitate personalization and curation so our fans always had the best-in-class content at their fingertips. This initiative started by seamlessly bringing together 24 databases into an integrated user experience.
Make the MLS app the single destination for users to access content and information from the league and the clubs
Identify and execute a product vision by leveraging user goals and insights, while aligning on business objectives
Help to drive 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
Create a React Native product that harmoniously spans across all platforms and operating systems
In addition to meeting and exceeding our key metrics, another great measure of success was that 9 Clubs now use the MLS app as their primary app experience. This is a direct line to more dedicated fans, as well as a victory in expanding our partnerships.
One of our first initiatives 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, the “Soccer Enthusiasts”. We elaborated on this research through more in-depth persona building. Really understanding these users and what their needs and motivations are allowed us to answer a lot of questions upfront. Through a sprint-based schedule, we tackled challenges at the feature or component level, but always referred to our personas, as well as our design principles and business objectives, at the very early strategy, sketching, and wireframing stages.
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. This can be seen 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 that had a unified look and feel helped to power our React Native app development. It enhanced overall consistency as well as development velocity which spanned across a wide variety of screens and features. We constantly iterated and simplified our component library in Sketch, and regularly shared Component Kits with our engineering team during hand-offs. This allowed them to build in isolation, promoted constant design and engineer pairing, and reinforced consistent nomenclature. This resulted in more productive conversations and efficiencies, which I wrote about in length here.
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 get exactly what they want. We payed 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.