Translating user needs into a meaningful dashboard

Designing a user friendly data visualisation to allow non-technical users to draw commercial insights from renewable energy systems' data.

Wattstor is a fast growing company that offers onsite renewable energy systems to help companies achieve net zero and reduce their electricity bill. The web-app Podium takes care of the smart energy management and collates data to allow engineers to commission, monitor, and troubleshoot sites. This initiative utilises this data to offer additional valuable insights to non-technical users based on this data.

Role & Results: I managed and executed the end-to-end design process, including research, solution finding, wireframing, user testing, UI design, and collaborated with the Head of Product on scoping, requirements setting, and software engineers to build and launch this feature on the web app.

The Context

While the Wattstor web app provided technical data on the performance of onsite renewable energy systems for engineers, it was challenging for non-technical users to understand the system's performance or value at a glance.

Strategic Fit

For Wattstor's business goals, it was important to strengthen the relationship with the commercial end users, and make the web app a convenient source of information.

Intent

The goal was to enable non-technical users to quickly review the performance of their investment, reassuring them of the continuous value Wattstor delivers.

The Problem Space

The Wattstor team has been gathering insights on this particular problem for a while, and the sales team was a key stakeholder for a potential solution:

They wanted to be able to visualise complex information to users in a meaningful and engaging way.

The original power flow animation on the Podium web app

Discovery & Design Process

I went through the following steps in my discovery and design process:

In depth stakeholder interviews

For this project I did not have access to end-users, but detailed conversations with the sales team who knew their clients intimately helped understand the user needs sufficiently.

Researching existing solutions

Dashboards and data visualisation are a standard web-app offer and there is a wealth of great existing solutions to draw inspiration and insights from.

User Jobs-to-be-done and task analysis

Using the JTBD framework to specify the users goals, jobs, needs, pains, and desires helped clarify what exactly the dashboard needs to show.

JTBD framework for the end-user

Data visualisation feasibility assessment

Understanding the limitations of the open-source charting library we decided to continue using, was important to ensure an adequate design solution.

Iterative wireframing

Through an iterative cycle of designing lo-fi UI screens and stakeholder feedback sessions, I progressed to a solution that we decided take forwards.

Hi-fi user interface design and

Through an iterative cycle of designing lo-fi UI screens and stakeholder feedback sessions, I progressed to a solution that we decided take forwards.

Dashboard UI design

We embedded the new dashboard design into the existing Podium web-app with the intention to update and improve the UI/UX of other elements of the user interface (e.g. the side nav) in a future initiative.

Project Details

This is a live feature of the Wattstor Podium Web app. My responsibility was to lead on the discovery (Alignment, Research, Ideation) and the design (wireframing, UI design, Refinement) stages of this feature. Apart from me, there was the Head of Product involved, who guided on business requirements, scoping and provided feedback to proposed solutions; and an engineer who advised on feasibility throughout the full process and built the feature once it was designed.

Page updated

Google Sites

Report abuse