A totally immersive and playful, fun app experience

A great collaboration between Dutch digital experience agency 51North, creative brand experience agency TBWA\X and 3D animation studio Colorbleed for McDonald's Netherlands: McDonald's Getaway Island. A campaign for the festive season. Created as a fun, immersive experience to get away from the December madness. Four virtual worlds with five custom games, giveaways and special offers. Our Dutch Digital Design curators loved it! 

Objectives & strategy

Growing the McDonald's digital footprint by engaging users, and growing the number of active users of the McDonald's app. 

December is the most competitive month of the year for retailers. Dutch consumers are bombarded with brands fighting for their attention. To truly stand out, the agencies needed to come up with a disruptive approach.

As the McDonald's app already has a big user base, it made sense to use the app in the battle for attention and connection. Also, previous McDonald's app events had been popular in December in the past: Gift Calendar and X-Masters. These events attracted more than 100,000 users. Therefore, it was only logical to conclude that this target group of Gen Z users would be anticipating another exciting digital McDonald's event in December.

Behind the scenes - the collaboration

TBWA\X came up with the overall vision for the campaign. The objective for 51North was to create a getaway island and user interface full of wonder and excitement - providing a fun escape from the hustle and bustle of the Christmas season.

They carefully curated every detail of each setting to ensure that users would feel like they were truly transported to another world - through a cohesive design language that harmonised every element. Making the experience feel like a true getaway.

51North had collaborated with Colorbleed in the past, and they were confident that - together - they could create something truly engaging.

Throughout the entire production process, communication between 51North, TBWA\X and Colorbleed was efficient: weekly stand-up meetings were held to to share and discuss progress. Additionally, McDonald's actively participated in many of these sessions - showing involvement throughout the entire production process.

Behind the scenes - technologies used

From 51North's initial discussions with TBWA\X about the creative concept, it was clear that the key to the campaign's success would be to craft this beautiful, immersive world with WebGL - for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.

Mack - the 3D animated cartoon guide - was entirely made in a Three.js environment - separate from the different worlds and their content. 

The four different worlds were powered by a cubemap - cube mapping is a method of environment mapping that uses the six faces of a cube as the map shape - and world-unique 3D models. By using masking techniques and different shaders the four worlds really came to life.

The campaign was a fusion of different frontend and backend technologies. 51North used Nuxt as the frontend framework, Three.js for WebGL integration, and Phaser.js for game development. They relied on Firebase (including Hosting, Firestore and Functions) to power the server-less backend.

Using Firebase allowed them to prioritise frontend-oriented challenges. It helped them tackle intricate concerns such as load management and backend performance. Firebase seamlessly handled scalability, making the whole experience run more smoothly.

Behind the scenes - animation & technology

The most important factor for achieving smooth animations, is to ensure that the browser can render each frame optimally - usually resulting in a steady minimum of 60fps (frames per second).

51North used a balanced and thoroughly-tested combination of the following technologies:

- GSAP and CSS for the basic frontend animations
- Lottie animations to convert After Effects motions to vector animations
- Three.js and WebGL Shaders for the 3D animations and worlds
- Phaser.js for the development of the games

Results

• more than one million visitors of the app in December
• more than 4 minutes spent exploring the different zones of the island
• exclusive items in the fanshop sold out in minutes

Awards

• Webby Award winner - category: advertising, media & PR Game or Application
• Nominated for McDonald’s internal award show ‘The Feel Good Marketing Awards'

Gorgeous world design. I love how the products are all nicely weaved into the design of the world. Well executed. And all animations are smooth. Cassie Ng - Dutch Digital Design curator, senior designer @ Rōnin