Eurovision 2021: people couldn't come to Rotterdam, so we brought Rotterdam to the people.
The Eurovision Village is normally the heart of the contest: the square where fans meet, hear the music, and spend a week being part of something with twenty thousand other people. Around 180 million people watch the broadcast, and the Village is what turns watching it into being there.
With large gatherings off the table, Rotterdam Festivals needed that atmosphere without the crowd. A livestream page would not do it, because watching alone was what everyone was already doing. A virtual world with a download would not do it either, because the audience was the whole Eurovision fanbase on whatever device they happened to own.
Two things made it hard at the same time. It had to feel like a place, which means 3D. And it had to open for millions of people anywhere in the world on any connection, which is what normally rules 3D out.
It also had to be accessible. A public event paid for by a city cannot leave people out, and a 3D scene is invisible to a screen reader.
The Case
A virtual brand world experience; the first of its kind in the Eurovision Song Contest history.
Our Process
We treat your challenge like our own, shape ideas into a clear experience strategy and craft every detail to create experiences that create lasting connection.
“Own”
We treat your challenge like our own, bringing expertise and perspective to make every idea stronger.
We started with the audience. This was a public event for a city, so success meant how many people got in. Every technical decision came back to one question: does this let more people in.
Our Perspective: Make the Brand World look like Rotterdam
You only feel like you are somewhere when you recognise where you are. So we built the city itself: the Erasmus Bridge, the Euromast, the Markthal, the cube houses.
A fan in Melbourne walking around a city they may never visit is having a Eurovision experience.
Our Vision: Accessible 3D, built in properly
Together with DEPT® we developed an approach we call Accessible 3D. It hooks the 3D elements up to real HTML buttons and links, so underneath the world there is a working website that a keyboard and a screen reader can use. Everyone gets the same Brand World, and nobody gets sent to a stripped down text page.
Our expertise: A whole 3D city in under 16MB
The entire experience loads in less than 16MB, which is smaller than an average video. That number is what let everybody in: phones, tablets, laptops and desktops, on almost any connection, anywhere in the world, with no download and no install.
“Shape”
We shape ideas into a clear experience strategy, built around your audience and your objectives.
The plan: Arrive in Rotterdam, then find things to do
You land in a 3D map of the city and explore it: landmarks to visit, local heroes to meet, facts to pick up, sponsor booths to walk into.
The livestream sits inside the world. You fly into a screen in the city and the official broadcast starts playing, so watching the contest happens in the Village, the way it would on the square.
And all of it stays current during a live event. A festival programme moves around, so the site had to move with it without anybody deploying anything.
Strategic choices
Browser, no install. A Eurovision audience covers every age and every device, and an install step would have halved the number of people who made it in.
The 16MB limit was set before any art was made. It shaped the modelling, the textures and the world itself, and that is the only way to hit a number that small.
Accessible 3D from the start. A separate text version is a second class experience, and a city event cannot hand that to anybody.
Content that updates live, so a typo or a schedule change is fixed in public within seconds.
“Craft”
Using experience strategy, design, motion and code; we craft every detail to create an experience that feels effortless and leaves a lasting impression.
Design
The world had to look like Rotterdam straight away and survive being made tiny. So the city is stylised down to its silhouettes. The landmarks people recognise do the work of telling you where you are, and everything around them is simplified until it costs almost nothing.
Motion
Moving through the city is the whole interface, so the camera does the guiding: flying between landmarks, settling on a booth, diving into the livestream screen. GPU accelerated and CSS animation throughout, with Framer Motion where it helped.
Code
Built with React, React Three Fiber, Three.js and Chakra UI: a 3D virtual event in under 16MB, made for millions of visitors.
Accessible 3D links the 3D scene to native HTML controls, so keyboard navigation and screen readers work against a real document.
A live content system checks the Headless CMS every ten seconds and updates the page in place, which let the event manager change things during the contest with one click.
The embedded livestream runs on an advanced delivery setup to cope with the viewer numbers without adding load to the experience, hosted on Azure with Cloudflare in front.
“...if you are looking for good programmers, high quality code, innovative technology and you like humor; These guys are the ones you’ll want...”
Scope
Result
Eurovision Village was seen by millions of people across the globe, and it gave a contest without a crowd somewhere for its fans to be. The first virtual experience of its kind in the history of the Eurovision Song Contest.
The hosting held up without incident, and the event manager updated content live during the contest with a single click.
It won two Lovie Awards, for Best virtual audience integration and for Experimental & Innovation, an Anthem Award for Diversity, Equity & Inclusion, and was featured on NOS, the national news of the Netherlands.
Together with DEPT® we look back on a good collaboration, and went on to make Inter x Nike together.
Yes, if you put a real page underneath the world. To a screen reader a 3D scene is one blank box, so everything somebody can click on in the world also needs a proper button or link that a keyboard can reach and a screen reader can read out. The 3D then becomes the picture on top of a site that already works. That changes how you build from day one. Navigation, the order things are focused in and the labels all get designed next to the world rather than added at the end, and everybody ends up using the same thing. As an example, Eurovision Village, the virtual experience for the Eurovision Song Contest hosted by the City of Rotterdam, was built on an approach called Accessible 3D, which hooks the 3D elements up to real buttons and links. It was developed by Merlin Studio, a digital studio from Amsterdam, together with digital agency DEPT®.
Decide the size limit before anybody makes any art. A ceiling agreed at the start changes how the world gets modelled, textured and lit, and it is the only way to land on a small number. Trying to slim it down afterwards means cutting the things that made it good. The tricks are simplifying shapes, sharing and squeezing textures, reusing anything that repeats, and building atmosphere with light rather than with detail. Stylising helps twice over: a simpler world loads faster and it ages better than an attempt at realism. As an example, Eurovision Village, the virtual Eurovision experience for the City of Rotterdam, fits an entire 3D city, its interactions and its content into under 16MB, which is smaller than an average video. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Rebuild the place. What people miss is being somewhere with other people, and a location they recognise does far more for that than a better video player. Landmarks, streets and the freedom to wander give an online audience something a schedule page never will. Then put the broadcast inside the place. If the stream lives on its own page, the world turns into a menu for it. If you travel to a screen in the world and it starts playing, watching stays part of being there. As an example, Eurovision Village, the virtual experience for the Eurovision Song Contest in Rotterdam, recreated the city with the Erasmus Bridge, the Euromast, the Markthal and the cube houses, and embedded the official livestream so you flew into the screen and the broadcast began. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Make the page keep an eye on the content system. It can check every few seconds and swap things over on its own, so a schedule change or a typo is corrected in front of the audience within seconds, with nothing to rebuild and nobody to call. The important part is who holds the button. During a live event nobody wants to go through a developer, so the editing has to be safe enough for the event manager to do alone and limited enough that nothing can break the layout. As an example, Eurovision Village, the virtual experience for the Eurovision Song Contest hosted by the City of Rotterdam, checked its content system every ten seconds, so the event manager changed content with one click while the contest was running. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Make it cheap to serve. Files delivered from a network of servers close to people, the heavy drawing happening on the visitor's own device, and no work happening per visitor on your side. Then a huge crowd costs you bandwidth and nothing else. Video is the exception and needs its own plan, because a million people watching one stream is a different problem from a million people opening a website. As an example, Eurovision Village, the virtual Eurovision experience for the City of Rotterdam, was served through Azure and Cloudflare with a separate setup for the livestream, and it handled a global audience without trouble. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Eight to sixteen weeks, and the date is usually not yours to pick, because events do not move. The world sets the pace: modelling, texturing and slimming down an environment takes longer than the interface around it, and the slimming happens throughout rather than at the end. What protects the deadline is agreeing three things in week one: how big it is allowed to be, the oldest phone you support, and the accessibility standard. Then you build the world against them. Leaving any of the three until later is what breaks it. As an example, Eurovision Village, the first virtual experience in the history of the Eurovision Song Contest, was made for the City of Rotterdam by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
More projects
_ Inter Milan x Nike with DEPT®