#CWW — Welcome to Hogwarts is the Cool Website of the Week 47!
Each week we will highlight the interactive digital experience that has impressed us the most. Made by the advertiser or by an agency, in France or elsewhere, this section wants to show that the web can be cool again.
WOW 😱 it’s been almost 3 months that we analyze a 3D website each week! We just reached 300 beta-users on our platform and we wanted to pick an exceptional website to celebrate that 🎉 My favorites from this section are Sobieski, Mercedes and Google, but I think today’s website is directly my top 1 🏆
What is Pottermore?
Pottermore is first known to be one of the most well-known blogs on the Wizarding World 🧙🏻(the extend world created by JK Rowling, including Harry Potter and Fantastic Beasts). But Pottermore is the whole company managing JK Rowling’s interests.
Pottermore, the digital publishing, e-commerce, entertainment and news company from J.K. Rowling, is the global digital publisher of Harry Potter and J.K. Rowling’s Wizarding World.
Pottermore was created in 2012 by JK Rowling and is managed since then by Neil Blair. The Chairman of the Board and Director of Pottermore is also a Founding Partner of The Blair Partnership, a London-based literary agency, and business management company that represents several leading authors including J.K. Rowling. Blair is active in many charities including Lumos, J.K. Rowling’s charity, which works towards the deinstitutionalization of children in Eastern Europe.
The website (click here):
Potterhead or not, we all dreamt about visiting Hogwarts 🏰 Unfortunately, visiting Hogwarts in real life implies traveling a lot, there’s not a place but 7 to 8 different places all around the UK. But you can now, with this immersive and interactive digital experience. The only thing you will need to do is to log in! 👌
After registration, you are in front of THE Hogwarts, on a simple but stylish environment. Gloom combined with fog allows a great immersion without having a too heavy website. It is divided into 3 different worlds and the primary objective (apart from feeling like in a very cool rollercoaster) is to find hotspots. By clicking on one of them, you can discover one anecdote from the Harry Potter story 📚
The navigation is quite simple, the camera is on rails and you can move forward or backward by scrolling, on both desktop and mobile!
The 3 worlds are Hogwarts Castle, the Quidditch pitch and the Forbidden Forest.
- Hogwarts Castle is a quite complete 3D modelization of the outside of the famous castle. You start at the entrance and then it’s a real rollercoaster above and inside the fortress. The navigation is just a pre-designed camera journey triggered by the scroll, and the immersion works just perfectly 💯 To have a look around, you can also drag the camera.
- Mountains surround the Quidditch Pitch, probably made with a heightmap applied to the ground of the environment. The navigation feels like you are flying on a Nimbus 2000 🧹 and try to catch the Golden Snitch!
- The night has fallen when you dare enter in The Forbidden Forest. It’s full of trees, and you could think that so many 3D models would kill the exceptional fluency of the navigation, but there’s a trick here: it’s the same 3D model of a tree 🌲 re-used every time with different orientation angle and scale. The website only has to load once the model!
Last but not least, everything works even better thanks to… gamification 🕹️ The fact of having a countdown of the hotspots found stimulates curiosity and naturally leads us to consult the maximum of these hotspots, thus increasing engagement. I spent about twenty minutes reading all the anecdotes about Harry Potter… what about you?
The agency:
Active Theory is a creative digital production studio based in Venice, California. They specialize in building digital experiences that people love. They have many awards (23 FWA, 11 Cannes Lion, 6 Awwwards, 2 Emmy, etc.)
Rails navigation on a simple but effective journey combined to gamification is a very effective immersive and interactive digital experience.
Try to create your own by putting scrolling animation on the camera on the beta of Naker!
