Responses by Remo Brunner, managing partner, Nueva.

Background: For the Geneva-based foundation Toilets4All, which seeks to improve sanitation conditions worldwide, we created an attractive, intuitive and easy-to-understand website to present a study conducted by University College London. The website not only shows the main message of this study—that clean sanitation has an impact on all seventeen of the United Nations’s Sustainable Development Goals (UN SDG)—but also informs the user in detail about the interrelationships between these points by presenting 130 of the 169 targets with synergies or trade-offs. The purpose of this site is to generate attention for the Toilets4All Foundation in the UN SDG context and to attract potential supporters. Therefore, the main target group is interested journalists who take on the topic, write articles about it and raise awareness of the issue.

Favorite details: We broke up the UN SDG’s theme and reinterpreted it with a modern visual re-creation of existing visual elements, a daring variable font and new three-dimensional shapes. We did this without changing the main recognizable features of the SDGs: the seventeen colors, which, in our implementation, change seamlessly with the whole scene. Color, object, ground, atmosphere, microinteractions—all elements are perfectly coordinated.

By incorporating three.js and Canvas elements, we visualized 3-D objects that can be morphed seamlessly into each other through Blender Shape Keys. This helped our client stand out from numerous interpretations in the past in terms of the visual appearance of the SDGs—and not at the expense of comprehensibility.

Using the latest front-end technologies and libraries—GSAP, Nuxt, three.js and WebGL—through targeted optimization of loading algorithms and the use of lazy-loading techniques, we achieved an ultrafast-loading website despite complex animations and interaction calculations. In addition, the load on the device’s CPU and GPU was kept as low as possible through ongoing monitoring during development to display animations as smoothly as possible—even on older-end devices.

Modularity at the three.js level is guaranteed at all times. In the code, the elements are automatically sorted and displayed. All page content can be edited at any time via the Storyblok headless CMS.

Navigation structure: To ensure quick access to the individual SDGs, we added a second navigation option via the SDG “map.” This way, you don’t have to scroll through the entire page if you are only interested in one SDG. Thanks to the extended routes, direct access via URL to different SDGs is possible, so scenes can be indexed individually—despite the one-page format.

New lessons: Above all, we learned what a huge impact sanitation can have on people’s health and that it is important to raise awareness about it. As web developers, this was our first website with so many 3-D objects, and it gave us a deeper understanding of all the loading optimizations available to us.