After the flood Champions League Pitch View

Champions League Pitch View

“How can we make new talking points for football fans?”


The Problem

The statistics area needed to show new types of data throughout the site

Our Solution

Pitchview shows unique data – attacking momentum and influence – in modules throughout the site


Hundreds of match reports now contain engaging data unique to

“How can we make new talking points for football fans?”

UEFA asked After the Flood to develop new ways for fans to understand play and match statistics. Pitch View is visualisation tool that prioritises attacking play and the ebb and flow of a game over standard measures of possession or goal-related events. It’s powered by what we called the Attacking Algorithm, which ranks displays dominant play at any given point of the match. asked us to develop new features to engage football fans with the upcoming re-launch of their statistics area. After the initial pitch we narrowed the field down to one idea, Pitch View, for launch in the Champions League 2012–13 season. UEFA wanted to prioritise attacking play and show the ‘ebb and flow’ of games along with key events. They also wanted visualisations that would live in the match reports, not just in a centralised area.

The Attacking Algorithm: Sense-making in Midfield Data

The editorial leadership at UEFA wanted Pitch View to overcome the visual noise that hampers many football visualisations. Most football stats highlight ‘possession’ which is often shown by all possession on the pitch. This leads to visualisations that are too cluttered either from showing every passing line or heat-maps that show the whole pitch covered. We wanted to articulate key moments and locations in the game. The weighting we developed is based on:

  • Proximity to attacking third of pitch.
  • Moves that end in attack.
  • A ranking of attacking moves and their locations.

The pitchview app is introduced to users by the timeline at the top of a match report.

We developed an algorithm that sifts the possession and location data to find the meaningful events. This algorithm is typical of how you can build on the data you are provided to create unique value for a new product. The timeline only shows events that are significant moments in the game – and these are shown on the events view, with more traditional goalmouth views for goals. 

The Attacking Momentum timeline

Sports fans all want to know ‘who is winning?’, this timeline shows the spikes of impact, where one team has had more attacking play than the other. We have built on the previous UEFA timeline to show which team is having more attacking impact. The timeline shows key moments in the game but also the overall ebb and flow of the game.

Action Areas: Beyond the Heat-map

Powered by the algorithm, the Action Areas map shows where effective attacking play took place – rather than where all play took place. The default view is for the entire team, but the player vs player comparisons view really show the accuracy of the data. Roll-overs tell you who did what when in which area.

You can see the dominance that Barcelona and especially Alves exerted on the right side against Man City.

The app allows users to focus on one player – for instance Dani Alves, showing his part in the right hand side action.

The attacking algorithm is robust – we know that Andrés Iniesta operates in these areas.

Here, we see the areas where Lionel Messi is most effective.

Team Shape: Parametrics

Team shape shows us how teams play in formation. We have kept this simple to avoid the complexities of the more baroque network visualisations out there but will certainly be looking to develop more possibilities in this area. (See our journal article for more.)

We also edited down the number of key passes per team in the interests of visual clarity, but will be looking to expand the insights into passing patterns as we iterate.

Partnerships and Process were great to work with. They have a strong sense of their editorial focus, engaged usability advocates and a mature product culture. We worked in a three stage process. The first stage is planning – understanding audience and business/editorial needs, agreeing the product direction and basic design. This planning phase is our core strength – bringing together all the forces (audience, data, business needs) to make something unique and engaging. The second phase was prototyping, where we did most of the work on developing the Attacking Algorithm with real code and finalising designs. The third was production – regular calls and the iterative dance between tech, design and product management to launch the application.

Photo used in top illustration courtesy of Jason Paris

Would you like to know more?

Get in touch