Planet Zoo

https://www.planetzoogame.com/

Though it's the biggest and most complex for a game Frontier have developed, designing and building Planet Zoo's website was a fairly smooth process. From regular design and development discussions with the product side of the team, each section/page was refined until the problems needed to solve were elimited and what was left at the end pleased everyone involved (and hopefully the end-users too).

Building on the Vue.js work we'd done with Elite Dangerous, but adding on the complexity of 11 other langauges, component-ising sections and modules meant that chunks of the site could be built out from a development point of view, then easily passed to front-end development, plugged in to the site, and repeated until we were complete - a relay race that worked very well with a small team.

All of this was done in tandem with the game team and the graphic design team to create and build a style for the site from the shared component parts of the design language, so that everything Planet Zoo related felt like it came from the same family, whether you saw something in-game, on social media, or the website, the experience was coherent.

I also got a chance to work on some in-game interfaces, implementing what the UX team had designed in to a web-based app that seamlessly works inside the game's native interface; the animal trading interface and the community challenge rewards (and some other minor things) were implemented by me (front a front-end point of view, the dev work on that is way over my head). If you look closely you can tell the difference, but it's not far off, just missing some bells and whistles...

Pre-order microsite

Before the full website was launched however, there was a pre-order microsite that had some innovations of its own. At the time we had access to a few of the animals and their idle animations, so some in-game green screen render and capture allowed us to use video with a transparent background to show off these animations alongside the upcoming features of the game

This 'micro' site was almost as complex as anything we'd done before, being a Vue.js app, in multiple langauges, on top of the responsive and optimised experience you expect from a website these days. It was an extremely close launch, but we manged it in just enough time to push pre-orders to the top of Steam's charts right when it needed to...