Last week saw the launch of ‘On the Plane’, our homage to the world’s greatest football competition which is about to kick off in Russia.

We often set ourselves small side projects to try and learn new tools or to create something interesting to share with the world. So we decided early on this year that we wanted to create something a little different for the World Cup. There’s plenty of places you can find out about the fixtures, the star players and the politics - so we wanted to try and create something a little more offbeat and fun.

As both Cole and myself both have small boys with a really fervent interest in football, we wanted to try and create something that would appeal to kids, but that also had enough depth to capture the interest of the football connoisseur.

Creative approach

We decided early on that we would have a detailed page about every team that was going to Russia. There are a number of iconic visual images thrown up at every world cup, but classic kit design is a theme that runs through from the first tournament to the latest - so we decided that the graphical theme of the team pages was going to be defined by each country’s most iconic kit.

Having settled on the name ‘On the Plane’ (which is a reference to each teams journey to the tournament, and it’s a well used football cliche - and we love those!) we developed a logo which referenced classic constructivist Russian type, as well as including a reference to the plane idea within the negative space of the typography.

Content ideas

We started out by exploring what basic information would be interesting to provide a younger audience with a quick snapshot of each teams performances down the years. We quickly picked out some key stats but then realised there was fun to be had with taking some of the data we could find and interpreting it and visualising it in slightly more interesting ways.

We also new that kids (and adults alike) LOVE watching goals goals goals. So we decided to pick out our favourite three for each country and allow users to vote for their favourite. This idea then grew into picking out our favourite other moments and the best / worst of the teams sticker album photos.

We also wanted to incentivise users to share the site far and wide. Having originally thought it might be fun to use a ‘Spot the ball’ competition for a 404 error page, we soon realised it would be much better to make it a more prominent feature on the site.

Building it out

All of our data was stored in Google Sheets, and turned into JSON with a custom PHP script. The site was built using Gatsby [https://www.gatsbyjs.com/} which uses GraphQL to convert the data into a format that Gatsby can output.

We used Recharts [http://recharts.org/#/en-US/] to create the data visualisations and we used GSAP and React Transition Group for the slick page transitions. The CSS was built using a mixture of Tailwind and styled components [https://www.styled-components.com/].

For data storage for user votes and spot the ball submissions we used Firebase [https://firebase.google.com/], and the site is hosted on Netlify, the perfect platform for static sites due to its speed and ease of use.

Gathering content

We’ve used many different sources for our data. including The FIFA website, Wikipedia, openfootball and Youtube. But ultimately a lot of it just had to researched and entered the old fashioned way.

Wrapping up…

We hope you enjoy using the site and encourage you to explore it with any football loving little ones - in our testing sessions they particularly loved playing around with the best goals and worst stickers sections.

And yes, we think we may have egg on our faces when our ‘Peru to the Quarter finals’ prediction falls flat on its face.