Responses by B-Reel
Background: For the long-awaited release of the Netflix and Silverback Films nature odyssey Our Planet, B-Reel teamed up with World Wildlife Fund (WWF) to create Ourplanet.com: a digital platform to make the series’ impact go far beyond the series itself. For too long, there has been apathy around the issues facing our planet, while the solutions have felt too complex, preachy or difficult to connect with on a local level. We wanted to bring climate issues to a mainstream audience by bridging the gap between the breathtaking content of Our Planet with a digital experience that lets users dive deep into our natural world.
Highlights: Ourplanet.com consists of three major parts: the library, the Explorable Globe and Voice for the Planet. The content in the library ranges from behind the scenes from the series to interviews with environmental advocates like Sir David Attenborough. With immersive features like the Explorable Globe, users can explore the habitats introduced in the series. Finally, Voice for the Planet lets users pledge their voices for a cause that is most relevant to them, representing a commitment to make lifestyle changes.
Challenges: Planning the structure and designing a user experience without knowing exactly what the content might be. As a result, we had to assume the layout of some pages, specifically the data visualization modules of the Explorable Globe.
Favorite details: Our approach to the design was defined by the tone of voice of the series. We wanted to be able to switch the way we talked to users depending on the subject reflected in the choice of typography. For data and serious facts, we opted for an elegant, slightly bookish serif typeface while we chose a playful, geometric sans to convey more lighthearted messages.
Navigational structure: Because the content is incredibly rich and each habitat has its own page, we wanted to make sure that users can jump to any habitat directly from the main navigation menu. That’s why we separated it into two sections, “Explore” and “Get involved.”
Technical features: To develop the front-end, we used Nuxt.js, a framework to create universal Vue.js apps. We used Vue.js to create the views and components, as well as to manage routing and localization. For the visuals in the Explorable Globe and Voice for the Planet sections, we used Three.js. We also decided to statically generate the site instead of using SSR or an SPA, in order to maximize SEO and minimize server configuration, maintenance and resources. Therefore, we can cache it under a CDN, which handles the traffic load and optimizes the site speed and delivery guaranteeing zero downtime. In order to update the site’s content and create new pages, we made a bespoke CMS that handles all the information and sections of the site. To handle the preview of the pages without the hurdle to generate them, we used a SPA version of the static site, which consumes data generated by the CMS.