Energy Efficiency

Problem

Create a feature that allows our clients to calculate the energy efficiency of their water networks, and compare them with other networks in the app.

Context

This project started with a surprise meeting on a random Wednesday. I got a ping from the sales team, asking me to join a call with a potential client the next day, and was given a couple of recordings of the client’s previous meetings to get up to speed. I also had a PDF with formulas like this one:

I spent the rest of the day watching recordings, reading transcripts and the PDF, and having an express meeting with one of our hydraulic engineers, who explained the formulas to me.

The next day, I joined the call with the client, got some very good ideas from listening to them, and by the end of the day I had a rough sketch of the plugin we were going to build:

Solution

Calculating the actual energy efficiency of a network in terms our customers want to see (money, basically) is not trivial for multiple reasons. Instead, I came up with an idea to calculate a unit-less energy efficiency score for their water networks, similar to what you see in sport watches. This would allow our customers to compare their networks with each other, and with other networks in the app, to hopefully motivate them to improve their score.

Once I validated the idea with our hydraulic engineer and our sales team, I started working on a static mockup of the feature on Figma:

Simultaneously, I worked on a rough algorithm to calculate the Energy Efficiency Score, using our platform’s SDK. It also rendered the energy efficiency for pipes on the map, using a color scale:

Once I was reasonably sure that our clients would find the feature useful, I started working on the front end. Our design system already had many of the components I needed, but I had to create a new one: the radial progress bar.

For that, I used TypeScript, React and SVG, and wrote an isolated component in Storybook that we could use in other parts of the app. I also had to add a new layout component, ZStack, to take care of the special needs for this component.

I also added an animation to make the score change more fun:

Results

The feature was a success, and we got a lot of positive feedback from our clients. It went straight to production without requiring many iterations.