Case study

Discover the "joy of moving" by travel the distance between Milan and Dubai, step by step.

Play the video
Play the game

or scroll down to explore the ecosystem

Challenge

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.

  • 6 schools

    In Milan and Dubai

  • 5 weeks

    The duration of the initiative

  • 9.709.504 steps

    The required steps to reach the goal

  • 1 live event

    To connect two cities

4 key activation elements to connect and create an omnichannel experience.

Solution

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.

  • NFC bracelets

  • Interactive kiosks

  • 3D web-game

Design concept

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.

.01 Engage

Wearable technologies and IoT to allow an "always on" experience.

Steps-counter NFC bracelet

  • 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.

Kiosk development

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.

  • WebGL modelling and animation

    to represent the avatar journey and to give an engaging visual feedback to the kids’ interactions.

  • WebSocket

    to update the steps count to all the kiosks in real time.

  • NFC reader

    for an easy-to-use interaction and a faster data transfer.

  • Autostart, autorecovery & remote control

    to plug and setup the kiosk mode safely in the easiest way possible.

.02 Entertain

From real life to the digital world...

To keep the kids motivated the steps collected in real life became credits to use in the online game.

3D web 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.

  • Game design

    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.

    • Dubai desert
    • Mediterranean sea
    • Italian hills

See how far you can go.
Play in one of the three different stages.

Play the game

.03 Surprise

...from the digital world to real life, again.

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.

Live connected events

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.

Event game development

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.

  • Remote 2vs2 mode

    New game logic, from single player to remote 2vs2 and a new game scenario.

  • WebRTC video-call

    WebRTC API integration for real-time video-call.

  • Kinect JavaScript API

    The Kinect "skeleton stream" was used to define our own gestures system.

  • WebRTC remote controller

    To switch the game mode (solo-mode / 2vs2) and check the real-time gameplay status.

Tech overview

Our approach

The choice to use HTML5, CSS and JavaScript as development stack allowed us, a single team, to work on all the technological aspects of the project enabling us to efficiently deliver the products in the desired contexts. Our development strategy has been to put in place a single core code-base and a lot of reusable components/assets.

  • Front-end

    Responsive website, mobile web-app and desktop kiosk app (via NW.js) were used to deliver the different products.

  • Back-end

    NodeJS, PeerJS and MongoDB were used to manage the server-side logics and the real-time data.

  • Automation

    Npm, Bower and Grunt were used to improve the development workflow and to package the applications.

Development pillars

Cross-platform capabilities

Desktop & mobile browser, mobile web app, desktop native app;

3D rendering at runtime

WebGL & ThreeJS, 3D models & generative environment;

Real-time communication

NodeJS & WebSocket, WebRTC, Kinect API;

Development hot-topics

  • Game logics

  • 3D visual crafting

  • Performance optimization

  • Sound integration & audio fx

  • NFC reader integration

  • WebSocket & WebRTC real-time connections

  • Responsive game & UI

  • From single player game to remote multiplayer game

  • Kinect API integration & custom gestures

  • Complex servers infrastructure

  • Remote controller

Servers & DB

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.

  • Server 1

    Dedicated to the kiosks logics and services.

  • Server 2

    Dedicated to the website logics and services.

  • Server 3 (PeerJS)

    WebRTC connection + PeerJS clients connections brokerage helper.

  • Server 4

    To Manage total scores of the event game.

A big challenge requires the right team

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.

  • Matteo Betori

    Digital Creative and Design Director

  • Gabriele Giannotti

    Tech Lead & Project Manager

  • Matteo Macellari

    Game Developer

  • Gianluca Cenacchi

    UI Designer

  • Michele Scorsipa

    3D Modelling and Animation

  • Benedetto Bernardini

    Back-end Developer

  • Andrea Boschini

    Front-end Developer

  • Alessandro Pantano

    Account Executive

  • Nicola Toccaceli

    Sound Design

  • Tommaso Betori

    Account Manager

  • Massimiliano Ambrosini

    Filmmaster Creative Director

  • Martina Uggeri

    Filmmaster Project Manager

Copyright © 2016 ThinkingAbout™ - All rights reserved