World Cup match visualisation module
This blog entry was originally published on the ³ÉÈË¿ìÊÖ Internet Blog by James Offer and Matt Isherwood. Please visit the original entry to comment.
³ÉÈË¿ìÊÖ World Service is already gripped by World Cup fever. We've been working on our own approach to broadcasting the matches, which launched with the opening match in South Africa. We're calling it the match stats module and you can see it in action on World Cup Team Talk.
Working for World Service Future Media involves a set of challenges with everything we develop and this one was no different. Everything we do must translate into a universal user experience in order to be relevant to the users of the 32 language services we support.
For the World Cup we do not have the rights (like ) to broadcast live audio or video streams. What we have instead is the Press Association data feeds (more on these later). We are also aware that for many of our international audiences the ³ÉÈË¿ìÊÖ may not be their first port of call for World Cup action. We knew we'd need to offer something different.
This project has been a bit of an experiment - a blank slate to come up with something brand new. The initial design started before we knew what our limitations in the data feed would be and featured a pitch showing player positional data along the lines of some football management simulators:
One thing to remember about the World Cup is that people who take an interest don't necessarily follow football all year round. We wanted to create something that appealed to casual and keen fans alike.
The second design divorced the look from all things football to create a more abstract information graphic, marking the key events on a game clock. This iteration was discounted because it became too complex as a representation of the events:
In the end we decided to combine the two previous ideas: using the football pitch in the visual because it quite obviously shows this is about football and is something understood by speakers of all languages; and the timeline, because seeing the events mapped over time is important for watching it unfold live:
The evolution of the design saw us take the approach of not showing all the detail in one view. Instead we show the most important information on the main screen and then have lineups and additional stats that you can click through to for the bigger football fans. We opted to keep all the player names in Latin script both because translating over 600 player names would be impractical and because fans of all nations will be used to seeing them written like this on the backs of shirts during the tournament.
To keep the design universal we stripped out text (leaving it for rollover) and used symbols for events on the match clock. Yellow and red cards were obvious and there is a convention for using a football to represent a goal but substitutions were the hardest to get right in a small space. A spot of user testing amongst a few different nationalities showed two triangles as the best understood. A few more fun details to embrace the visual language of football were added along the way such as an electronic scoreboard and kits of the teams playing.
Probably the biggest technical challenge was the use of the feeds. These feeds are designed for and match updates (scores and table positions) on the ³ÉÈË¿ìÊÖ Sport site. World Service requirements and our audience are very different - it took some trial and error. In the end a combination of two different feeds were used to create the match module that could accurately map an entire match visually and work across a range of sites.
Integrating the feeds within Flash wasn't so difficult, but the nuances of football soon caused some interesting technical and design issues. The value of 'domain knowledge' really cannot be understated here. If we both hadn't been keen football fans there could've been far more problems with the project. Advance knowledge of scenarios such as added injury time, extra time and penalty shoot outs was invaluable during the development of the module - these situations were the trickiest to deal with.
Luckily we started developing the module towards the end of the football season - so we had a plethora of Premier League, Championship, Europa League and Champions League feeds to test with. The testing process was incredibly high tech - it involved sitting at home in the evening hitting refresh and saving feeds at certain parts of the game when something went awry so it could be debugged the next day.
The highlight of the testing process was undoubtedly with home internet down, a pub with wi-fi was required to capture feeds on the night of the and the Championship play-offs. Both games went into extra-time and it was great seeing the module kick into extra time mode with no problems - and :
With the Leagues and Cups decided, the pre-World Cup friendlies gave some more testing opportunities. Fabio Capello broke the module well and truly when he made five substitutions at the same time against Japan. But we fixed that, and though it's unlikely to occur in the World Cup, we now have it covered.
To finish here's the module for that Cardiff v Leicester game working in four very different scripts (Chinese traditional, Russian, Bengali, Arabic):
James Offer and Matt Isherwood are Designers, ³ÉÈË¿ìÊÖ World Service Future Media.
Please visit the original entry to comment.
Comments Post your comment