Hotel Transylvania: Crazy Cruise and Hotel Havoc
Movie-Inspired Mobile Games for Kids and Parents To Play Outdoors
Project Challenge: To create an outdoor, physically active augmented reality experience for families and young children that embodies the tone, wonder and imagination of the Hotel Transylvania franchise.
Project User: Families looking to positively enhance their outdoor physicality through a family friendly brand and the power of collaborative, embodied, AR-driven play.
Project Role: I was the Lead Product Designer on this project. This included research, design, prototyping, partner/stakeholder management and project management of development.
The Challenge: The challenge here was to create a mobile outdoor game for families to play together that would capture the spirit of the imminent Hotel Transylvania 3 film. We not only needed to validate our concept with key stakeholders at Sony Pictures Animation, but also would need to employ some relatively new augmented reality technology to bring the game to life…and hit our target prior to the film’s release!
The Discovery: Our partner in this challenge was Sony Pictures Animation who had taken notice of our previous products that encouraged outdoor activity through mobile gameplay. They wanted something and fresh in advance of their movie release that included the following:
An app that leveraged the most recent augmented reality technology. This not only meant scannable markers, but more so, the ability to employ ARKit and ARCore technology as key enhancements for gameplay.
Parent-Child interaction. Given that the film was all about challenging/establishing bonds between parent and child, there was a request to explore this theme in our gameplay. This meant collaborative gameplay was encouraged.
Leverage the successful model of our previous Biba products.
Hit the deadline before the film’s release!
With the core model of our gameplay already established through previous research and development (see case study for Biba Playground Games), this project was largely a creative direction and gameplay design challenge.
Design Exploration: We performed a significant exploration of all of the characters in the previous Hotel Transylvania films, reviewed their maturation and development between the movies and established the nature of their characters and relationships. We also plumbed the depths of the fictional universe as it currently existed to distill all the relevant set pieces and backdrops that could be used from the upcoming movie. We elected to design a game that hypothetically took place in between events during the movie’s main beats.
Most critically here in terms of the app’s interaction was to find mini-games that parents and kids could play on the screen together, but also to make sure that those same mini-games would be evocative of challenges found in the movie universe itself. We knew that typically, our model of games would centre the parent as the ‘host’ of the experience, but this time around, we wanted to place the parent and child as the co-stars of this experience somehow such that it really drew on the themes of the film experience.
Early screen flow for Crazy Cruise experience…a tag team experience for parent and child.
Augmented Reality: Given the emphasis on augmented reality, we also needed to test and establish the AR technology in the game as a critical pay off. The AR was going to be the thing that rewarded kids and parents for their collaboration, by bringing some of the ancient monster relics and treasures from the HT universe into the real world. The technology was new at the time, so there was the hurdle ensuring intuitive, friction-free functionality for parents on first use. But creatively speaking, we needed to come up with IP-friendly solutions to what we could represent realistically and economically in terms of overhead.
Some rough mock-ups of screen compositions for the ‘Trap’ moments….
Proposed Solution: To solve the challenge then of incorporating all of the above, we decided to create a design that allowed both parent and child to pick their own characters, with both players then moving throughout the playground together as directed and performing mini-games together as well - all with the parent holding the mobile device. After all, it was critical that we still ensured that the parent was holding the phone throughout the experience for safety reasons. The objective for our parent/child duo would be for them to visit different monster islands and to relocate lost relics and restore them to their rightful place - a ceremony that would be realized through full augmented reality.
In terms of the AR feature, we researched all of the available monsters in the HT cannon, established compatible relics and theme treatments alongside our partners, ran several isolated prototype builds to test all of the candidate objects, and upon final selection by both internal and external stakeholders, put the final pairings into production.
In order to empower children to feel like they were the heroes of this experience even in a co-op scenario, we also designed a ‘Trap’ mechanic. This mechanic would take the parent out of the game temporarily until the child managed to ‘save’ them by performing a physical function on a piece of playground equipment and returning to the parent and phone. This was a new take on our existing gameplay philosophy, but one that we wanted to try on a more brand-motivated audience.
Given that Crazy Cruise was intended to be a collaborative experience for parent and child, all our mini-games played into this dynamic.
…and what’s a Hotel Transylvania game without some yuck factor!
Testing The Design Premise: Given that we were building the Crazy Cruise titles off of the core model of standard Biba games, the UX period went quite quickly as we had a lot of our original designs to lean on that were the inspiration for the original partnership. As with our core product, we tested Crazy Cruise in multiple phases to ensure that our ‘dual audience’ user model would hold up, that the trap mechanic would function as expected with the appropriate user scaffolding and the AR moments would be easy to use and follow along with. We began with local tests with in-house staff and children, after which we then refined the design to accommodate simpler wording in our directions, more intuitive visual scaffolding for mini-games and more visual guidance for our augmented reality moments. After this period, we opened up to external families to test our alphas and made final refinements in alignment with stakeholder feedback. With enhanced confidence throughout this process, we were green lit to begin production on Hotel Havoc: a similar mobile game based on the HT tv cartoon.
Kids enjoying the Crazy Cruise AR moment during our live test runs…
Snapshot of early user flow for our second Sony title, Hotel Havoc
Our second title, Hotel Havoc, earned a special recognition for bringing the physical structure of the Hotel Transylvania to the playground.
Evaluation and Validation:
Maintaining constant stakeholder engagement, we produced the Crazy Cruise title on time and on scope. But furthermore, it instilled enough confidence in Sony to have us do a second Hotel Transylvania title in a similar fashion which was a significant validator for us. This game, Hotel Havoc, would follow largely the same tight process in managing scope and creative alongside Sony, but with a greater emphasis on encouraging spurts of intense vigorous physical activity.
A few further items of note include:
Hotel Transylvania: Hotel Havoc would be nominated for a KidScreen Award as well as a Rockies Award. Both nominations would be for the notable recreation of the hotel lobby in 3D AR (see right).
App ratings continue to remain 4 out of 5 and higher for both Hotel Transylvania titles.
We have since been in discussion to explore the translation of other potential Sony properties to our outdoor play design model.