Sunday, 13 October 2013

TeamGB.com in association with Pirata London December 2011 - February 2012

The time I did the Information Architecture and User Experience Work for the British Olympic Association with Pirata London.


Team GB Case Study for Pirata from Jamie M on Vimeo.



I was approached by Pirata in December 2011 to help them with IA and UX work for a massive project they had taken on at short notice.The project being the British Olympic Association website refresh in advance of the London Olympics in 2012.

The project has been in the hands of another agency for some time and so now the remaining time frame was incredibly short. The whole project would need to be delivered in 10 weeks.

That sounded like a challenge I could manage, but it would require design, IA/UX, and development to be operating simultaneously and fluidly. No problem I thought. As long as we could all work together.

Other than brainstorming some principles of how athletes and sports might be presented as a changing space of selections during the run up to the games (which was a major part of the interview before I was engaged), the information we had to work with was: a working site map; and a few page designs from the original agency. So as a first step I set about understanding the information space with extensive domain and competitor research.

We were assisted in gaining a complete understanding of the problem by the client, who met with us several times a week to discuss ideas and work through assumptions. I quickly concluded that the initial ideas (such as presenting the team as a perfect space of empty slots by sport, which would populate as one might fill a football sticker album as the team is selected) were far better than the previous project thinking and state of the art for other national associations (that was to list the athletes A-Z, making the list longer as athletes are selected), but required refinement and detailed research to get everything in place (so what is the maximum number of fencers in a fencing team say?). So as well as a global site map I could start putting together more detailed specifications and we could start wire-framing pages.

 At the same time the design work was progressing and I was discussing how the elements might best be presented with that team and the development work was progressing and thus I was discussing how the information might need to be stored in the back end in order to achieve the things we needed to achieve with the presentation in the front end.

The upshots of these parallel streams included a homepage which could pull in all the latest selections as well as social media, news, campaign data. and video without looking too formal nor too unstructured. Ultimately while we needed to include the possibility that we would need to develop a structure for every British athlete to have ever competed and every modern Olympic Games, it was obvious that in order to deliver the project in the time frame we would have to concentrate on the upcoming games and possibly the preceding games.

The development team and I spent some time discussing with the client how much information the client could deliver in a usable form in the available time and how we could pull it together into a coherent and seemingly complete offering. The final deliverable version required thrashing out into a set of specifications and the designed elements needed putting together with the back end structures according to the proposed IA.

While my major contribution ended here, I was also involved in discussions of how the campaign pages (Our Greatest Team) would function and how the game time live dashboard might function, but these sketches and ideas were very preliminary. The resulting product combined reasonably complex data structures (extensive, rational cross linking) to present comprehensive data (including externally sourced data such as news feeds and social media feeds) into an attractive coherent website with great imagery and video.

Indeed the result was attractive enough to win a One Show Silver Pencil for corporate websites in the 2013 list, and I hope the IA had some part to play in that accolade.

Below are some examples of working deliverables, as well as some case study materials produced by Pirata

Complete sitemap





First phase site map




Homepage wireframe



Athlete list by sport wireframe