This is the story of Jonas, a young boy who one day found a magical advent calendar outside his home. Being unable to open any of its doors, he discovers that each door has an imprinted symbol on it leading him on a journey through his town to find the relevant inhabitant to help him open one door each per day.
The full story became available in the format of an audiobook, created by Deutsche Telekom for their Christmas campaign.
A teaser to Jonas’ adventure was released as a TVC. Inspired by some of the characters and environments from the TVC, we visualized Jonas’ world from the audiobook into our own illustrated version.
We wanted to bring the story to life and give users the chance to enter the world of the magische Adventskalender from Jonas' point of view, seeing each ‘scene’ through his eyes as they listen to each chapter of the audiobook.
Beyond visualizing, we wanted for people to become a part of the story, making each chapter a mini experience for the users to explore, listen to and interact with.
The experience starts in Jonas' bedroom in the attic, where the magical calendar takes the center place on his desk. We created a 3D model, with all the elements one would expect to find in a boy's room. Giving visitors the chance to step inside Jonas’ own space, while serving as an access portal to all the content within the website. Some of the items are interactive, like the radio that links to the audiobook on Soundcloud or the cardboard on the wooden chest that opens a Google Cardboard version of the attic.
The centre piece of the attic was the magical calendar, acting as access gate to all chapters. Each day a new chapter would unlock, ready to be completed through a unique interaction crafted specifically for each illustration.
The project was a huge artistic craft, with 24 bespoke illustrations created along the way. Eight of them inspired by the campaign's TVC and the rest concepted from scratch.
Visit Day 01 - The Lumberjack "Help the son to bring down the tree!"
Visit Day 02 - The Butcher: "Make a couple of sausages!"
Visit Day 03 - The Choir Master "Create a little song!"
Visit Day 04 - The Street Musician "Feed the dog for a musical reward!"
Visit Day 05 - The Blind Gambler "Uncover how you can beat the unbeatable!"
Visit Day 06 - The Calendar Guard (01): "Fix the coffee machine!"
Visit Day 07 - The Dressmaker "Finish sewing the curtains!"
Visit Day 08 - The Perfumer: "Create your own potion!"
Visit Day 09 - The Ornithologist "Uncover the only non-stuffed animal in the house!"
Visit Day 10 - The Innkeeper "Pour a delicious brew!"
Visit Day 11 - The Calendar Guard (2): "Find all the missing keys!"
Visit Day 12 - Jonas' Father "Destroy what's floating down the river!"
All of these illustrations were created as separate layers and reconstructed in the website as 3D scenes.
Users could pan and rotate around to discover all the craft and detail we put into each chapter.
On top of the story and the beautiful illustrations, we also added a gamification layer to the experience. Users were invited to poke around and discover little interaction points in the scenes.
Visit Day 13 - The Mechanic "Use what you got from the Calendar Guard to help the Mechanic!"
Visit Day 14 - The Punk Girl: "Fix their equipment and get them rockin!"
Visit Day 15 - The Confectioner: "Add the correct final touches to his cake!"
Visit Day 16 - The Watchmaker: "Uncover the secret watch combination!"
Visit Day 17 - The Sport Teacher: "Reach all the checkpoints!"
Visit Day 18 - The Calendar Guard (3): "Watch the film with him!"
Visit Day 19 - The Antiquary: "Find all the missing pieces of the rocking horse!"
Visit Day 20 - The Math Teacher: "Solve the Riddle!"
Visit Day 21 - The Neighbour: "Open the curtains and uncover who she is spying on!"
Visit Day 22 - The Bully: "Hurry! Find a way to escape!"
Visit Day 23 - The Beekeeper: "Find a way to calm the bees down!"
Visit Day 24 - The Witch: "Use your ears to find and free the cat!"
Some characters reward users with items that can be used later in the story. As an example, users got a strawberry and lavender scented potion after visiting the perfumer and later presented that to the confectioner so he could add the final touch to his famous cake.
The website was built in WebGL (with Three.js) and it runs on all modern browsers on desktop, tablet and mobile.