Dutch Digital Design
sharing the best
interactive work from
the Netherlands

Submit case

Jump to articles

Putting biotechnology mixed with lifestyle and fashion at the forefront

Normal Phenomena of Life

by

Normal Phenomena of Life

Digitally sailing through Gehry's Walt Disney Concert Hall

Sculpting Harmony

by

Sculpting Harmony

A bold and deliciously playful brand experience about a fatty future

Hoxton Farms

by

Hoxton Farms

Playful interaction and seriously crafted 3D animation

BrewDistrict24

by

BrewDistrict24

Heritage and Innovation. Amazing immersiveness on a large scale

The Ellinikon Experience Centre

by

The Ellinikon Experience Centre

An atmospheric and beautifully crafted way to digitalise an album

Önnu Jónu Son

by

Önnu Jónu Son

A totally immersive and playful, fun app experience

McDonald's Getaway Island

by

McDonald's Getaway Island

Spending days at this beautifully crafted and innovative digital library

Americana

by

Americana

A flawlessly implemented website with an eye-opening message

The Drop Store

by

The Drop Store

Taking the world of hospitality to the next level, digitally

Be My Guest

by

Be My Guest
show all cases

Dutch Digital Design.
Stories. News. Events.

Jump to cases

Your Majesty: about branding and uniting the curious

Partner in the Spotlight: Your Majesty

Interview

Partner in the Spotlight: Your Majesty

The impact of AI within the creative industry. What our partners say

The impact of AI within the creative industry - part I

Thought Leadership

The impact of AI within the creative industry - part I

Margot Gabel: passionate about connecting digital design with emotions

Margot Gabel Build in Amsterdam & Dutch Digital Design Curator

Interview

Margot Gabel Build in Amsterdam & Dutch Digital Design Curator

Christian Mezöfi from Dentsu Creative: loves detail and 3D design

Christian Mezöfi Dentsu Creative & Dutch Digital Design curator

Interview

Christian Mezöfi Dentsu Creative & Dutch Digital Design curator

Welcome ACE, Cut the Code, DotControl, Lava and Merlin Studio

welcome to five new partners

News

welcome to five new partners

Aurelija Mockeviciute: visual designer & Dutch Digital Design curator

Meet Aurelija Mockeviciute from Clever°Franke

Interview

Meet Aurelija Mockeviciute from Clever°Franke

To be a Robot Kitten: passionate about creative technology

Partner in the Spotlight: Robot Kittens

Interview

Partner in the Spotlight: Robot Kittens

Dutch Digital Design does Dutch Design Week 2023

Dutch Digital Design does Dutch Design Week 2023

Event

Dutch Digital Design does Dutch Design Week 2023

ADNIGHT 2023: we present to you the Dutch Digital Design route

Adnight - Dutch Digital Design route

Event

Adnight - Dutch Digital Design route

Erick de Jong: creative director, one of our curators, Japanophile

Curator's choice - Erick de Jong from Fonk

Interview

Curator's choice - Erick de Jong from Fonk
show all articles

A totally immersive and playful, fun app experience

McDonald's Getaway Island by

View caseAgency

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