Global redesign of the user interface of the online data analytics tool for saving energy.

ENERGIEPARTNERS
What was done
Design system
Prototyping
UI redesign
Desktop & Mobile
dashboard preview image for EnergiePartners, UI design

Product

EnergiePartners is an online b2b platform that helps businesses in the Netherlands optimize their energy & gas usage and to become green. 
The platform includes a lot of data about the current consumption and analytics, gives prognosis and suggests actions to optimize the usage.

Problem

The product has been live for several years but the absence of the design system made the interface looks cluttered aoutdated. The goal was to give the product new fresh modern look and fix user behaviour patterns along the way.

scope of work

New look and feel for the main dashboard

EnergiePartners is an online b2b platform that helps businesses in the Netherlands optimize their energy & gas usage and to become green. 
The platform includes a lot of data about the current consumption and analytics, gives prognosis and suggests actions to optimize the usage.

detailed view of the main dashboard, light blue fresh design. UI design for EnergiePartnes, a sustainability dapp

Small action – big change

Lower the temperature in the building to one degree, adjusting the setting of the heating system or simply replacing light bulbs can make a big change energy-wise as well as money wise. The layout and design of the Action Planner were reworked – now you can immediately see your current situation, required investment and plan action.

UI design for a card with analytic and stastic data, sustainable UI, light modern clean UI and typography

Responsive and adaptive app

Although desktop version is considered the default one, it was important to take into account that users often use tablet as well – primarily while inspecting the building and making notes on the way.

desktop and mobile view of main dashboard with graphs, analytics, modern fresh light UI design.

Style guide & UI kit

The design audit showed that the dapp needs a design system and a global UI library to bring consistency to the overall look. . The style guide was developed from scratch keeping a few key elements to maintain a connection with the brand - main typeface Roboto and major blue color which became a base for a color palette for a new UI.

style guide, UI library, typography and color paletteUI library presentation, components
Other projects
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.