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.
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.