Predix UI

Predix is GE’s answer to helping industrial businesses leverage a platform service to successfully manage IoT machines by avoiding unplanned downtime while helping predict when assets such as wind turbines or jet engines might need maintenance. Defining a visual system required designing out new components and collaborating with our team of engineers and the broader GE design community . This required constant collaboration across the many functions of GE to ensure these components met business needs and were compliant with rules and regulations for that industry.

Gathering requirements for design system refresh. (photo by Ken Skistimas)

The Predix Design System

Using the Atomic Design methodology, the goal was to provide designers with the building blocks to assemble their UI screens with ease and speed. Because the system needed to provide solutions for a vast array of use cases in different environments, it was important to provide components that could be viewed in both regular and low-light environments. We identified the opportunity to introduce both a light and dark theme variation of the system.

 

Excerpt from dynamic Sketch library with light and dark themes used for building Predix applications.

An animated video I collaborated on using After Effects that was shown to major stakeholders and unveiled to the design community.

Component Examples

Below are examples of a few components I worked on for the new system. Everything was built on Polymer to make each element highly customizable. You can learn more about the process and browse components here.

Dynamic App Navigation (Light/Dark Theme)

 

 

Context Browser

 

 

Alert Messages

Layout Templates

Providing starting points for designers was essential in conveying the proper structure of page layouts in context to the system. A number of templates were generated as a reference to help consumers of the system understand proper usage.

 

Data Visualizations for Machines

One of my main tasks within the team was to help establish a framework to interpret large amounts of data being sent from machines and present it to users in a consumable manner. You can learn more about the project here.
 

TimeSeries

Provides a way for users to understand the performance of an asset over a certain time period. The below example demonstrates readings from sensors on an asset where performance is normal. Typically, users will look for abnormal spikes that would trigger an alert in the system.

 

Radar and Polar

Used to visualize motion and circular sensor layouts. It’s common to see these present data for wind turbines.