The redesigned Hero Balancer dashboard app gives users better insight into the performance of their heating installation and provides more control over the indoor climate in a building. The new dashboard helps to realize the dream of the future of Hero Balancer — to become the best Cloud Building Management System.
My role
I was in charge of the entire project. I was both the UX researcher and UX designer. My role ranged from doing extensive research to get to the heart of the problem, to designing low and high fidelity prototypes. I was also responsible for project planning and stakeholder management.
About Hero Balancer
Hero Balancer, founded in 2017, makes existing large-scale heating installations in, for example, schools, showrooms, or offices smarter. By controlling the heating more efficiently using their software, a building can save up to 40% in energy consumption. As a result, the energy bill is lower. Also, it is good for the environment: less CO2 is emitted. When purchasing a Hero Balancer, a customer gets access to an online dashboard that provides insight into the energy consumption (electricity and gas) and the temperature history of a building. Also, the user can configure heating schedules to set when a building must be heated.
Problem statement
People buy a Hero Balancer to save energy and to create a better indoor climate. The current dashboard didn’t provide a way to validate this. There was a lack of insight into these two factors. See below for a list of user requirements, based on many interviews and conversations I had with users.
As a customer, I want more insight into the performance of my building and the effect of the Hero Balancer
As a customer, I would like to have a comfortable indoor climate
As a customer, I would like a simple solution. I am not a heating engineer and have little knowledge of heating installations
But there were more stakeholders whose wishes were important during this project: the wishes of Hero Balancer as a company.
With Hero Balancer, we want to become the best Cloud Building Management System
With Hero Balancer, we want our product to be better than the competition
Of course, you design for the user, but also the client. You can design something super cool that users love, but if it does not fit within the client's business case, it will not be of much use. I always strive to design the ideal match between the needs of a user and the goals of the client. That is why I formulated the following design challenge during this project.
Design Challenge
How can a redesign of the Hero Balancer dashboard for customers help pursue the company's future dream?
Competitive Analysis
So, Hero Balancer wants to become the best cloud building management system on the market. The dashboard can help with this, but how? A logical first step was to conduct a competitive analysis. Hero Balancer is far from the only company doing something with smart heating systems. Most of them also provide a dashboard or app with their product. The competitive analysis showed me that there are two types of smart heating products on the market.
Solutions for households or consumers
Such as the Nest thermostat from Google. The apps of these products are designed for people with little or no knowledge of heating systems.
Solutions for large-scale installations
Direct competitors of Hero Balancer. Their apps are often designed with the wishes of a heating installer in mind: a user with a lot of knowledge in the field of heating systems.
Someone in a building, for example, a school principal, concierge, or office manager, who has little knowledge of heating systems. I saw a valuable opportunity for Hero Balancer to design an app that met the needs of people in a building. Direct competitors do not do this. When Hero Balancer does this, the future dream, to become the best cloud building management system, can be pursued with a possible unique selling point.
When it was clear what the requirements of the stakeholders were and where the current dashboard could be improved, it was time to generate ideas. I created a list of all the data collected by a Hero Balancer and designed several UI elements and variations to test which data and which way of presenting the data to users worked best. No interactive prototypes yet, during this test round I wanted to test purely for functionality to get even more clear what users wanted to see in the dashboard. This way of working proved to be very efficient afterward.
As a customer, I want more insight into the performance of my building and the effect of the Hero Balancer
As explained earlier, one of the reasons for customers to purchase a Hero Balancer is to reduce energy consumption to save on energy bills and CO2 emissions. With the data collected by Hero Balancer, these results can be visualized. The current dashboard does not do this, but users do want this.
This could be done in this way, where the results of the Hero Balancer can be shown as to how much someone has saved in euros, together with the amount of CO2 that has not been emitted. A metaphor is used to support the amount of CO2 to give the user a better idea of the amount of CO2 saved. I tested this on users. The test revealed that users wanted to know how this savings calculation was done. Users also wish to see gas and electricity consumption separately. Users liked the metaphor though. It helps them to better understand the data.
As a customer, I would like to have a comfortable indoor climate.
The first conversations with users showed that, in addition to saving energy, a Hero Balancer is also purchased to create a better indoor climate.
A Hero Balancer partly solves this problem by, for example, adjusting the heating based on weather forecasts. However, it can happen that due to extreme external influences, for example, a bright sun on a window, an unpleasant indoor climate still arises in a part of a building. The sensors of Hero Balancer can detect this and communicate this to the user via the dashboard.
But temperature is not the only factor that determines whether the indoor climate is good or not. There are two other factors: humidity and CO2 level. Factors that Hero Balancer does not influence, but factors that can be detected by sensors.
Applying this to the dashboard turned out to be very valuable to the user. The indoor climate of a building can be made transparent via the dashboard. Also, the user can be notified with a notification when the indoor climate in a room is not optimal. The user can get helped to improve the indoor climate. In the image above you can see different UI elements that I tested with users. During the test, users were very enthusiastic about this functionality. It became clear that users find it very valuable when they have more control over the indoor climate in their building. As mentioned earlier, a bad indoor climate is often a problem, especially in schools, the majority of Hero Balancer's customers. A healthy indoor climate has a positive impact on the health of people in a building. Also, it helps with reducing the spread of COVID-19.
When it was clear how the dashboard could add more value to the user, it was time to collect the results of my research and design an interactive prototype of the new dashboard. I started researching existing solutions, also outside the sustainability sector. I wanted to know how other products where users had similar requirements offered a solution. I started looking for design patterns.
An existing design pattern
I discovered an existing solution, the Health app from Apple. If you have an iOS device, you should check it out. For example, the app keeps track of how many steps someone takes every day. In addition to plotting this data in a bar chart, the app also tells more about what the data in the chart means. Below the bar chart are some so-called highlights that communicate this. The app does more than plotting graphs. It gives users more context with the data shown, exactly what users of the Hero Balancer dashboard wanted.
In the final prototype
The final product contains the 'energy' page with summaries of the data collected by Hero Balancer regarding the energy consumption in a building. The bar graph chart is used to show how much Hero Balancer has saved in a building by comparing historical energy consumption with current consumption. Except for the 'Electricity' tab. There, only the current electricity consumption is shown because Hero Balancer does not save on electricity. Research has shown, however, that some of the users wish to view this data. That is why electricity consumption is shown in the end product. The data shown is supported by highlights at the bottom of the graph. For the user, this provides a better understanding of the displayed data.
In the final prototype
When one of the factors (temperature, CO2 level, humidity) that influence the indoor climate is not optimal, the user will receive a notification on his phone regarding the current situation. See this video that further demonstrates the interaction with the new dashboard. Thanks to this, the user gets more control over the indoor climate in a building.
In the final prototype
The new dashboard also gives users a better overview of the status of the indoor climate in their building. In addition to the notifications for an uncomfortable indoor climate, the user can view the current status of the indoor climate at any time. See this video showing interaction with the new dashboard. The new dashboard provides more grip on the indoor climate.
End validation
A few weeks before the end of this project, I validated the interactive prototype of the new dashboard by conducting several usability tests with users. The results of these usability tests were very positive. Users found the new dashboard a big improvement over the current one. It offers great added value to the user. The new dashboard gives users a better insight into the results of the Hero Balancer. Also, it provides the user with more grip over the indoor climate in a building.
as translated from LinkedInTed Braakman - CEO of Hero Balancer:
“Chris' ideas to improve the user experience of our app are super cool, we are definitely going to work with his ideas!”
as translated from LinkedInStefan Kloosterboer - Co-Owner of Hero Balancer:
“Super happy with your input, and according to your validation with our customers, they too. Can't wait for your design to go live!”
The new dashboard is a huge improvement over the current one. It has been confirmed several times that the new Hero Balancer dashboard can help fulfill the dream of becoming the best cloud building management system. The new dashboard is an excellent match between Hero Balancer's goals as a company and the wishes of users. I am very proud of the result.