Building the Games

Data visualisation

A visualisation created with GE, telling the story of how its products have been used to create the infrastructure for the London 2012 Olympic Games (super exciting) and then were those products will be distributed across the world.

Using animation as the core storytelling device for the visualisation, the story of which products are being used at London 2012, their manufacture and distribution post games is being told in a dramatic and clear manner.  Built by the excellent Mr Stefan Goodchild in both Javascript and Flash, making sure it ran in just about every browser, along with most devices.

View live visualisation here

Initial wireframe explorations using London as the visualisation focal point which technology flows in and out.  Exploring map presentation, dividing it up to condense the spread across screen using circles – reflecting Olympics rings, and sliding it into sections.

More wireframe exploration but using the technology as focal points for the visualisation, with the flow goes in and out of it instead of through London.

Following the initial explorations, the ideas of the technology flowing through London, ring inspired map presentation and an icon based representation of the technology was developed further.  These were refined into one full experience.

Introducing a pin to focus the experience around London, the other elements combine to tell story of GE technology used at and post London 2012.

First visual design direction showing the fully loaded landing screen based on GE branding.  The overal composition of elements has been refined with depth added to help control the hierarchy of interaction.

Technology visual design showing its interaction, with icons are always exposed.  Exploring extended colour within the main pin elements use across the design, ultimately this proved to colourful for the desired mood and use of colour was reduced.

Shows the use of animation as a storytelling device for the visualisation.  When there is interaction with an technology icon its journey is told with animated lines and controlled highlighting on the map.  The animation described here was refined for the final version, along with the highlighting on the map.

Visual design explorations for the pin.  Playing with different colour combination to establish the correct mood.

Along with working out interaction states for the pin.

Selection of the icons created to represent the GE technology of London 2012.

All the visual design elements were combined into the final design for development by the excellent Mr Stefan Goodchild.  Built in Javascript using SVG and Flash as a fall back (making sure it ran in just about every browser) the javascript development platform provided some flexibility to really refine the animation to help tell the story.

The use of animation was extend to the introduction, where the experience reveals itself to the user on load, setting up the story and interaction.

A snapshot of the animation.

Deployed on GE Visualisation blog