Analytics Design System
The Opportunity
Our team had the exciting opportunity to build a design system from scratch, which allowed us to create a systematic, high-quality, and accessible platform. We used Figma for design, Zeplin for design specs, React for coding, and Storybook for easy component access.
Figma
Zeplin
React
Highcharts
Storybook
Our Design
Our design system contains all the standard elements including but not limited to colors, typography, icons, inputs, buttons, containers, page layouts.
Colors
Typography
Icons
Inputs
Buttons
Custom Data Visualizations
One of the unique features of our design system is that it contains both both custom data visualization components. We kept the goal of the platform - understanding of electrical consumption - at the center of our data visualizations. All of the data visualizations were built out on use case. They can convey two types of data sets, a primary data set, and a secondary data overlay. Our design system stands out with custom data visualization components that were created with a focus on understanding electrical consumption. The visualizations were built based on specific use cases.
Primary Data Our primary data is often a time series data set - measured in Kilowatts, Kilowatt hours, Amps, or Watts. This conveys the electrical information and can be displayed as columns, bars, lines, heat maps, donuts, and more. Primary Data is often represented in the lower legend.
Secondary Data Overlaid data that corresponds to the time series and provides additional information or context when viewed in conjunction with electrical usage data. Examples of this type of data could be temperature, weather, relative humidity, carbon usage, building hours, and plug schedule hours. Secondary Data is represented in the upper legend.
Consistent Design Language For each primary data display type, overlays of secondary data sets were generated. We have created a design language for each type of data overlay. It can be used in any primary set. This approach allows for immediate recognition of, for example, relative humidity, as the language is always consistent.
Robust Data Tables
Our design system also features a robust data table that is filterable, paginated, searchable, and configurable. We designed this table from the ground up to meet specific use cases and provide users with the necessary information they need. Overall, this Analytics Design System is a prime example of applied expertise in B2B UI design for STEM-driven fields.
Overall, this Analytics Design System is a prime example of applied expertise in B2B UI design for STEM-driven fields.
