MYER logo

MYER

Connected Christmas Stocking for kids

  • Role Technical Director
  • Stack Amazon AWS, Node.js, WebGL, Babylon.js, Vue.js, Webpack, GSAP, Html5, Sass, JavaScript
  • Agency Clemenger BBDO
  • Year 2019
Animated Christmas Stockings

The Myer Global Positioning Stocking is a connected IoT product designed to ensure Santa can find millions of Aussie kids wherever they may be spending their Christmas.

The smart stocking pairs with the parents’ smartphone via the Myer Connect mobile app.

Kids can access a crafted web experience that was primarily designed for use on a tablet, and adapted for use from age 4 and above.

Web experience UI preview

From there, kids can write letters to Santa, prepare their Christmas wishlists, and follow Santa’s journey on an interactive 3D planet.

Adults can access a private space in the web app to view and share their kids’ lists, thus helping to make the magic of Christmas even more real.

Parents dashboard to see kids lists
Parents dashboard to see kids letters

My role

As Technical Director, my role involved to:

  • Lead the project build and the technical team from early stage to production.
  • Liaise with both internal and external stakeholders to help with creative, scoping, prototyping and client presentations.
  • Design and prototype around feasibility and creative execution. Trying to push boundaries on what was achievable from a technical standpoint, all happening from the browser and using 3D rendering.
  • Ensure scalability and resilience, making sure the platform and web app are fully operational on the days leading to Christmas.
  • Work on security to ensure location data, as well as kids data and parents data is safe.

Key results

  • Hundreds of Christmas Stocking sold.
  • More than 800 letters sent by kids to Santa.
  • More than 1,200 wishlists created, driving MYER sales up.
Kids iPad experience preview

Technology

To ensure security, scalability, and resilience of this always-on platform, we leveraged Amazon AWS infrastructure, focusing on the Serverless stack and services such as Cognito, AppSync, Lambda, and Aurora Serverless.

Babylon.js was used to deliver on the 3D experience, while GSAP was used to all 2D animations and interactions. To bring everything together, we used Vue.js as our main Framework.

One of the biggest challenge was to make the experience work smooth on tablets, and usable for kids 4+ of age who don’t know how to read and can only rely on visual clues to navigate and interact. To make it possible, we’ve had to work very closely with ux designer and test early with kids of various ages.