infogr8, a Visually Certified design firm based in London, just released Sports Participation by the Numbers, a new interactive visualization of sports participation in England. The beautiful design paired up with a smooth UI and interesting data discoveries caught our attention immediately. Here, they give us a behind-the-scenes peek at the production process.
Here at infogr8, we like a challenge. So when we were approached by Eleanor Lambert, Communications Manager for UK governing body Sport England, with a colossal amount of sport participation data, to say that we got excited is an understatement.
Sport England asked us to “bring to life” their data and “depict the peaks and troughs in sport participation throughout the year indicating the external factors that lead… to changes in participation.”
The brief was fascinating in that we were challenged to find a middle ground between the traditional, academic approach to visualising the data whilst influencing a broader online audience.
Eight specialists took on the project, working at different stages across data, journalism, design, UX and development. One digital project manager kept the team agile and on track over an eight-week process.
Here is the eight-step process infogr8 adopts for conventional infographic productions:
Here’s an overview of our process on the interactive visualization and some of the different considerations we had along the way.
Once we had digested the brief, we cross-referenced the points with the data provided in order to decide which of the various datasets we had would be best to work with.
We were provided six years of monthly historical data broken down into various categories and demographics. From a wide range, we decided to use the data set looking at people of all ages participating in sport once a week. There were a number of factors for us to consider in coming to this decision – the key one being that this dataset allowed us to be inclusive of a wide range of people. It also worked well, as it was giving the full picture of the subject – and, very importantly – this dataset could be broken down by sport, as well as overall results, offering some further granularity.
We used the most recent data – from 2011/12 – as the key data set. So we could show a strong comparison, Sport England were keen to include their oldest data – from 2006/07 — which, come the final design, the user would be able to toggle on or off as they wished.
On closer analysis of the data, we found a number of gaps and holes – some data points were simply missing altogether and others were “to be viewed as indicative only,” due to a low number of respondents to the survey in a particular sport. In working around this issue, we also had to come to the decision of which sports to include. Fortunately most of the key sports had complete data.
Something else we had to take into account: one of the key functions of this interactive visualisation was to look at the effect of external factors on sport participation, specifically weather and professional sporting events.
That external data was not provided to us, so we used historical rainfall and temperature data from the Met Office, and yearly sporting calendars, as can be found online, for example on the BBC or MailOnline.
Plotting the data
Once we had collated all of the data sets, it was time to visualise them in their most basic format. Using simple charts and graphs, we were able to take what was previously simply a large set of statistics on an MS Excel spread sheet, and start to understand and analyse the data.
Here, one of the key points for us was the fact that there was a huge variation between the participation levels in the sports that we had to include, and to compare them directly against each other would have been wrong and misleading. We realised that the data would have to be plotted on a different, applicable scale for each sport. This aligned with the original brief, as the goal was never to compare sports, but simply to show what factors affected their participation figures.
What plotting the data also allowed us to do was to ensure that the data Sport England had was actually telling the story they wanted to tell. We had to consider what basic trends we expected to see – did cycling participation, for example, increase after Great Britain’s success at the Tour de France at London 2012? (Of course it did!)
With the data work complete, it was time for the team to move into ideation and visual concept phase. As with every project, we came up with a number of different ways that the data could be visualised, and also looked at the different themes, art direction and references that would be applicable to what we were trying to achieve.
We created sketches for some of the key concepts we came up with. Here is the one that is perhaps closest to the final design:
The clear, key difference from this sketch to the final output, however, is that the sketch shows the data represented from top to bottom, whereas in the final interactive visualisation plays from left to right. The key reason for this was to follow western timeline convention from left to right, the variation in data was not large enough to show in a clear format and the weather factors were more suitably plotted on the graph in order to view on one screen.
A key point raised in the ideation session was: “If we are fundamentally showing participation in Sport, should the interactive have an element of participation weaved into it?”
Referencing back to the brief, bringing the ‘data to life’ we decided to do incorporate a participation element breaking the visual concept down into a 3-stage wireframe:
- Intro: To put the user in control, to influence the user to participate.
- Data visualisation section: Show the data in a clear, engaging visual format allowing the user to explore and find information as they wish.
- Outro: Overview of each sport with links to discover more information and to encourage the user to participate physically in their selected sport(s). Option to download the static infographic for an overview of the results.
There were a number of elements of the design for us to consider. One area the icons, created a lot of debate amongst the team.
Although aesthetically pleasing, after an initial ‘squint test’, we felt it was important that as the project was dealing with participation in sport, and therefore people, this needed to be highlighted in the icons. The final draft:
Looking now at the final, interactive visualisation as a whole, there were of course plenty of factors that were considered… Shall we have 5 or 10 available sports, dashboard or no dashboard? What colours to use? All of these points and more were taken into account in regards to the final output.
A crucial element of the final design was the dashboard on the left-hand side. This acted as a constant point-of-contact for the user, and showed the results of the data clearly as the user scrolled through the months. Something else included in the final design was the use of circles to highlight the actual figure of participation. This meant that the key thing for the user to look at was the lines going across, showing the rise and fall in participation, but using the circles to still find the actual monthly figure if they wished to.
The bars at the bottom also gave a visual indication of how long each of the different professional sporting events lasted for, including a high-resolution photograph from Getty Images to mark each event. These photos also gave the piece a more human feel, and would help the user remember each of the specific sporting occasions from the past year.
One other, “toggle-able” feature we included was the opportunity for the user to turn on the “participation peaks” throughout the year. This meant that the design would be greyed out, with the month with the highest participation level for each sport highlighted clearly.
We started with the graph as the main function and concentrated on getting a smooth scrolling system along with animated popups and rollovers that worked across all devices and browsers.
The system detects the device and browser the visitor is using and adjusts the dynamics to cater for both older browsers (such as IE), touch devices and older hardware (such as older iPads and iPhones). All graphics were vector based to accommodate retina displays and ensure no loss in quality.
The intro/outro sections were added afterwards, the interactive drag and drop intro was, again, adjusted for various devices including touch. We also had to create multiple ‘outro’ graphics in order to cater for all the various combinations of sports, which leads the graph view out into the final section – taking you to the summary, social links and a download of the print version infographic.
We feel the user will gain a better idea of what effects sporting participation throughout the year from using the interactive visualisation. Also, when used appropriately, an interactive can improve engagement and make for a more memorable experience. This interactive amassed more “Likes” in 48 hours than a similar static infographic we produced on the Olympics did over an 11-month period.
In keeping with Sport England, and what they do as an organisation, we also felt it was important to offer the user a point of reference if they wished to get involved in any of the sports they had chosen to analyse. So, after scrolling through the full year, the user comes to the outro section, where they’re able to read more about getting involved in each of the five sports they selected.
Also in the outro is a static print-friendly infographic showing the rise and falls in participation of the different sports and some basic analysis of the reasons for these changes.
Finally, the user is given the option to restart the infographic – perhaps they could select a different five sports and start again.
Vast data sets visualised and made clearer for a wide audience. Done.
Click on the image below to view the final result:
Explore more infographics like this one on the web’s largest information design community – Visually.
infogr8 are a modern team of information design specialists based in London producing visual content designed for sharing. Having recently collaborated with the likes of Hilton, TimeOut, Ipsos, Kaspersky, GreenPeace, Prudential and Sony, they connect data, design & digital strategy to suit the visual demands of the fast paced online brand space. Follow them on Twitter @infogr8 or see more of their work on their website.
You can request to work with infogr8 through the Visually Marketplace, too!