Polish electricity dashboard & map

Project goal

To gather all possible data about polish electricity network in one place and serve it in a meaningful way through an advanced web application.

Our scope

UX/UI design

Web development

Systems integration

Project duration

500h

Technologies used

Laravel

ReactJS

Php 8

Client

Warsaw University
of Technology

Having established user & business needs, we started wireframing

Thanks to the usage of a wireframing kit including data visualization elements we could share our ideas much quicker and in higher detail than while wireframing from scratch.

Several design iterations later, we moved on to the UI part

In this particular project we went for a semi-neuromorphic style. It enabled for a much cleaner, aesthetic dashboard interface, but without compromising on the usability aspects when viewing large quantities of data in form of a table or map.

The app was designed to work both in light and dark versions

This will reduce the eye-strain put on users while monitoring the data for longer time periods. Designing for both light and dark modes was actually one of the major design challenges we had to overcome, mainly due to usage of multiple colors for data visualisation

While designing, we structured out a basic design system

It heeps us maintain consistency across the designs and keeps our code well organized. We also introduced mutiple components to the design system, which will considerably reduce time (and money) spent on developing new features

The application was built using the 8th edition of Laravel framework, enabling for even faster and more reliable development

It uses a Redis caching system, which allows displaying data quicker. The data displayed on the dashboard is integrated with external systems using REST API.

To create the frontend layer of the application, we decided to use React.js framework in conjunction with TypeScript, thanks to which we managed to build a modular structure of the project, flexible for upcoming functionalities.

Additionally, thanks to TypeScript possibilities, we have eliminated potential incompatibilities related to the handling data coming from the API. The usage of the above-mentioned technologies, allowed the application to work smoothly like a native app in the form of PWA.

We provided our client with complex dashboard and map modules, being a solid foundation for further rounds of app development

See it live

Related projects:

Custom e-learning platform MVP for a private math academy

Read the case study

Custom lead generation form & a landing page management system