PI Vision Web App (Design Collection)
Visualize and Monitor Complex & Real-time Industrial IoT Data Efficiently
Product 1
OSIsoft
PI Vision Next-Gen
Visualize and Monitor Complex & Real-time Industrial IoT Data Efficiently
Overview
PI Vision is the leading IoT data visualization software in the industrial world for visualizing, monitoring, and analyzing real-time operational data. The most basic usage of the application is to visualize a data source value through a symbol/widget (gauges, trends, etc.). We support various symbols/widget types with great configuration flexibility.
Basic Workflow - Users create or open a workbook/display, browse and navigate through their organization's asset data structure, and locate the desired data source (i.e., an attribute of an asset) to use first. Then they tie the data source to a symbol and configure its properties to visualize the data in the way that best supports their monitoring needs.
​
Because the product is mainly used for real-time data visualization and analysis, there are many advanced features to help better monitor dynamic data. For example, Symbol Multistate is a feature to transform data symbols, shapes, images, and texts into visual alarms by altering their properties (e.g., color) based on dynamic data values. Collection and Dynamic Table enable query-based data retrieval and visualization.
My Role
Interaction Design Design
Evaluative User Research (User Testing)
Work With
SPM + TPM
1 Design Manager
5 ENG Teams (4 - 8 developers/team)
Customer Support Engineers
Customers
Design Objective
Create an advanced tool for users to monitor and analyze real-time industrial IoT data with confidence and ease
Feature 01
Data Navigation and Search Pane Design
Sketches (Two Alternative Designs)
Wireframes
The navigation and search pane is where users browse and navigate through their organization's asset data structure and locate the desired data sources to (i.e., the brake temperature of a mining truck) for visualization.
Feature 02
Multi-state Initialization & Configuration
Multi-stating is an advanced but essential feature for monitoring real-time data. It can turn display objects like gauges and shapes into visual alarms by altering their properties (e.g., color) based on dynamic data values. Values of properties are assigned to ranges of data values, corresponding to process states, through user configuration. When the data value of a multi-stated object enters an assigned range, its properties will alter to indicate a change of state.
Feature 03
Collection Editing & Formatting
(a query-based dynamic symbol group)
The collection is a query-based dynamic symbol generator and container. It can take existing symbols as a reference and automatically generate a dynamic group of relevant symbols based on configured criteria.
My job was to design the interactions and UIs of initiating a collection, modifying a collection, configuring the criteria used, and formatting a collection.
Process Flows
Wireframes (Mid-fidelity)
Feature 04
Dynamic Table Query Configuration
The dynamic table shows data that changes dynamically based on the configured query. My job was to design the configuration experience for the table.
Wireframes (Mid-fidelity)
Feature 05
Multiple Trend Cursor
Our users would like to place multiple cursors on a trend to do a quick comparison and analysis on the data across different times.
​
My job was to design the interactions and UIs to make sure that all the important information was clearly shown to the users under different situations and the workflow was intuitive. One big challenge of this design was to consider all the cases of the cursor placement and avoid covering important information.
UI Mockup
Product 2
OSIsoft
PI Vision 3
Web-based IoT Data Visualization Software for Monitoring Real-time Operational Data
(More work samples will be added later)
Feature 01
Ad Hoc Analysis
