JD Sports x Nike Air Max Day 2022

JD Sports, Nike and creative agency Space Between tasked us with building a website to promote their upcoming Air Max Day 2022 competition and event.

The website needed to include a way for users to create their own Air Max 95 shoe designs – using a bespoke shoe customiser – and submit their creations for a chance to win. The website also needed to include a gallery of submissions to serve as inspiration for users, and promote the capabilities of the customiser tool.

We worked with Space Between to integrate their overarching campaign look and feel, and photography into the website.

Our design team developed the UI for the customiser tool, which would stay true to the nature of the campaign, while keeping user experience, functionality and responsiveness top of mind.

Prototyping

We began the project by prototyping and investigating how to achieve an appropriate solution using images masked with SVG paths that we could apply different gradients and filter effects to. As the concept evolved it became clear that this approach wasn’t going to result in the polished solution we had envisioned. We pivoted our prototype and our approach to leverage HTML5 canvas technology instead of SVG masks.

Shoe customiser

Moving towards using HTML5 canvas allowed us to seamlessly draw multiple images (different shoe components) and gave us more control to not only apply different colour values, gradients, patterns/texture and blending options but also swap out image assets to allow users to uniquely combine different shoe elements (soles, tongues, etc.) from a range of Nike Air Max silhouettes.

Storing submissions

At Tundra we love the ease of use and flexibility provided by Google Firebase, so we implemented a Firestore database to save the submission data and leverage the use of the Cloud storage system within Firebase to upload and host the gallery submission assets.

Gallery approvals

To ensure a level of quality control and moderation for the public facing gallery, we implemented an approval process with the team at JD Sports that would allow them to review and approve submissions directly in Firebase before they were displayed in the gallery on the website.

Throughout the process we wanted to make sure we challenged some industry norms to create something interesting, while allowing users to easily experiment with the customiser to create their shoe design.

The final result was a high energy, engaging, action-oriented competition website.

The website received over 1,000 entries within a week, and surpassed KPIs in terms of number of visits, and page performance within the JD Sports website as a whole.