SOURCE: Energy Performance Management Dashboard
Year
2018 - 2019
Client
Plus Solar Systems
​
​
My Role
Product Design Lead
Team
1 - 2 designers
Scope of work
Design Strategy, UX, UI Design
Business Website
https://edge.plus-solar.com.my/
Background
The core business of the client is solar engineering, as a solar system provider, they aspire to help their customers to feel rest assured that their systems are performing up to expectation after installation. SOURCE 1.0 is aimed to solve this problem by providing an Energy Performance Management System that make building energy data and solar system data visible to their customers.
The brief
To design a web based dashboard that illustrate the real-time performance of the company's solar systems, meanwhile making energy data sexy.
​
My responsibilities
The project took about a year from scratch to complete as improved version. Started off as the sole designer for this project, I worked closely with the product owner and engineers of hardware and solar specialist to ensure data are being easily understood. Another designer onboard during the product improvement phase.
Design Research & Strategy
Research Goal
-
Discover users pain points and needs
-
To discover what are the best practices of current dashboards
1. Stakeholders
interviews
2. Define Users & Personas
3. Findings & Analysis
4. Define keyfeatures & keydata
1. Stakeholder interviews
To deepen the understanding of the brief. Stakeholders interview happened during a meeting where the client - business owners, the internal engineers, and business development who involve in facing clients presented. They represent the key users for the dashboard.
​
2. Define Users & Personas
In order to define key features for a new project without being a domain export. Because the users who use the dashboard are not only the solar system owners, but also the internal engineers - the original intention of the dashboards existed. Therefore, two personas were present as below:
Persona A:
Ms. Marion
Building Manager
​
36, Female
Key Tasks
-
Ensure the building energy performs normal
-
Ensure solar performance with no downtime
-
Attend to any building energy anomaly
​
Pain Points
-
Desire convenience to gain monthly energy consumption report to present to the management
-
Often needs manual checking on building systems
-
Alert are usually depends on-site manpower, who are usually labour workers. Delayed alert impose risks and danger to the workers and the building.
​
Persona B:
John
Senior Project Engineer
​
29, Male
Key Tasks
-
Conduct routine checkup on sites from time to time
-
Ensure healthy level of solar system performance
-
Alert factory owner / manager for operation & maintenance
-
Attend to system downtime issue, rectify cause and problems
​
Pain Points
-
One-way checking on the solar systems
-
To extract report from the monitoring system to share with the factory manager is somewhat counter-productive
3. Findings & Analysis
-
Existing dashboard are mainly for engineers to understand
-
Observed patterns of simplified data by using some semiotic representations
-
Data visualisation are less appealing for layman, e.g. building supervisors, who are not necessarily engineers
4. Key features & data
-
Overview to all buildings, mainly for internal engineers
-
Major list of building energy consumption data: solar power, utility, exported & imported energy, performance ratio, irradiance, etc.
-
Timestamp for crucial energy data point, e.g. max / min building consumption
-
Flexible viewing mode / calendar design - by year, month, week, day
-
Export energy report
Design Development
The Challenge
Low-fidelity wireframe process was eliminated, because various graphs and charts are involved with data visualisation dashboard design. With the actual visualisation of the data, it carried out deeper considerations for the designer and the stakeholders, which led the design iterations to carry on.
Synthesising Data to Design
Briefing from the stakeholder helped me in the process of visualising data into wireframe of a dashboard design. A customer profile, IKEA - one of the solar system owners that has multiple sites throughout Malaysia, was taken to build a good case for design development.
By using the existing dashboard data helped setting the ground to start from scratch. After gathering as much data samples as possible. High fidelity wireframe was developed for review.Below screenshot is an example piece of data, that I had to first understand to design wireframe as such.
Hi-fideliity Wireframe
SOURCE - energy monitoring dashboard design
Image: Screenshot reference of existing dashboard that consists crucial data points for a solar system.
Screens Design
Into the final stage of design, the choice of colours, typography are ready for final decision at this stage.
Left: A map view as an overview of all buildings under the SOURCE system
Middle: Main dashboard of a single building energy data visualisation
Right: A display screen that serve as a general daily "lookout point", as well as for branding purpose.
Accessibility option for older generation
For users who find the original - dark theme colour scheme challenging to view, this bright theme version.
Users of older generation (50 years old above) preferred a bright theme mode. As the colour of white text on dark theme are not legible.
The colours of the dashboard, were reconsidered for such group of users, where contrast of colours and text increased.
Result
Final production & Outcome
Total of about 80+ daily active industrial users, include building managers, business owners, energy managers, engineers as of March 2021.
Because of the data visibility of building consumption, SOURCE 1.0 has opened up new business opportunity to energy savings, maximum demand management, process automation. It led to subsequent upgraded versions of SOURCE.
