De Voorhoede

front-end developers

The challenge: develop an encouraging catalogue of water stories

The Netherlands is known for its knowledge of water. To exhibit this knowledge and draw attention to water problems around the world, we helped Deltares, research institute of water and subsurface, with realising a catalogue of human stories from around the world. Our target audience: all world leaders present on the 2018 World Water Forum in Brasília.

The solution: use impressive data visualisation as primary navigation

By working closely together with Jan-Willem Tulp, we succeeded in making the globe the primary navigation element. All stories are 'pinned' to the globe and can be filtered by theme. Users navigate directly to each story by clicking one of these pins. If they continue to read, the world will pan and spin to the location of the next part of the story, and change in color to match the active theme.

"Animation of the globe with on pinned stories on it"
Clicking a pin will spin it into view and load the connected story immediately

The techniques

  • Dato as headless CMS to enable us to have real content right from the start of development

  • Statically generated website using Nuxt.js which redeploys when code or content changes

  • VueX for state management, making the data visualisation respond directly to changing data

The result

  • A first impression that invites exploration through location, themes and tags

  • New stories can easily be told thanks thanks to generic presentation

  • Tight deadline made feasible thanks to Agile methods