World Cup match visualisation module
Post categories: ´óÏó´«Ã½ World Service,Ìý´óÏó´«Ã½ World Service,Ìýuser experience & design,Ìývisualisation
| 14:10 UK time, Friday, 11 June 2010
´óÏó´«Ã½ 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 :
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.
Comment number 1.
At 11th Jun 2010, Brekkie wrote:Where is the Press Red guide to interactive services - the sort of thing we were promised would continue here with the closure of the Press Red blog.
Complain about this comment (Comment number 1)
Comment number 2.
At 11th Jun 2010, Paul Murphy wrote:#1 It's here.
Complain about this comment (Comment number 2)
Comment number 3.
At 11th Jun 2010, Gareth Adams wrote:The link in the first paragraph links to , where everything breaks. Shouldn't this just be plain old bbc.co.uk?
Complain about this comment (Comment number 3)
Comment number 4.
At 11th Jun 2010, Alex wrote:Hmmm, the link seems broken. I get a:
[an error occurred while processing this directive]
where the fancy stuff should be.
Complain about this comment (Comment number 4)
Comment number 5.
At 11th Jun 2010, Matt wrote:Sorry about that! Copied the wrong one! Have just changed it. Also the module can be seen in action here on
Complain about this comment (Comment number 5)
Comment number 6.
At 12th Jun 2010, Brekkie wrote:Cheers Paul.
Complain about this comment (Comment number 6)
Comment number 7.
At 12th Jun 2010, kirtibjp wrote:Wonder if you can help - I used to be able to access formula 1 live on my desktop PC all the time and last watched the Turkey GP. However I could not get live Canada Practice 1 or 2 yesterday. Is there something I am missing. I have always used firefox browser and I seem to get all the other live ´óÏó´«Ã½ 24 content.
Complain about this comment (Comment number 7)
Comment number 8.
At 12th Jun 2010, mikecc wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 8)
Comment number 9.
At 18th Jun 2010, Brekkie wrote:Just got to say how awful the Freeview text service is for the World Cup. It's not user friendly at all and by just throwing it in the football pages means you have to navigate through several indexes to find just basic content like results, fixtures and tables - some of which isn't even there. The fixtures page for example doesn't even know what order the days of the week come in!
Considering Ceefax managed special sections for such events for years, and in the past the World Cup would have a separate interactive application, it's a real poor effort from the ´óÏó´«Ã½ when really it should be relatively simple to put the World Cup content in one easy to navigate section, and put other football news in another section rather than being hidden amongst all the World Cup content.
Indeed the ´óÏó´«Ã½ Sport text service can be pretty poor on the whole - numerous times you see something like "Swimming" listed in the general section only to find it's actually a story about Boxing or something.
Complain about this comment (Comment number 9)
Comment number 10.
At 20th Jun 2010, Alex wrote:Dear Editor,
Your Group Tables (Group C) is incorrect - both England and USA. Please amend.
Complain about this comment (Comment number 10)
Comment number 11.
At 21st Jun 2010, normie61 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 11)