• Layered London 2012 Games Makers 3D development diagram - layer 1 Layered London 2012 Games Makers 3D development diagram - layer 2 Layered London 2012 Games Makers 3D development diagram - layer 3 Layered London 2012 Games Makers 3D development diagram - layer 4 Layered London 2012 Games Makers 3D development diagram - layer 5 Layered London 2012 Games Makers 3D development diagram - layer 6 Layered London 2012 Games Makers 3D development diagram - layer 7 Layered London 2012 Games Makers 3D development diagram - layer 8
  • London 2012 Games Makers project image
  • London 2012 Games Makers project high-resolution screenshot
  • London 2012 Games Makers project high-resolution screenshot
  • Project screenshot
  • London 2012 Games Makers project high-resolution screenshot
  • London 2012 Games Makers project high-resolution screenshot
  • Screenshot from the London 2012 Games Makers development project
  • London 2012 Games Makers website screenshot
  • London 2012 Games Makers project image

London 2012 Games Maker

HTML5, CSS3, & jQuery

London 2012 recruited more than 70,000 'Games Makers' into a wide assortment of essential volunteering roles for the London 2012 Summer Olympics. Starting at the end of 2010, the Games Maker campaign included advertisements on public transport, television, radio, and social media.

At the centre of the campaign was this microsite and interactive online game, hosted within the main London 2012 website. This guided applicants through the different requirements and perks of being involved in the programme before inviting suitable candidates to submit their details.

By the end of the campaign the microsite had been visited more than fourteen million times, attracting over 240,000 applications.

The microsite itself consisted of a fluid-width HTML5 development using subtle CSS animation (with jQuery fallbacks) and interactive hot-spots to display details about what being a Games Maker would be like, what would be required of them, and what could be expected in return. The main feature of the microsite was an animated timeline demonstrating the average day working on the Games.

The application process was an interactive questions-and-answers game which reiterated the information from the microsite - including hints and prompts - and then collected the visitor's information should they wish to take part.

Whilst the main microsite was built in HTML5, the application process and game was originally developed by a third party in Flash and ActionScript. I became responsible for developing an alternate, responsive, HTML5-and-AJAX fallback version targeted specifically at the emerging smartphone and tablet market.

Aside from the clear performance-optimisation requirements on the front-end due to the high levels of traffic and graphics-heavy design, the other key consideration in this project was ensuring full cross-browser compatibility: at the end of the campaign the site's analytics showed that more than 10% of visitors had been using IE6.

Top