Asset Explorer

Map industrial assets, contextualize them,

and compose whatever data model is needed.

Equipment Management

This design and implementation were for an entire section of an industrial software that has the commitment to digitize and clean all the data that comes from different data sources in an industrial company unlocking years of static and overlapping of data to prepare the data for analytics and to achieve new levels of operational performance.

Asset Explorer (1).jpg

Asset Explorer allows engineers from

industrial businesses in the ecosystem of

upstream oil, gas, power, and manufacturing plants

to locate and track equipment and their

metadata around the world.

 

Problem-Solution Statement

Provide a very flexible way to build an asset data structure called hierarchy to allow different data consumers to view information about the relationships between its equipment in a way that makes sense for each one of them. For example, what is valuable for a process engineer who wants a hierarchy to target the good and effective functioning of the plant processes as for a site engineer who needs to track the maintenance of equipment.

In this environment is important to understand and define industrial terms. Equipment is referred to as physical pieces as compressors, pumps, valves and types, turbines, furnaces, etc that are performing a process over time. This equipment collects data from sensors and transmitters that are stored in large spreadsheets and databases.


Understanding Requirements

Asset Explorer.jpg

The organization and division of content started with the definition of main requirements using a  sorting system as virtual sticky notes to move around sections and understanding content and functionalities making the connection between different pieces of information using product tags categories.

Everyone involved in this product development applied information architecture methodologies during the design process and started from the product manager requirements list filled with users feedback and product needs.

I started thinking carefully about how to present to the user, for example, 3M tags of metadata interconnected per user view and utilize the real state of the viewport meaning vertical and horizontal space. Defining information architecture helps to define a foundation for the UX.

Asset Explorer (3).jpg

Research

Challenges

Facilitate data mapping

Display large views as granular

Provide a flexible model that scales

 

User Research & Personas

Industrial companies have different engineering roles across the organization for this particular section of the company's operation are two types of personas that are responsible for the proper functioning of the plant at the process level and at a maintenance level of physical equipment.

Each one has to build a nested view to map and monitor all the equipment also to easily locate it, in some cases when the company is very big, engineers can replicate this view and mapped to a larger plant and in multiple regions in the world. 

These personas are a process engineer that makes sure that the processes are running correctly and efficiently and a site engineer who is responsible for maintenance. Both are running under safety protocols.

Personas.jpg

Data Models & Inspiration

Once the investigation has progressed, I carried out a study of data behavior. I understood its own grouping and expansion as a big container containing inside more related pieces that conform an instrumentation process. 

Data Model Expansion

Data models.jpg

Parent-child

I observed that businesses have the interest to control large pieces as granular pieces due that those provide metrics of performance and alerts (sensors), which send metadata to databases.

In other words, this data model needed grouping, categorization, and infinite expansion always keeping relationships of parent-child something that the engineers call ancestral tree mapping.

 

Sankey Diagram Reference

Screen Shot 2021-05-01 at 7.15.47 PM.png

The use of Sankey diagrams

Came to me in a way to restructure the information in a familiar way for the engineers allowing relationships in a flow representation and their quantities.

You might typically see this diagram used to show the flow of money, materials, information, or energy.

From Sketching to User Interface

I envisioned the use of the entire real state of the canvas to fit large data but in a restructured manner.

Understanding the information architecture of this product section was a very important key to come up with a very flexible data model solution.

D3 libraries used for the flow connections I used the Bézier curves to offer some guidance to developers D3 Library

Sketch (3).jpg
 

Reviewing wireframing to polish final features

IA was essential for helping users to understand the new section in the software to speed up the asset frame building meanwhile enjoying doing it.

Using data visualization can help with the understanding of complex data resulting in a new model keeping the main principles, in this case, flows builds the connections of data.

Wires (2).jpg

UX Solution

With this design solution was possible to resolve many use cases in the market, especially in the transmission and distribution industry, the hierarchies demand of an entire company that reflects a large and complex distributed infrastructure. With this implementation, the software managed to support millions of data flows and hundreds of levels of depth.

Cards were used to contain and organize in a powerful index card multiples views of customers' facilities at an enterprise level. Cards provide highlighted information about the structure, deep, timestamps, ownership, and permissions.

 

Hierarchy Builder

Our customer's data is organized by large data tables that contain the typical use of headers, columns, and rows, commonly they used Excel to map and filter the information which is presented without any structure and presented at once. This data have relationships between parent and child but this table does not present a clear map to that.

 
ezgif.com-gif-maker.gif

Create and deploy asset models

Selecting metadata from the dropdown populates the right data mapping to keep contextualizing tags connected in the database.

 

Incremental Features

Using data visualization can help with the understanding of complex data resulting in a new model keeping the main principles, in this case, flows builds the connections of data.

 
testLevel filter 8.jpg

Filtering

Customers asked a way of finding quickly tags per column. This filtering is preserved.

 
testResize Column 6.jpg

Resizing columns

Allows the user to see long strings.

 
testReordering level 7.jpg

Drag and Drop

Allows the user to modify their hierarchy branches in a flexible way.

 
ezgif.com-gif-maker (2).gif

Adding Levels

Allows reusing an existing hierarchy to see another asset model or keep evolving it.


Key Learnings

The principle of disclosure was highly used in this solution, which deals with the fact that people can only process new information in a certain way. Meaning by this is that people can’t consume large data at once because can cause cognitive load or don't want to deal with unwanted information.

Recognition rather than recall. Keeping consistency on the use of information maintaining main titles on headers and flyouts to always guide so the user knows exactly where he is and where to find the desired information.

User interaction to allow discoverability. The disclosure happens when the user clicks on the expansion of nodes to discover more information contained.

 

Conclusion

What I loved about this project was that

my work can help to prevent massive industrial

disasters, saving lives, and protect the environment.