I designed and built a specialized design system to meet the needs of a high-perfomance power plant control system used at solar arrays.
Role: Lead Designer
Product Design
The Client
My client specializes in the design and construction of solar and wind power plants. For their clients, they also build SCADA (Supervisory Control and Data Acquisition) applications to control all plant operations and monitor performance.
The Problem
SCADA applications are incredibly complex and must accommodate hundreds of controls and thousands of data points. CEG wanted to productize a SCADA app framework that had a vastly improved user experience, with the ability to customize interfaces for each plant.
To achieve this, they needed a cohesive and efficient design system in place. In this case study, we'll explore the process of building a custom design system in Figma, from research and planning to implementation and optimization.
Colors
The palette had 2 elements:
Standardized system, data, and alarm colors.
UI colors in light and dark theme.
Icons
I chose Material icons for the UI and then custom made the alarm icons.
Typography
I tried to keep the typography scale as small as possible and only introduced new styles when a strong use case bubbled up.
Solutions
Pull the numbers out of the imagery
The current experience is heavily map based. Data is presented in different ways, but always as an overlay on a map.
Data Grids
PVV customers were actually already requesting data in spreadsheet format, so the solution was simply to make the tabular data as accessible as possible.
We added data grid components to the field level, as well as a data view that allowed users to access their entire organizations analytics.
Bulk actions
One of the biggest themes we heard in the interviews was bulk actions. A company running Plot Trials may have 10,000 fields worth of data, so it all has to be pooled together and analyzed in other tools, making the need for efficient exporting absolutely critical.
Joe Spencer
© 2022