--- title: Webapplication development for Water Research | De Voorhoede description: >- For Deltares we developed in 3 years 15 different apps for water research in The Netherlands. Curious about the web applications we made? Read more. language: English url: 'https://www.voorhoede.nl/en/cases/15-apps-for-water-research-at-deltares/' --- Case study # 15 Apps for water research at Deltares ## Case summary ### Expertises Vue, Component Library and Data visualisation ### Technologies DatoCMS, Netlify, Vue.js and Mapbox ### Deliverable Web app and Design System ### See result [Go to the Adaptation Support Tool »](https://crctool.org/en/) ## 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](https://www.voorhoede.nl/en/services/data-visualisation.md), Vue.js as a framework to structure the applications, linked to geoservers and a design system. This [design system](https://www.voorhoede.nl/en/services/design-system.md) 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](https://www.datocms-assets.com/6524/1684226321-webapplicaties-deltares.png) 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: ### Our project approach #### Inventory In an inventory workshop we map out the purpose and needs of the specific tool. We determine which parts we can make with the toolkit, which functionalities require our own solution and which project-specific risks we see. #### Validation After inventory, we develop a proof-of-concept for the technical approach. We frequently  link here with new scientific models, so that we can be sure that this works. Do we need something specific to convince the stakeholders? Then we also make a clickable Design Prototype with which we can discuss the end goal. #### Realization Meanwhile, we have developed 15 apps in 3 years using this approach. Such as the Adaptation Support Tool, that urban planners use when realizing a sustainable urban environment. And the Kitchen Table Tool is intended to enable farmers and regional water authorities to determine together what effective measures are to improve water quality. ![Testing the Adaptation Support Tool on a touch screen](https://www.datocms-assets.com/6524/1630077783-deltares.jpg) Testing the Adaptation Support Tool on a touch screen * [← How we helped others](/en/cases.md) * [A brand new Funda →](/en/cases/a-brand-new-funda.md) ## Let's discuss what we can do Flip van Eijndhoven Business Director Don't fill this out if you're human:My name isMy business isYou can email me atYou can call me atMy question or project isGet in touch [Return to top](#top)