loader image

Watering System



Watering Operational System

DATE Aug 2017


to the old and the new UI

The Old System


While working for a company named Algopill, I was handed a huge project for a new client, consisting in redesigning the UI for their existing system.


This is what the old system used to look like:


UI Design

Understanding the end user


I spent many hours meeting up with the client – who’s not the end user – to understand the real needs and pains of the actual end users.

So who is the end user?


Among them back-office, Municipality workers, Contractors and simple workers sent out to the different public areas in the city to fix watering pipes and controllers.


And what are their pains?


PERFORMANCE, above all. The existing operational system is an enormous and complicated system which had been meticulously planned and thought for the company and the users back in the early 90’s. And although it has been expanding and adapting itself to new needs from time to time, it kept being a slow, cluttered system with unorganized information, full of unnecessary clicks and steps to get to simple actions (and looking like a typical system of the early 90’s!).


into the project

Organizing myself


As a newbie to this area of UI (Complex Systems) I started by researching plenty other existing systems of different types that have already been made and launched by others to the market. I understood that PERFORMANCE was the key word in this whole project, so the developers at the company weren’t willing to create new features and components, but they were rather willing to use existing HTML-CSS ones and thus meet deadlines faster and properly.


So I researched what MATERIAL DESIGN, BOOTSTRAP, and KENDO UI had to offer me. I downloaded many different and FREE UI Kits from different sources, and started building a UI Library as I created the different screens, modals and features. This library helped me all along the way to keep consistency throughout my work. Here’s the unfinished version:


And there was a lot of it!

First, the pipes


One of the challenging features our client wanted in the new system, was to recreate the controllers installed in real life in parks and public gardens, with the possibility of making them show real-time data and animations of the water coming through the pipes while opened for watering.

At Algopill, we decided to create the pipes similar – in behavior – to what the end users were used to see in the old UI, although saving their parts as SVGs and Web Fonts in order to boost performance.

Then, the Controller’s main screen


The old system was showing a whole lot of important data, that wasn’t organized correctly on the screen. So first things first: reorganization and unity of data. BUT, keeping hierarchy, regular use and mental models right were they need to be.


From “Native” to Web


This is what the old navigation used to look like:

And this is what the new navigation looks like:

Tables throughout the screens


There were many tables that needed attention in the existing system, most of them popping out in infinite and complicated modal windows where Left-to-Right and Right-to-Left could be compared to the Wild West scenario.

The new UI took care of it…

These are the rules of the game: Each Controller has a number of programs assigned, and within them, a pipe may be used only once throughout the different programs. So this is the new look for the Watering Program table – edit mode -, where each bow is a pipe, and the color of the pipe represents the type of watering program it serves, whether it’s sprinkling, dripping, and so on:

And this is another table shown within a modal window, where the supply of water can be controlled, measured and reset:

Charts, gauge and more…


I brought the existing chart and gauge to match the new UI standards, look and feel. Later on, this area will serve as a tabbed area of charts showing different data, starting with the current one showing “Last week’s activity” for this specific Controller, and followed by the monthly and yearly activity.

The old style:

It was important that the new UI style kept the original colors and nomenclature in order to make their learning curve less painful:


A few screenshots

Thanks For Watching

See you on my next project…