Designing for Soccer Fans

theScore is a mobile application that focuses on delivering sports news and scores to fans. The app covers a wide set of sports leagues including NFL, NBA, NHL, MLB, College Football and Basketball, multiple soccer leagues including the English Premier League, La Liga, Serie A, Bundesliga, MLS and many more.

PRODUCT

theScore

PLatform

iOS

ROLE

Product Designer

year

2017-2018

Mockup of theScore's soccer section.

OPPORTUNITY

In late 2017 with the World Cup just around the corner, it was the perfect time to challenge the product design team at theScore to create a new soccer match day experience. The previous experience was dated, and a new data feed provided us with an incredible opportunity to give the fans more stats and data visualizations.

Our goal was to bring the most desirable match information to the fan’s fingertips with intuitive flows and clear data visualization, all wrapped in a functional and beautiful mobile experience.

USERS

Checkmark

Soccer fans

Checkmark

Males aged 18-34

Checkmark

Fantasy Players

Checkmark

On-the-go or at the game

User personas

Research

We started by studying over ten soccer applications, seeing what information they presented and how, what seemed to be table stakes and what was more experimental. We also spoke to soccer fans in the form of interviews and online surveys, both internally and externally, about what match information was important to them and why. Responses were fruitful enough to start noticing patterns and pull hidden gems from.

We discovered the essential components to include were a timeline of key moments, top performers in the match, lineups and substitutions, and a live standings table, in addition to a news feed and team and individual stats. From there, we felt we had a good foundation upon which to start sketching and exploring.

Sketches and Wireframing

Sketches and wireframes drove most of our discovery process.

We started sketching based on what we discovered from our competitor research and user interviews and surveys. What was table stakes? What could we improve? What would give the user a sound idea of how the match went without having watched it?

The score and time of the match were obvious; those had to be front and centre.A timeline was next in line as it displayed the most prominent events in the match: goals, assists, cards, and substitutions. The user can use this to get a birds-eye-view of the match; what happened and when? What was the turning point? Who scored and when? If there was a last second match-winning goal, it would be shown here.

Sketch of matchup tab
Sketch of lineups tab

Soccer "tables", more commonly referred to as Standings in North American sports, are normally displayed just as such, a table. We did not want to reinvent the wheel here but we did highlight where the teams are in the table ‘live’, meaning it’s updated to reflect how the teams' positions will change based on the score of the match. Because standings in soccer are hugely important for both teams at the top and bottom of the table, this live table allows fans to be always up-to-speed with where their team is in relation to their rivals.

We wanted the "Lineups" tab offers a visual representation of which players started the match for each team. We came up with the idea of showing the players in the formation chosen by each team’s manager, a major interest point for any fan involved in the tactical side of the game. We also wanted to show which players scored and received cards on this view, a valuable feature for fantasy soccer participants.

We continually iterated and presented our work to peers, internal and external soccer fans, and stakeholders to gather insight and validate our ideas. After some time, we were confident enough to bring up the fidelity to move forward.

High Fidelity Design

Our existing design system made it easy for us to bring our wireframes up in fidelity and make decisions quickly and efficiently, as it’s meant to do.

Pre-made components and styles dictated most of the decisions for us: text, buttons, icons, logos all live in a library that we could pull from and, in combination with our solid wireframes, allowed us to work relatively stress-free.

iPhone Mockup of Matchup Tab
iPhone Mockup of Lineups Tab
iPhone Mockup of Table Tab

OUTCOME

As of mid-2020, theScore's soccer sections are some of the apps most popular with ~400,000 monthly active users.

LOOKING BACK

In retrospect, I am happy with the results of our new soccer sections but some things stand out as possible ways to improve our process. One in particular is that there was a lot of back and forth with stakeholders and project managers. Ironing out these issues before hand would have sped up our process significantly.

For example, we knew this had to be released by the time the World Cup started in Summer 2018, but when we realized the scope would be too much to fit into that timeline, we had to cut some pieces out. It wasn't exactly clear which pieces were 100% necessary and which we were comfortable cutting. This issue turned into long discussions that could have been avoided if this information was made clear in the planning process. I took this as a learning opportunity and now have an (always evolving) list of questions I make sure I have answers to before the work begins.

Download theScore from the App Store to see it live.

Left arrow

Back Home

Next Project

Right arrow