World Cup Match Center
I led design on a web experience for following the World Cup through live editorial updates and live game statistics. By bringing together journalism, statistics, and data visualizations, I aimed to create a compelling space where we could land sponsorship deals from potential partners.
Objective
The objective to this project was to create a Live Blog experience for soccer matches that gave fans an immersive way to follow a match closely through a combination of live newsroom coverage and match statistics. This was an important product to create in order to become a credible player in the soccer media space and one that The Athletic had been planning towards for years.
Before
The Athletic already had a Live Blog feature that the newsroom could use to post live updates during big matches. This feature was already a favorite amongst our users despite being pretty barebones. Fans could read insights from our newsroom in the live blog however in order to know any of the details about a match, they would have to navigate towards a different destination.
This is some text inside of a div block.
Competitive Research
I did a thorough assessment of the strengths and weaknesses of competitors to discover opportunities and threats for our project. Soccer experiences have general best practices that fans expect, but every experience needs to cater to their audience in a unique way. At The Athletic we strived towards creating experiences that compelled casual fans to pay more attention while enriching fanatics with expertise they can't get elsewhere.
This is some text inside of a div block.
Content Strategy
I knew that we needed to add soccer match statistics and updates to the existing Live Blog, however the goal was not for this experience to be a full replacement for a boxscore. Soccer matches have potentially dozens of data points that could be interesting and I needed to find the right information to prioritize here so that the statistical content did not take away from the Live Blog which was to remain the primary focus of this experience.
This is some text inside of a div block.
Wireframes
To quickly get validation on my direction I created wireframes that gave just enough detail to get a sense of where the experience was going. From internal user research I was able to validate if the modules I prioritized and the overall hierarchy of the pages made sense. I also learned the need for keeping the boxscore and the live blog as two separate products rather than potentially merging into one with shared navigation in the future.
This is some text inside of a div block.
Final Solution
After exploring numerous iterations and internal testing, we created a cleaner, simpler experience for soccer fans. We kept the live blog central and carefully designed supporting modules that gave color to the editorial content from our newsroom.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.