Case summary


Vue, Component Library and Data visualisation


DatoCMS, Netlify, Vue.js and Mapbox


Web app and Design System

In 3 years, 15 apps for water research

The challenge: how can we make the results of scientific models accessible for professionals in an efficient way?

Deltares is the largest and leading knowledge institute in the field of water and subsurface in the Netherlands. 

For research and advice nationally and Internationally, Deltares uses complex models and large data sets. This provides valuable information for governments and businesses. All with different questions: what is the probability of flooding? What is the effect of increasing green roofs in my city? To answer these questions, Deltares develops all kinds of tools for specific target groups with information for their daily work. The result: a lot of separate applications, which are constantly redeveloped from start to finish. That should be more efficient. How can we develop different tools in a fast and consistent way?

De Voorhoede has helped us build a toolkit which we use to prototype and develop faster every day. That leaves us with more time for research!

Gerard van der Kolff, Head of Software Datamanagement and Innovation

The solution: a toolkit with a shared approach and reusable components

What do these various tools at Deltares share? They are all map applications with buttons and other elements for interaction, linked to web services for data and simulation models. Together with Deltares, we defined a fixed toolkit for this: Mapbox for interactive maps, Vue.js as a framework to structure the applications, linked to geoservers and a design system. This design system consists of principles on how to design the applications and a set of reusable components for shared functionalities and with the same look & feel:

3 apps with similar functionalities
Three apps from Deltares with similar functionalities

Yet every new tool is different from the previous one: different data, a different calculation model, different target groups and different user flows. How do we ensure that we continue to put user needs first when customization is required, and do not lose ourselves in the efficiency of the toolkit? For this we use a shared project approach:

Testing the Adaptation Support Tool on a touch screen
Testing the Adaptation Support Tool on a touch screen

Let's discuss what we can do

Nena de Clercq

Head of Sales & Operations
Let's discuss what we can do