Design System: Data Visualization

Creating a charting system that leverages interactions to provide snackable information



Energy asset bidding software driven by a machine learning algorithm

Battery monitoring software connected to physical sites

Users: Energy asset managers, energy traders (think stock markets), battery fleet operators


  • There is an abundance of battery telemetry and energy market metrics, which leads to difficulty in comparing them or measuring performance without noise

  • No current way for users to control what gets highlighted or charted in the data visualizations


Design user controls in charts for the design system


Existing Resources?

Existing basic chart visualizations but no micro interactions or user customization Design impact: Focused on micro interactions such as hovering on the legend and hovering on the chart area

Focused on micro interactions that add info

What are the Types of Data?

Sessions with Data Scientists and internal users to understand what are the various data streams and how they relate to each other Design impact: color, dotted, dashed lines could all play a role in emphasizing and differentiating

Telemetry grouping session with users

Technical Constraints

Sessions with Developer Operations and Frontend Developers to understand what are the capabilities of our Material UI hybrid system Design impact: designing with CSS/HTML in mind

Design Review

Presentation and walkthroughs with Product Manager, Frontend, Dev Ops to kick start development

Tooltips directly relate to the charts and the data groupings as well as give info such as lost of data

Adding a tab system allows better use of real estate

Results & Next Steps


Ability to focus on information selected by the user, clarity around missing data streams, meaningful grouping of information

Next Steps

  • Partner with Platform Analytics to observe user interactions with these features and iterate

  • Expand design of charting periods such as on/off of battery periods, rolling day views, etc.