MLS Design System

Product Design, Design System
Released 2017

MLS-DesignLanguage19.jpg

Over the span of 25 years, MLS has evolved in many groundbreaking ways. Introducing new expansion clubs, building state-of-the-art soccer stadiums across the nation, and recruiting incredible players from around the world are just to name a few. Before I joined MLS in 2017 as the first Product Designer, the company never had a formalized Product Team in-house. That meant that everything from the app to the websites had been designed and built by external vendors over the company's lifespan, resulting in many inconsistencies and friction points. The products just weren't evolving at the same speed as the league, and certainly not in sync with one another. Our challenge was to create the foundation for a flexible and cohesive Design System that would help fans connect with our brand, as well as create efficiencies for designing and developing MLS products.

 

/ Where We Started

Collages of the pre-existing MLS products

Collages of the pre-existing MLS products

Board4.jpg
Board 5: Match center UI and elements.jpg

Conducting a complete evaluation of the MLS products gave us a comprehensive look at where we were starting, and where we wanted to go with our Design System. We were not only finding a lot of inconsistencies, but UI patterns were out of date, there was very little color definition, the iconography set felt disjointed, and typography drastically varied. We knew that if we dedicated time around design parity, our digital products would in turn deliver the quality, excitement, and authenticity that our sport embodies in a more engaging and dependable way.

 

/ Guiding Principles

The Design System initiative was going to be a significant company-wide change and would effect everyone in some way. Our guiding principles, along with our unyielding transparency, helped in paving our path and allowed us to be focused, decisive, and intentional.

 
Principles-DEAD-SIMPLE.jpg
Principles-TRIBAL.jpg
Principles-STORY-DRIVEN.jpg
Principles-ESSENTIAL.jpg
 

We spent many weeks exploring mood boards and mock screens to contextualize early design concepts. This process allowed us to freely explore tone, color usage, button styles, charts, typography, photo treatments, and so much more. The identity of MLS is young, vibrant, compelling, and strong, so it was essential to convey that personality in an immediate and visual way.

 
Artboard 3.png
Artboard 4.png
Mood Board exploration

Mood Board exploration

2. Feature.png
Artboard 1.png
6.-Mobile-Boards.png

/ Where We Landed

MLS fans fall in love with their favorite club, not the league. They bring their energy to our stadiums and bring communities closer together. The game of soccer is real, it’s emotional, it’s loud, and it’s impactful. Our established Design System embodies and humanizes these traits so that our fans are truly connected with this personal experience. This can be felt through the bold typography, club-infused colors, high-energy photography, and refreshing use of white space so fans can focus on what matters most. This living and breathing Design System was spun off into a website that is regularly updated and shared with both internal and external teams. As our league continues to evolve, our Design System will too.

 
1. MoodBoard.png
ezgif.com-video-to-gif-3.gif
 

/ Outcomes

The first product that adopted the new flexible Design System was the MLS mobile app re-design. We worked on this in parallel to the Design System, both of which we continued iterating on and refining over a period of ~1 year before this product was in the hands of our fans. See more on the MLS mobile app re-design.

 
MLS-app-screens.jpg
MLS-app-screens-CIN.jpg
DarwinSystem-Components.jpg
DarwinSystem-Scores 2.jpg
 

In addition to the MLS app, the Design System has also been gradually adopted by the MLS Fantasy game, league emails & various marketing initiatives, and the official online store. Now that MLS has a flexible, systematic, and strategic foundation to it’s visual language, our goal is to continue building it up, as well as advocate for it’s implementation and efficiency gains across the wider organization.

 
Examples of where the Design System has been applied

Examples of where the Design System has been applied