As part of the Speed Pays pop-up, Adidas needed a crazyfast selfie app that was as fast as the boots
To launch their latest and greatest boots, the X Crazyfast, Adidas comissioned a physical pop-up from Pixel Artworks to turn speed into currency with players taking on a series of Crazyfast football challenges. Whether going head-to-head with our ridiculously pacey avatar, showcasing dribbling skills or mastering the Xcelerate bleep test, players could earn big rewards. The faster they were, the greater the rewards — anything from personalised t-shirts, the official Women’s World Cup ball, or even a pair of X Crazyfast boots.
After completing the challenges, players neded to validate their scorecard in order to collect their rewards. A QR Code loaded speedpays.net where they could enter their unique code, retrieve their score, take a selfie and have it merged onto a scorecard to collect the rewards, and share on to social media platforms.
Related Projects
Single Page Applications:
Reducing Complexity
Initial discussions led to conversations about facial recognition methods to frame players faces within the scorecard. Given the need to minimise download times. the only solution would be to roundtrip to a server to do the processing before merging the selfe onto the scorecard.
With a focus on turnaround time, and for us, on increased energy requirements for that kind of processing, we took a step back to think through the problem.
The scorecard was designed as a full rectangular image with a shield area in which to position players' faces. Finally, scores would be composited on top for the end result.
Low-latency Solution
Instead of just mounting the camera full screen in the app viewport, we proposed to display the scorecard (minus scores) using the cutout to show the player's camera feed. Players could position their own faces in the card and take the shot.
With no need to roundtrip to a server for facial recognition or compositing, re-taking the shot was instantaneous; players could re-take until they got the photo they liked.
Confirming the shot sent the photo to the server for final verfication and compositing, and the finished scorecard was delivered back to the player ready to share and show at the rewards collection point.
Mockup of composite scorecard
Selfie Mask Solution: Players position themselves rather than the overheads of employing Facial Recognition and the extra code to identify and crop faces to fit
Players' scorecards after compositing
Staying up to Speed
With the process streamlined, we turned our attention to the web app.
Web apps, or Single Page Applications (SPA) are everywhere but the popular frameworks (Vue, React, Angular) used to build them are large in terms of size. This is no problem for large, long-running, and complex SPAs which will see repeated use, but it's overkill for single-use applications.
As more functionality is needed and you start adding the required libraries, the app bundle: the framework, application code, and dependencies, can quickly grow in size.
In 2014, around a year after React was released, another framework emerged: Mithril.js, a client-side JavaScript framework for building Single Page Applications. It was small (8.9 KiB gzip), fast, and unlike the frameworks mentioned above, it included routing and network utilities out of the box.
Mithril proved to be a great choice as the final app bundle was 39kb and only 13kb gzipped!
Mithril proved to be a great choice as the final app bundle was 39kb and only 13kb gzipped! We lazy-loaded one external library, html2canvas, which provides great cross-device support for capturing images from webpages. This increased our overall codebase by another 45kb.
After optimising all images and styles, our finished app came with an initial payload of 65kb, and the total at less than 250kb. We forwent full optimisation of all images by retaining svg to ensure pin-sharp feature graphics at higher resolutions. But we turned to WebP for full-size images i.e. backgrounds, product shots and the scorecard, making savings of around 75%.
Savings pay Dividends
All those decisons paid off at the East London pop-up at the Truman Brewery: players from diverse backgrounds turned up with all kinds of smartphones and data-plans. All of those optimisations meant that our crazyfast app enabled everyone to grab their scorecard and rewards in record time.