B-RAIN

Context

For the start-up Spatwater, my teammates and I created a mobile prototype that allows users to see when the rainwater buffer is full, when it needs to be emptied, and when it hasn't rained for a long time.

We carried out this project for the start-up Statwater. They assist governments and companies in becoming future-proof and water-robust by providing expertise in the areas of water quality, the Water Framework Directive, and climate adaptation.

This project was carried out in collaboration with two teammates. I worked on both the design and the development of the prototype and I was acting as the contact person. I was involved in designing the application’s workflow and user experience. I also helped design the interface and created the illustrations for the application. On the technical side, I was responsible for setting up the tech stack, developing the designs, hosting the application, converting it into a mobile app, and displaying and transmitting data.

Concept

Weather extremes in the Netherlands are becoming increasingly frequent. On the one hand, periods of drought are becoming more common, and on the other hand, we are experiencing more extreme precipitation, resulting in flooding. As the Netherlands, we want to be prepared for this. In the average municipality, 50 to 60 percent of the total surface area is private land. It is therefore essential that private spaces are also designed to be climate-adaptive. This means that residents must be persuaded to become climate-adaptive. One way of doing this, which can partially buffer both drought and extreme precipitation, is through the use of rain barrels.

According to Spatwater, it is essential that private spaces are also designed to be climate-adaptive, because in the average municipality, 50 to 60 percent of the total surface area is private land. This means that you have to convince residents to become climate-adaptive.

Their idea is to do this by using rain barrels to buffer both drought and extreme precipitation to some extent. It is common for rainwater to enter the sewer system and then end up in ditches and rivers. As a result, the water eventually disappears into the sea and becomes salty. It is better if the water enters a rain barrel via the rainwater drain. This way, the water can be used, for example, to water the garden so that it ends up in the ground.

Design and develop a mobile web application that provides the user insight into the amount of water in the rain barrel at a given time of day.

Solution

The prototype starts with an onboarding process where the user has to answer a few questions so that the app can calculate how much water is in the rain barrel. 

Once this has been determined, you arrive at the core functionality, which is located on the home page. Here you can see how full your rain barrel is and whether you need to empty it.

There is also a settings screen with data that can be adjusted, and a first version of the statistics page has been created where the user can see how much they have already saved. 

Development

A prototype was then developed using the JavaScript framework Svelte(Kit). I chose for this framework because several team members had experience with it. 

The Hygraph CMS was chosen for managing the data. This decision was made because it was to be a prototype that would not yet go into production. Therefore, a login/registration function is not yet required. Hygraph is a simple Headless CMS that can retrieve and send content via API calls. 

The prototype also uses a weather API for weather forecasts and rainfall data. This is used in conjunction with personal data to calculate how full the rain barrel is. 

As it is a mobile application, I developed it as a Progressive Web App (PWA). Among other things, this makes it possible to download the web application and provide an app-like experience.