London 2012 Olympic Games

UX, web design, microsites, online design guidelines, accessibility

The only creative agency that could last the course
— Alex Balfour, Head of New Media, London Organising Committee of the Olympic and Paralympic Games (LOCOG)

About the project

London 2012 was the first Olympic Games to take place in the era of social media and mobile technology. Organised by the London Organising Committee for the Olympic and Paralympic Games (LOCOG), the mission was to make these the most accessible and memorable games ever, reaching people worldwide. 

With such a distinctive personality, the London 2012 brand needed to be communicated in the right way. Digital was a key channel as it had the potential to connect the vast global audience to this unique event. 

We were delighted to be one of a handful of digital companies selected to work for London 2012. 

We then won the job to redesign the main pre-Games website and went on to be commissioned to deliver a further 15 projects for LOCOG over a period of 3 years. Working with LOCOG was a rewarding and inspirational experience. 

London 2012 Olympic Games: a digital triumph!
— The Guardian Newspaper

Pre-Games website redesign

The brief

We were commissioned in March 2009 to produce a refreshed design and information architecture for the main pre-Games website, London2012.com. The new site needed to capture the excitement and anticipation surrounding the build-up to the Games. 

London 2012 came to us with a brief to refresh the design for their main website. Their design requirement for the London 2012 website had changed from one which had to appeal to potential sponsors, to a much wider audience. 

LOCOG required a site that was flexible enough to tell engaging stories about the activities that were going to take place in the build-up to the Games; events such as the revealing of the Olympic branding and announcement of the Olympic torch relay needed a timed exposure. We had to ensure that they had a place on the site even though these events hadn’t yet taken place at the time of our launch.

What we did

We carried out over 70 hours of user testing with people from around the country including those living close to the site, and those living in and outside of London to discover what the differences were in perceptions and expectations. 

We wanted to establish what stories and information people would find the most engaging both during the testing and the moment the site launched. We found that while many people had limited knowledge of the building and infrastructure projects that were taking place, they were particularly interested in the spectacle of events that were anticipated in the build up.

A key point that emerged in user-testing was that people wanted to know how they could engage with the project. We used the active calendar of varied activities leading up to the event to create a site that, at its core, was a call to action. By illustrating all of the ways that people could get involved we created a community feel and really engaged our audience.

We also featured an area explaining the Olympic buildings. We showed architectural drawings and featured live webcam streams so the public could watch the buildings evolve in real time.

Impact

The design and structure of the site celebrated the anticipated events, which in turn, supported the build-up in the run up to the Olympic Games

By focusing on the call-to-action and getting people to act now we enabled them to begin their own journey towards 2012.

Olympic Torch Relay microsite

The brief

We were approached by LOCOG to create an engaging microsite that would showcase the high-profile Olympic Torch Relay event.

Our brief was to create a microsite that would celebrate the launch of the Olympic Torch Relay and communicate to the public how they could get involved with this highly anticipated event. A key function of the site was to announce the UK cities that were to be visited by the Olympic torch on its route to the Olympic stadium. The site also needed to invite members of the public to nominate people to be Olympic Torch Bearers.

The Olympic Torch Relay was a significant event as it was the first opportunity for the public to physically get involved in the games. The organising committee wanted to communicate the specific messaging to the public that by getting involved with the event it was their “Moment to Shine”. We needed to ensure that the relay microsite was as useable and appealing to our audience as possible in order to get this messaging across. 

What we did

Creating user-centred design that really engaged the public meant that they were more likely to buy in to the concept.  We needed to make certain that by making Olympic Torch Relay announcements on the site clear and engaging, more people came out onto the streets to cheer on the torch.

A particular challenge was ensuring it was as easy as possible to nominate a torch bearer; the site needed to clearly communicate information about the event and how they could become involved.

Impact

By working collaboratively with our technical partners Microsoft and Kitsite, we created a functional and informative site that made it easy for people to sign up and show their support.

We insisted on a rigorous user-centred design approach, which included user-testing throughout the process to ensure that online nominations forms were simple and easy to use. 

With such an intricate project we needed to work collaboratively with our technical and branding partners in order to get the different elements working together successfully. We did this by working closely with specialist agency McCann Erickson to ensure we carried and communicated the messaging of the iconic Olympic Torch in our work.

Microsite design guidelines

The brief

With many planned microsites for London2012.com we needed to establish a consistent experience and navigation for users so people recognised where they were and how everything related to the main website. 

The design across all the microsites needed to encourage participation and enthusiasm for games and the events leading up to the launch. We needed to ensure that we created an energetic and dynamic design, based around user-experience. 

What we did

We created design guidelines that unified the family of London 2012 websites.  Our work was an extension of work done by Wolff Olins to establish the brand and design principles for London 2012. It was important that our online principles reflected and complimented this work.

With a brand that receives as much public exposure as the Olympics, it is crucial that it is rendered in a way that makes sense online. The London 2012 brand guidelines were designed to feature in a busy urban space, which meant they were big and impactful. Our challenge was to make sure that this iconic brand worked online without dominating that space. 

Early in the project we created five guiding principles that led our work: 

  • Energy and dynamism 
  • White space
  • Less is more
  • Allow content to speak for itself
  • Focus should be on a strong user experience

A key consideration for the design guidelines was to maintain the accessibility of the brand. We carried out extensive accessibility testing on colours, typography and colour combinations to ensure they achieved the maximum AA+ rating. 

Some members of our user-testing group had mobility impairments, which meant we were able to get extensive results. We were able to establish where to position accessibility links on each page, which would enhance the user-experience and unify the different websites.

Impact

Our guidelines complemented the distinctive London 2012 brand and enhanced the buzz and excitement that surrounded the build-up to the Games, making it easy for users to participate and get information online.