Nivi’s World - AR Storytelling App
Together with NIVEA, we were confronted with a uniquely modern challenge. How can we transform “screen time” – famous for dividing kids and families attentions – into something good? Using technology. Over the course of a year, we developed Nivi’s World. A benchmark interactive augmented reality (AR) storytelling app for kids and their parents. One that uses AR technology to bring families together, in the real world. The resulting branded game follows Nivi, the plucky little space explorer who has crash-landed on planet earth. Uniting parents and kids on a mission to help it make its way home.
From vision to a strategy built around the NIVEA brand
Starting with the vision of bringing families together, we developed the concept. We wanted to strengthen the NIVEA brand, by bringing the brands core values “trust, care, and belonging” to life. But we also knew we had to create something highly relevant for our target group: 4-7 year old kids and their parents. So our key challenge was: how can we add value to people’s lives, whilst staying true to the brand?
An insight-driven story concept
We went on a deep dive into the lives and minds of our 4-7 year old target group. Guided by recent scientific and pedagogical research, we found out that kids are on a critical path in their socio-emotional development at this age. They’re just about starting to understand their emotions and the feelings of others. But dealing with them is still a challenge. To add to that, some big external changes are happening in their lives at around this point. Things like going to school for the first time can set them on a very alien-feeling roller coaster of emotions. In these moments, it can easily feel like their world’s been turned upside down.
Creating the first AR app for NIVEA: Nivi’s World
Using the analogy of Nivi, an adventurer from outer space that’s crash-landed on planet earth, we were able to explore an emotional journey that might feel very close to home for kids. Just like our target group, Nivi’s world gets turned upside down. And it’s up to parents and kids to support it on its way to make it home. By first gaining its trust when it’s afraid. Then, by caring for it by giving it confidence. And finally, by giving it a sense of belonging.
A prototype-first approach
We knew we had to test this. So we designed and coded a third of the app’s first story for testing. We chose this as it was key part for establishing the character, and demonstrated our storytelling mechanics and interaction principles. But it wasn’t just a proof of concept to see if our theory could have traction: we needed to find out how kids and parents come to terms with the character, UX, story and design.
Fun fact: we decided early on that Nivi should be gender neutral. And already in the user tests, children were assigning it their own gender.
The next level in AR storytelling
After the strategy was defined, we knew we’d have to do something radical to AR storytelling. After all, the emotional themes needed the richest possible narrative scope. One of the big challenges: the AR experiences created until now have been bound to one scene or setting. So for the first time, we created a more comprehensive approach. Seamlessly weaving 2D interactive, animated “cartoon-like” stories with AR parts told in the space around you. This freedom allowed us to dive deeper into the character – exploring Nivi’s feelings with flashbacks into the past, and insights into its mind. In the final app, the entire story is told fluidly over seven AR and animated chapters.
Enriched with new ways to interact
By bringing the character’s plight to life in AR, families also have to physically come together to support Nivi. Just like a real creature, they can interact with it in different ways at different points of the story: like by talking, giving it a high five, or searching for lost spaceship parts in a huge AR field of orbiting meteors. Even the animated stories need the user to act to help Nivi on its quest. By shaking the phone to align the meteors, or by pressing the emergency landing button. Through these new and playful types of interactions, the family becomes a crucial agent in the character’s emotional journey.
Nivi’s character design – from sketch to 3D
We knew the character had to express a lot of emotions, so we needed an extra-terrestrial with great facial expressions. Things like big eyes, ears and a wide mouth where important here. It also had to be true to the brand, so we made it soft like the creams NIVEA is famous for. It was also important for us to be gender neutral. Working with a concept artist, we started with a longlist with sketches of around 40 different characters and iterated until we had a sketch of the final character. Finally, it was transformed from a rough sketch, to a real moveable 3D character with 138, individually animatable bones.
Creating Nivi’s world – an island with dynamic meteor field
This character was the starting point for developing the whole world. Like an island, which was also rigged so it could react to the characters movements and interactions. Or a landing pod for Nivi’s crash landing on earth, a spaceship for it to fly home through a wormhole, and a meteor field in which lost spaceship parts are hidden. Our world referenced everyday objects and gave them a playful twist. For example Nivi’s spaceship is inspired by retro campervans. Once the objects and props where set, we developed several custom shaders for special effects and materials. In total there are around 600 textures and 120 3D models to explore.
Detailed 3D animations for Nivi in AR
With the story being all about Nivi’s emotional journey, the character had to be “life-like” in how it moves and behaves. Especially its face, which had to show the whole range of emotions so users could empathise with it. These facial expressions were enabled using a complex facial rig and driven keys. Overall, we used an iterative animation process. Starting with a very rough animation blockout it allowed us to find out the right timing regarding narration, interaction and storytelling. Then we were able to keep on refining until launch. In total, there are around 4 minutes 36 seconds of unique animations for Nivi alone.
2D storytelling for an enriched narrative
We had to make sure that the animations could keep up with the AR parts in terms of quality. So 30 unique illustrations for the four different animated story parts where created. Providing the basis for a total of around five minutes of animated illustrations. We then animated these using Unity's 2D animation package making the character complete with bones and skinned meshes – just like Nivi’s 3D animated counterpart. The biggest challenge in this workflow was accounting for the geometry of the image when a static sprite is deformed. The precise placement of each vertex and bone in the 2D mesh can make the difference between awkward mess and a smooth, natural movement.
A story driven user experience
We knew the story was all about emotional connections. So we didn’t want to interrupt users with permissions or other functional UX elements. Thanks to our seamless storytelling mechanic, we could transform pesky permissions into a crucial part of the narrative. The camera for AR scanning was transformed into an intergalactic gadget, the “Space Blaster”, to save Nivi from crash landing. And the microphone became the “chattastic translator” – highly necessary for Nivi to understand “human”. With a twinkle in the eye we also introduced the gadget’s instructions as part of the story – in the style of a 1980s tele-commercial.
A genre-crossing approach to audio storytelling
It was important that both parents and kids could connect to the app’s audio storytelling. Working with German Wahnsinn, a custom composed 30min, genre-crossing soundtrack was composed. Using classical, cinematic film music, jazz, big band space swing and electro, they gave it a complex tonal body that reflects Nivi’s emotional journey. For the entire sound concept, we integrated playful audio gags, quotes, and references that could surprise and delight both young and old. Like hearing the familiar beep of a cars reverse-parking sensor as Nivi turns the spaceship to the wormhole. For the technical implementation we mixed dynamic and linear sounds, which enabled both: gameplay-parts in the different speeds of the users and preset, linear storytelling.
An AR benchmark for NIVEA
Nivi’s World is NIVEA’s first step into AR branded game entertainment. A unique way to add real value to people’s lives and connect to them meaningfully, whilst staying true to the brand core.
