GE Edison Design System

I was a part of the GE Edison Design System design team and collaborated to create standards and guidelines for data visualisation graphs, charts, their color schemes, and animations with accessibility considerations during my time with CitiusTech.

Project Overview

Project Duration

Aug 2021 - Aug 2022 |

1 year

Role

Lead UX & Visual Designer

Tools

Sketch + Figma

Problem Definition

The problem with the present Edison Design System was that although it had standards for buttons, navigation, and other parts, there were none for data visualisations like charts, graphs, and their layouts, axes, fonts, and animations. Multiple projects were a part of the same fleet management system in the project I was working on. Therefore, it was critical to establish rules in order to preserve uniformity and standards.

User Benefits

It would be simple for numerous design teams working across regions to maintain consistency and standards in their design solutions by creating rules and guidelines for charts and graphs.
Additionally, designing and creating solutions would be simpler and quicker for developers.

Design System- Data Visualization Standards

These are the first draft version of the guidelines :

The First step was to define which graphs to include in the first design proposal which are the most frequently used. This included:

Bar Graph
Line chart
Pie chart
Gauge Chart
Donut chart
Heat Map

The second phase was to start building the guidelines by researching the existing design systems, best practices, blogs and by taking feedback from GE's Design Community of UX and Visual Designers. The following is a concise description of the various steps in building the exhaustive guidelines for data visualizations.

Defining the layout, measurements, colors of the graphs
Dos and Don'ts while using any of the defined graphs and any variations that can be done
When and which type of graph should we use according to the parameters
Created animations of the graph interactions like hover, on click etc

Design System Applications

The project Smart Scheduling was a subset of Edison Imaging 360, a fleet management solution for imaging software. In this project, I used the design guidelines for charts and data visualisation to demonstrate how simple it is to use and adapt them in a presentation.

Go To Top