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.