PIDGraph: AI Industrial Software

Role:

UX Researcher & Designer

Project Timeline:

December 2020 - April 2021

Location:

Heidelberg, Germany

Background

A state-of-the-art, AI-powered tool is designed to digitize technical Piping and Instrumentation Diagram (P&ID) documents with precision and efficiency. It is primarily utilized by process engineers and project managers who specialize in the creation, interpretation, and management of P&ID documentation.

The Problem

Feedback from initial users and insights gathered from key stakeholders have highlighted several critical issues impacting the user experience:

A steep learning curve, largely due to inconsistencies in user flow and user interface.
Limited availability of guidance and information for completing common user tasks.
Misalignment between the user's mental model and the actual functions available within the system.
A user experience that is comparatively less intuitive and more difficult to navigate than competitors.

Initial PIDGraph User Interface

Design Process

1. Kickoff

Collect initial information about the known problems from management and marketing teams.
Collect potential user contact information that potentially agrees to take part in the test.

2. UX Audit

In-depth study of the existing PIDGraph interface.
Evaluate the interaction based on the common principles (heuristic, law of UX, etc).
Identify the main problem as research questions for the test participants.

3. User Evaluation

Create the test protocol based on the main problems identified.
Assessing the potential participants.
Create test scenarios based on different user roles.
Prepare the software for the test session.
Conduct the test.

4. Creating Design

Analyze the research data.
Collect insight from the user feedback.
Communicate insights to multiple stakeholders.
Create a design in Figma.

5. User Test

Create a test protocol using the Figma mockup.
Create test scenarios based on the known problems.
Conduct the test

Gathering Insight

1. Data Analysis

To take an overview on what the participants mentioned during the test, after the verbatim of the test was collected, an encoding sheet was created to categorized the answers and feedback. Afterward, Post-Encoding was created to understand the criticality of every feedback toward the general experience of the system.

Encoding of User Feedback

Post-Encoding of User Feedback

2. Design Recommendation

41 points of design changes were created to improve the user experience of PIDGraph. Here are some of them:

15 out of 41 point of changes needed

Design Creation

41 points of design changes were created to improve the user experience of PIDGraph. Here are some of them:

Drawing Page

Before

The user criticized the initial design of PIDGraph due to its information structure that is not aligned with their mental model. For the drawing process, it was difficult for them to even just to make even a slight adjustment to the symbol, such as moving or resizing.

After

The proposed concept introduced the new layout structure, symbol on the left panel, and properties on the right. These two are where the user spends most of their time. Categorizing information on those panels made to makes them work easier. Distinctive symbol operation while drawing is intended to make the drawing operation easier.

Additional Feature: Team Management

Additional Function

In the old design, there is no way for the manager to keep track of who is doing what in PIDGraph without checking external communication tools like Microsoft Teams. For team member, it is difficult to get onboarded to a new project and check for their collaboration team. This new page tries to solve those problems.