Creating UI/UX Design for an AI-driven Building Energy Management System

Our work with the client began with detailed business analysis. The JatApp team thoroughly researched the market to learn more about existing intuitive UI/UX designs in the energy management niche. Based on the client’s references and research findings, we came up with a modern and engaging design. Once we settled on the main concept, we specified the project requirements to understand the scope of our work.

Our team helped to design an app that allows facility managers to understand the building system analytics without having any technical expertise. The solution enables users to visualize each room’s indoor conditions in a single interface, making it convenient to control HVAC systems and reduce unnecessary energy waste in the entire building. We also suggested the style, colors, dashboard widgets, bars, and main menu that made the app both engaging and intuitive.

We added a filter panel to sort the data according to different categories, so that a user can easily navigate through the dashboard. Our designers built a system of widgets with a wide and narrow type of view, which users can customize and filter according to their preferences. Also, we designed the drag-and-drop feature to move and add these widgets on the dashboard. As a result, the dashboard has two parts: the main block with widgets and the sidebar on the right with two tabs for a set of widgets and global filters.

We created a separate section with the list of connected buildings. This section includes such tabs as AI status, building information, access permissions, and history log. The AI status tab shows progress with the solution’s implementation. The app enables users to submit various information about the building to improve the building systems performance. Each of four stages of the AI implementation process requires its own type of information for submission. To gamify the data submission process, we added a progress bar that changes with every new data entry.
Instead of entering building information manually, users can import an Excel file by uploading or using drag-and-drop feature.

This section displays the list of reports that can be sorted with a filter panel. Each report opens in a separate tab, where a user can select the data they want to view. Additionally, it’s possible to visualize reports with customizable charts and graphs.

The panel includes three blocks: user and group management, permissions, and company settings. With the help of these tabs, facility managers/administrators can manage access rights for different users.
In addition, permissions can be given to access a separate form or tab. For example, a person responsible for the heating system in the building doesn’t need to access all the forms, but only those that relate to heating control. In such a way, different stakeholders can navigate through the system without any confusion.

Since the app focuses solely on the B2B market and corporate clients, a user registration process has certain peculiarities. It presupposes sending a registration request and contacting a new user for confirmation. Once registered, a user can edit or hide personal information, delete the account from the app, change/reset the password, and check the access rights in the profile tab.