UI/UX Development for Energy Management Software

Technology Stack

Angular
Node.js
MySQL

The Client

This energy management software helps a US-based university’s administrative heads keep track of the electricity and energy consumed within their campus. The all-in-one tool is synced with and automatically collects data from the university’s power meters. The university’s admin heads access this tool to view these meter readings in the form of charts/graphs to get details like how much cold water is used, which building uses the maximum gas, how much electricity is wasted, etc.

The Challenge

Capital Numbers was requested to create these charts/graphs within the portal. We needed to handle all the frontend elements while the client took care of the system’s backend.

We were asked to display energy data on this frontend dashboard. For this, we needed to create lines, bars, tables, histograms, etc. The dashboard had to give an overview of the university’s power consumption.

However, we had to keep in mind a few specifications here. Firstly, we had to graphically represent meter readings for four elements: electricity, gas, hot water, and cold water. We had to make provisions for providing the above data at yearly frequencies. We needed to add custom reports. And finally, our team had to integrate a chatbot within the dashboard.

In short, the project needed us to delve deep into interface designing. So, Capital Numbers got its top-grade frontend experts to do the job.

The Solution

Our frontend team began brainstorming the solutions and considered it best to use the ngx-admin template to design the dashboard.

Ngx-admin is the most trusted Angular dashboard developers swear by. The Angular dashboard, written in TypeScript, allows easy code refactoring. As a result, our qualified Angular developers made the best use of TypeScript to refactor code, autocomplete lines of code, and keep the entire codebase bug-free. TypeScript helped us spot errors in the compilation stage, which allowed us to fix things early on and saved us vast amounts of time.

We used Apache eCharts to add all the graphs and diagrams in this Angular dashboard. These charts are elegant, visually appealing, and hallmarks of an exemplary graphical representation. Moreover, they’re easy to customize and configure to suit specific needs.

Next, we mapped data from the backend to the frontend. Our client would add meter readings to the system’s NodeJS backend, and we would map these readings to the frontend using custom logic. This data mapping process involved sharp programming skills to ensure the graphs represented are correct.

We chose the highly-scalable MySQL for managing the entire database securely. Our experts enriched the dashboard’s look and feel using custom scss.

Once done with everything, our team thoroughly checked the graphs, bars, lines, diagrams, and the dashboard’s overall GUI. After the final review, our team deployed the solution in Digital Ocean, which offers a 99.99% uptime.

Results

Our final solution turned out to be a graphically-rich dashboard showing meter readings of four elements: hot water, cold water, gas, and electricity. The client loved Capital Numbers’ work and appreciated how we customized each component to create beautiful energy charts.

We coordinated with the client over Slack throughout the engagement, which continued for over one and half years. At the end of it, what stood out for our client and us are:

Multiple User Controls

We added multi-admin controls to allow the university’s facility managers and energy experts to log in and access the dashboard.

Data Mapping

We leveraged our multi-year coding skills to get raw energy data from the backend to the frontend without mismatch.

Custom APIs

We wrote APIs to help filter energy charts based on power units like ohms, amps, or kilowatts.

eCharts

Apache eCharts helped us render a variety of charts like areas, columns, sankey diagrams, lines, etc.

Historical Data

We made provisions for retrieving historical data from previous months/years to diagnose past problems.

Real-time Data Monitoring

We also enabled real-time data fetching capabilities to turn present data into actionable insights.

Manual Data Entry

We added input forms to manually update entries if automatic data collection stops due to power cuts or bandwidth issues.

Custom Reports

We incorporated custom reporting capabilities to derive only those results users want to see.

Data Comparisons

Users can also generate yearly reports for specific date ranges for informed decisions.

Chatbot - Speech Recognition

We built and integrated a custom bot that interprets vocal instructions and redirects users to desired pages - making navigation a breeze.

Data Visualization

Developing a rich dashboard with all the above elements required good data visualization skills, which we had.

Dedicated Angular Development

Thanks to our dedicated Angular developers for making the right tweaks in the TypeScript-powered codebase and designing the dashboard precisely how the client imagined it.

Energy Management Streamlined

Because of our excellent engineering, users can now view interactive charts to: