Industrial Data Visualization - Design An Extensive UI 

A good design creates flexible and extensible UI architectures that not only enables current workflows, but also supports future possibilities. 

In 2016, when I took over the design for GE's industrial data visualization app (named APM Analysis), the UI had become the bottleneck of the application's growth: more functionalities needed to be added to make our data visualization app robust, but its existing UI architecture lacked the flexibility and extensibility to accommodate these new functionalities. Hence, redesigning the UI from the ground up, building in an information architecture and visual hierarchy that could accommodate future expansions, became top priority. I took on this project as the lead designer.

 

The original UI

Limitations:

  • no way for users to group similar charts

  • difficult to navigate between charts

  • no way to browse available data sets

  • no space to display the ever expanding tooling options

 

APM Analysis helps engineers more effectively diagnose industrial machinery maintenance issues, by enabling engineers to visualize and manipulate sensor-collected data through different graph types, time spans, comparison groups, data sources, resolutions and locations. Usually, an engineer would select sensors to visualize out of tens of thousands of candidates, and plot many different graphs. 

 
 Monitoring and diagnostics engineers juggle between multiple screens and make decisions based a multitude of graphs and visualizations.

Monitoring and diagnostics engineers juggle between multiple screens and make decisions based a multitude of graphs and visualizations.

 
 

After evaluating the limitations of the original design, collecting feedback from users, and understanding the future product road map, I decided the following three criteria were important for the redesign's extensiblity:

  1. A hierarchy for grouping graphs into different levels of granularity

  2. A flexible screen layout for displaying a lot of data items, a lot of charts, and other potential future functionalities and requirements

  3. A clean UI that keeps visual distractions away from graphs

After studying the existing user research, doing additional contextual inquiries, conducting participatory design sessions, and referencing designs from Spotfire, Tableau, Kayak and Google Maps, I decided to adopt an object-oriented approach for the redesign, meaning all interaction sequences start at anchor objects. An object-oriented approach is suitable because when doing data visualization, users do not follow a pre-defined path. Instead, their workflows vary vastly for each case because their actions are ad hoc and situation dependent. As a result, many visual objects that afford a multitude of interactions need to coexist on the UI at the same time. Hence, mapping out what the objects are and the actions that can be applied to them can greatly inform design decisions.

I made an inventory of all the objects involved in APM Analysis, and categorized them as the following: 

 

Categorizing the objects into data and viz helps clarify the information architecture.

 
 

I then went on to created an Object-Action Matrix:

 

The matrix outlines what actions each object should afford. I used this information to plan the placement of action buttons.

 
 

With a solid understanding of objects and actions, it was time to sketch out the UI architecture:

The redesigned UI architecture

 

I then went on to create iterations of low-fidelity wireframes, fleshing out more UI details. Using hand sketches allowed me to quickly iterate through 8 versions within 3 weeks. 

 

One of the lo-fi iterations

 
 

In addition to getting user feedback between design iterations, collecting feedback from product management and dev teams is always important. While still in the low-fidelity stage, I made several design changes to address technical issues raised by the dev team. For example, it turned out that the top toolbar governs the entire app and cannot be divided in halves. So I moved the data section underneath the top toolbar. After rounds of validation with users, PM and dev, the design was ready to move to high fidelity. Credit to my awesome collegue Wade Fong for the visual design.

 

This redesigned UI was released in early 2017.  Since then, many new data viz functionalities have been built on top of it, and the overall design still holds fine.

This redesign has received praises and recognition from the application users and GE sales channel partners. As a UX designer, there is nothing more rewarding than enabling users to do their work with ease and delight.