Create an omnichannel digital experience to launch the CSR Kinder+Sport initiative for the MEA market, in conjunction with Milan Expo 2015. The aim was to promote the daily physical activity as a healthy and fun habit among kids, creating a bridge between Milan and the next hosting city Dubai.
In Milan and Dubai
The duration of the initiative
The required steps to reach the goal
To connect two cities
4 key activation elements to connect and create an omnichannel experience.
To get the kids involved with a seamless immersive experience, we created an ecosystem of touch-points including NFC bracelets, interactive kiosks and a dedicated cross-platform 3D web-game, blurring the borders between online and offline.
We envisaged a journey through desert, sea and land, crafting a digital low-poly 3D environment where the Kinder+Sport avatar would symbolically represent the collective kids run connected through a wide range of touchpoints.
The kids were equipped with a NFC step-counting bracelet which monitored their daily physical activity. They were asked to "download" steps everyday at the interactive kiosk in school, each one contributing to reach the common goal. All the kiosks were connected in real-time with each other permitting constant and reciprocal counter updates.
This allowed a great level of engagement among the users, creating a sense of teamwork and participation. To motivate students, each one received a custom animated visual feedback based on their individual results.
The kiosk displays the actual totalized steps. An update was broadcast to every kiosk each time users downloaded their steps by the kiosk NFC reader.
to represent the avatar journey and to give an engaging visual feedback to the kids’ interactions.
to update the steps count to all the kiosks in real time.
for an easy-to-use interaction and a faster data transfer.
to plug and setup the kiosk mode safely in the easiest way possible.
To keep the kids motivated the steps collected in real life became credits to use in the online game.
We created an HTML5 3D cross-platform endless-run game, working on all project aspects, from the concept and logics, modelling and animation of the character and different environments, to the sound design.
WebGL API and ThreeJS library were used to create all the interactive 3D environments and to keep the game playable on desktop and mobile devices.
Visual appearance, playability and performance were the main targets we kept in mind during the whole development of the game. A special focus was given to the optimization for mobile devices and Kinect to guarantee a seamless experience at home, on the move and during the final event.
Step by step the game evolved in three different stages describing the journey of the kids from the Dubai desert to the Italian hills, passing across the Mediterranean sea.
To celebrate reaching the activation goal we transformed the game into a physical multiplayer installation connecting the Ferrero pavilion at Milan Expo to a Dubai venue in real-time.
The installation allowed the children to play together, two vs two, in the same virtual environment despite their physical distance. By using the Kinect sensor children became the controller of their digital avatar movements in the game.
We managed the simultaneity of the Milan and Dubai events, taking care that every aspect from synched remote gameplay to kinect sensors was performing properly.
New game logic, from single player to remote 2vs2 and a new game scenario.
WebRTC API integration for real-time video-call.
The Kinect "skeleton stream" was used to define our own gestures system.
To switch the game mode (solo-mode / 2vs2) and check the real-time gameplay status.
Responsive website, mobile web-app and desktop kiosk app (via NW.js) were used to deliver the different products.
NodeJS, PeerJS and MongoDB were used to manage the server-side logics and the real-time data.
Npm, Bower and Grunt were used to improve the development workflow and to package the applications.
Desktop & mobile browser, mobile web app, desktop native app;
WebGL & ThreeJS, 3D models & generative environment;
NodeJS & WebSocket, WebRTC, Kinect API;
To increase performance and avoid simultaneous shutdown a WebSocket interconnected infrastructure was created on top of four different NodeJS servers. MongoDB was used as JSON-like document database. Each server exposed to its own client dedicated web-services via WebSocket & REST.
Dedicated to the kiosks logics and services.
Dedicated to the website logics and services.
WebRTC connection + PeerJS clients connections brokerage helper.
To Manage total scores of the event game.
The making of "Kid steps count" lasted for three months and was made possible by the commitment of each single person involved in the project.
Digital Creative and Design Director
Tech Lead & Project Manager
3D Modelling and Animation
Filmmaster Creative Director
Filmmaster Project Manager
Copyright © 2016 ThinkingAbout™ - All rights reserved