The Telegraph

Player rater / World Cup

The Qatar World Cup 2022 was an ample opportunity for the Telegraph to deliver some innovative and interactive products to increase engagement, subscriptions and customer interaction on the site. My role in this project was to create a player rating system for people to use while live matches were happening.

3-1

Responsibilities // Research / Ideation / Product Design / Prototyping / QA Testing

Stakeholders // Deputy Creative Director / Senior Special Projects Journalist / Front-End Developer

Duration // 3 Weeks

Functionality foundations

Purpose.
The crux of a player rating system is to allow users to rate football players' live in-match performances within this World cup tournament by using a scale of some sort to then give them an overall rating post-game.

Player rating systems had already been a product that was used on other platforms and amongst competitors, so this was not a new tool being created but essentially an iteration for the Telegraph to implement for the platform and World cup.

A short user flow was mapped out to identify the steps users will take to complete the task of rating a player as well as where certain pain points could arise.

User flow

The creative direction for this tool changed to ultimately making it more of a functional tool rather than reliant on the visual aspect. Reason being it was to be nested within the live blog section which already is populated quite heavily with imagery.

Stress testing & making adjustments

Product direction. 
Overwhelming the user with imagery & graphics was what we wanted to avoid here, so the final wireframed design that was settled on focused largely on the the functionality of the rating system.

After various iterations of wireframing the best approach to design was not to try and recreate the wheel when it came to the scale to rate the players, especially for a potentially very short term project. 

Breakpoint differences.
Early on within the design phase, it was clear that the scale of 1 to 10 that would fit on one line on breakpoints of 375px & higher, would need to be split into two rows for the smaller breakpoints. This brought up another food for thought when it came to the structure of how the first & last names of players are displayed on smaller breakpoints too, especially the longer ones. 
Working closely with the developer on this project gave the opportunity to stress test a couple of design concerns I had when wireframing.

Late changes in detail.
When figuring out how we wanted to portray the successful vote message once someone has voted, the original idea was to have a 'Submitted' lozenge appear underneath the rating scale as a micro interaction. Once this was prototyped, it was quickly acknowledged that although the UI for this looked great, the constant size change of the sections would cause it to jump.

Design changes

We noticed the certain national teams in general tend to have players with a lot of characters in their name, so this was an opening to start stress testing character length for different breakpoints.

Bigger devices.
The live blog being also present on tablet and desktop meant this product would be also need to be designed for breakpoints up to 1536px. The only noticeable difference in the UI of desktop compared to mobile was the spacing between the numbers in the scale.

Different states. 
The rater was to have two different states. A live state and a post match state. Live state will give the option to still vote and would be acknowledged at the top of the rater. Whereas the post-match state will display the total average player ratings submitted by all votes and also individually by you. The highest voted POTM (player of the match) will also be displayed toward the top of the list of players.

Desktop iterations
ezgif-4-a699e4c36e

Key metrics

The player rating system was used throughout the tournament on all the matches played and accumulated on average 27, 800 votes per game.
 

This led to a 37% increase in paid subs, recognized by the onward journeys from this article page.

The success of this player rater meant that its was going to be re-purposed for other team sports like Rugby as well as future football tournaments also.

Contact

© 2024 Jordan Jaiyeola