• Product design
  • Web development
  • Big data analysis
  • Internet of things
An intelligent energy management web application
Energy consumption
Understanding how we use energy

After early meetings with Elergone we became aware of their pressing need to collect real-time energy consumption information as a support tool for client energy management reporting and analysis.

Original monthly energy consumption reports were usually generated from backlog information with more than 45 days. The workflow began with each of elergone's client sending hundreds of their energy invoices for manual analysis and processing.

When they came to us asking for a web application that would automate the process of retrieving and displaying real-time energy consumption data, we devised various sessions with the Elergone team to discuss and plan out how to collect, transform, calculate and extrapolate huge amounts of data sets.

How we built it
Crunching big data

Checkwatts parses and collects hundreds of thousands of energy consumption data sets on a daily basis from various different sources from high level energy consumers. It then crunches data, processes millions of calculations, and finally allows the end user to visualize and analyze this information in real time with blazing speed.

Our first solution was developed based on initial project requirements and it mainly provided calculations executed in runtime. However, with an increase in data volume, in-depth electricity cost calculation, and predictive analysis requirements, the system slowly became less responsive even with an implemented caching strategy. This fact coupled with database growth, became a potential problem for heavy platform users with many location points, since they weren't getting near-instant results any longer.

Since then, we've created two different sets of databases. We maintained a MySQL database which manages data relationships and migrated our core energy data readings to a MongoDB which provides us with the scalability we needed for the platform, separating data from the logic layer. We used MapReduce for large data set aggregation and performance. Computations are now done upfront and data is later stored in the database. This leaves runtime with the sole function to read data.

Besides the web application, Hapibot also developed a Java app that runs on any supported low cost Single-Board Computer, which we later physically connect to an energy switchboard grid and capture more detailed energy consumption readings and instantly send it back to the web application. Real-time energy readings using Internet of Things concepts.

Design update
Going after that practical feeling

Checkwatts in an information intensive application. Therefore it has a clean and utilitarian look and feel while also making use of data visualization good practices. This aspect is obtained by using a reduced palette of colors that focus essentially in gray variants going into using Red, Green and Blue colors as accents.

The high-contrast and differentiation between actionable elements and background allows for a better experience during the usage of the platform reducing time used trying to find certain elements within the pages.

streamlining journeys and defining hierarchies

The Checkwatts platform began as a simple idea. In a short amount of time it grew quickly in size and features, beyond our initial expectations. Because of this, some of the interface felt out of place or cluttered in some areas, sometimes employing confusing workflows.

So we redesigned the app from the ground up. We formulated a system to accommodate the various hierarchical levels in the existing platform without impacting the layout of the page content.

The navigation bar can have a maximum of 3 levels. The 2nd and 3rd level don't appear if there aren't pages to be presented in those levels. We avoided dropdown navigation menus. Checkwatts users need to quickly navigate from one page to another, where actionable options and links are readily available and consistently placed throughout the app thus reducing friction when trying to analyze different information found in multiple pages.

structuring information

Currently Checkwatts has more than eighty pages, each with it's own variegated information and function. A defined structure was in need. Bearing this in mind, we went for a 12-column page layout structure making full use of the screen real estate.

A sense of coherence was achieved when navigating across the platform since UI elements fit and escalated properly and didn't feel out of place regardless of the page being viewed.

A 12-column page layout also supported our decision to create a responsive design web app over a native app, allowing Checkwatts to cater namy devices with a single product that can transform quickly and seamlessly.

A 12-column page layout also supported our decision to create a responsive design web app over a native app, allowing Checkwatts to cater many devices with a single product that can transform quickly and seamlessly.
Changing Behaviours
From an originally simple energy consumption web application, Checkwatts grew to accommodate daily readings from thousands of locations, now managing energy consumption from more than 2% of the overall electricity consumed in Portugal, serving 8000Kw of produced solar energy, and helping purchase over € 50 million in energy acquisition. But the biggest gain is the cultural and behavioural change noticed in entire organizations once people had access to real-time information and when we turned each energy location point into a game ranking experience. Users may now follow their energy consumptions, visualize the impact of their energy saving measures and be alerted when various consumptions benckmarks are registered out of the norm.
Carlos Sampaio @ elergone
What can I say? It's a true pleasure working with Hapibot. They continuously deliver high quality work and elevate our solutions above what we think is possible.