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.

Sketches and Wireframing

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?

Sketch of matchup tab
Sketch of lineups tab

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