Interactive screens / De Warmste Week

People who organized a campaign to raise money get to tell their stories on stage on live radio or in one of the on-site video booths. While they wait their turn to bring their anecdote, they create their personal flame. The personalization happens on their smartphone via an interactive web experience. The campaigners can choose between different outfits, accessories, and looks to create a flame that fits their identity. Once they compose a character, the website returns a unique QR code which they can scan in the video booths or on stage. The flame is now waiting for them to push the big red button. Once they push the button, it will come to life in the virtual worlds on the LED screens on top of the radio house.

‍

Ideation

Like most ideas, our final concept originated from good old brainstorming. Together with VRT’s Creative Director, we needed to come up with an idea that was both technically feasible, could function standalone, and, at the same time, had to be fun and interactive. In addition, the concept had to be suitable for both young and old, as De Warmste Week reaches a vast audience.

So, after brainstorming, we came up with an idea that ticked all our boxes. The symbol for De Warmste Week has always been a flame — so what if we gave everyone a personal one? This was it. We started building.

Personal flames

Together with our sister company, Embassy X, we created the designs and built an interactive and accessible website where campaigners can compose their personal flame. You can give it certain clothes — pants, skirts, bows — and even accessories — think of earrings or a crown — so the flame can genuinely be your own.

Of course, to show the strength of the personalized flames, we made a few examples. We gave each of the hosts a personal character, in addition to the main sponsor, KBC, who received a blue flame.

Het Warmste Huis

When a campaigner gets to tell their story on air and push the big red button at the end, their flame will come to life on the roof of Het Warmste Huis. More specifically, when the button is pushed, the audience will hear a recognizable tune, the screens around the house light up, and the flame literally flies up to the middle of the roof. In addition, the flame will show up in the studio, so the campaigner in question see it as well. To make it even more interactive, they can make the flame jump and dance around by controlling it on their smartphone.

The interactive worlds

In total, we designed and developed five unique worlds: a basic, snow, candy, grass, and disco world. Each of these worlds has a very distinct look and feel, with custom 3D assets as the cherry on top. The virtual worlds can be managed via an admin panel in real-time. By pressing a button, worlds can be switched; personal flames can be added, removed, or even put to dance or jump around. In this world, the flames can truly live their lives and walk around.

The digital Christmas tree

De Warmste Week is all about bringing people together. Everyone is welcome, of course, even if they did not raise funds or campaign. In the city of Hasselt, anyone gets the chance to make their personal flame dance.

You start by creating your own flame and scanning your QR code at the base of the Christmas tree. Immediately, the lamps above the LED panels start flashing, and your character comes flying in at the top of the tree. Then, it walks around the tree twice – using the garland as its path – while you can make it dance or jump around using the controls on your smartphone. Once arrived at the bottom of the tree, it sticks around for a few moments and then disappears.

‍

Video booths

As only a select group of people can bring their stories on air, we also wanted to enable other campaigners to show off their efforts. Any campaigner can access a De Warmste Week video booth on one of the sites to shoot a video to tell their story. Of course, we couldn’t forget their personal flame! When they are done recording the video, they can press a red button for the flame to function as an overlay.

To make this even more fun, these flames also appear on the roof of Het Warmste Huis. They don’t come flying in as the others – that would lead to ultimate chaos – but they do come to life by popping in via the sides of the screens.

How we made this possible technically? By scanning your QR code at the scanning station, the attached NUC ran a NodeJS program to capture the QR code and send the information to the server. Moreover, we had a NodeJS web server running on an AWS EC2 Instance. This server was used to host the website, create QR codes, create and maintain sessions, and communicate between users, scanners, and all Unity instances.

In total, we had four Unity instances running simultaneously. One for the main stage, two for the action villages, and one for the interactive Christmas tree.

3D

However simple these flame characters may seem, we chose to fit them with a full character animation control rig to allow as many poses and tweaks as possible. The rig has a built-in system to outfit our little flame with all the clothes, jewelry, and accessories to create as many variations as (in)humanly possible—all of this while allowing secondary animations while they are jumping, walking, or dancing.

We added as many details as possible, like hats, crowns, and headphones bobbing around or earrings wiggling—all that good stuff. The four presenters got their personalized hair assets, making them recognizable to the viewers outside the house.

3D worlds

All worlds were built for real-time purposes, and they had to fit within the correct frame mapping of the screens on top of the Warmest House. We had to juggle angles, walkable space, viewing angles, and real-time framerates to get this working for all five universes the flames reside in.

We also added extra offscreen elements to anticipate other screens or aspect ratios to ensure the content was there and ready for changes.

‍

Rigging and animation

We modeled, animated, and hand-painted all assets within the 3D application to preserve the specific character design of the flame character.

The hero/appear animation was a challenge because the options to animate are limited if the character has no arms. Luckily, this was hugely compensated by the availability of two knees on each oversized leg…

Animations also had to be designed in a way they are loopable forever and can cross over into the next animation, like going from an idle loop into a walk and then bursting into vivid dancing and back into an idle loop again.

‍

UI & copywriting

With the help of Embassy X, we enhanced our characters and application in terms of copywriting and user experience. Regarding copywriting, we had to keep a few requirements in mind. For instance, the tone of voice had to match all communication around De Warmste Week. As this initiative reaches both young and old, communication had to be understandable for all. This means scratching all difficult words and simplifying the navigation by using intelligent, intuitive micro-copy within the brand voice.

When it came to UI, the application had to be easy and intuitive, all fitting into the style guide of De Warmste Week. Of course, we also wanted the user to get the best experience possible, so we focused a lot on UX design. This started by expanding the necessary user flows. For instance, when putting a character together, the' happy' flow had to guide the user through the application by clarifying the different categories and configurations. For instance, much thought went into the confirmation and success pages. Of course, we also had to define the 'unhappy' flow – anticipating potential errors when scanning, creating, and saving characters.

To enhance the user experience even more, we integrated more visual support. For instance, we added an image of the scanner, so people knew what they had to look for in advance.

Last but not least, the application had to be compatible with any mobile phone, including the new iPhone with a dynamic island. To accommodate this, we adjusted the logo and button placement accordingly. In essence, much thought went into creating the most frictionless and fun user experience possible.

Team

Client: Simon Van de Gracht
Brand: VRT, De Warmste Week
Creative Director: Joachim Vandoorne
Design: Jean Nguyen Huy, Ward Rombaut, Kamiel Bral
Unity, back end, and hardware development: Wim Vanhenden
Front end developer: Aagje Reynders
3D: Kurt Drubbel
Client Director: Hannah Patronoudis
UX/UI: Ashley Noben
Copywiriting: Sigrid Spaas, Katrijn Van Hauwe
Lichtontwerper: Karel Perneel
Chef techniek: Wouter Degrave
Video en audio: Jo Pauly

‍