Responses by Matt Powell, creative director, Max Saunders, senior designer and Dave Stockley, senior developer, Mud

Background: We wanted to create something a little different for the World Cup this year. There are plenty of places you can find out about the fixtures, the star players and the politics, so we wanted to make something a little more offbeat and fun. As both my business partner Cole Henley and I have small boys with a fervent interest in football, we wanted to create something that would not only appeal to kids, but also have enough depth to capture the interest of the football connoisseur.

Highlights: The striking background illustrations and icons that adorn the team pages and the navigation. These were based around each team’s most iconic World Cup kit, distilled down into a simple graphic pattern. We liked these so much we were even considering creating a series of 32 prints. We also really loved the worst sticker-voting feature; sourcing those images was a lot of fun!

Navigational structure: We used a mixture of GSAP and React Transition Group to create some seamless page transitions between the teams; we also used SVG animations to create a super smooth effect. We prototyped this functionality using an app called Principle, which provided a very straightforward way of testing out some ideas in the transitions before we moved into development.

Technological features: All of our data was stored in Google Sheets, and turned into JSON with a custom PHP script. The site was built using Gatsby, which uses GraphQL to convert the data into a format that Gatsby can output. We used Recharts to create the data visualizations. The CSS was built using a mixture of Tailwind and styled components. For user votes and spot-the-ball submissions, we used Firebase. Also, the site is hosted on Netlify, the perfect platform for static sites due to its speed and ease of use.

Alternative approach: We spent so long getting the team pages to look exactly how we wanted that we realized the homepage of the site could have been a bit more considered.