Simplifying Asset Inspections: Smarter Approvals and a Cleaner UI

The Inspection module within the RiConnect platform plays a crucial role in managing the process of sending assets to inspection companies and obtaining the necessary certification. This module ensures that asset owners can efficiently navigate the complexities of inspections while maintaining compliance and transparency.

However, despite its importance, the current Inspection module faces several challenges, including a convoluted approval process, excessive information clutter, and complex user permissions. This project aims to address these issues by optimizing the Contract Section to create a more user-friendly experience, streamline workflows, and enhance overall efficiency.

Project Overview

This project focuses on optimizing the Inspection module within the RiConnect platform, specifically the Contract Section, which manages the process of sending assets for inspection and obtaining certificates. The asset owners, who are clients, rely on inspection companies (suppliers) to ensure compliance. The goal is to simplify the multi-role approval process involving users, managers, and administrators.

Problems

• Complex Approval Process: Multiple entry points for manager approvals—up to three different locations—causing confusion.

• Scattered Permissions: Inefficiencies arise when administrator-level approval is required for tasks that managers should handle.

• Information Overload: The interface presents unnecessary information, making it difficult for users to focus on what they need.

• Excessive Navigation: The system involves repetitive clicks and page jumps, leading to a disjointed user experience.

• Role and Permission Complexity: Different user roles and permissions create confusion, requiring a clear and organized UX design.

Goals

• Simplify the approval workflow, reducing the number of confusing entry points for managers.

• Reorganize and redefine user permissions, eliminating the need for administrator approval when tasks can be performed by managers.

• Rethink the UI to display only essential information that users actually need, reducing unnecessary clutter.

• Solve the issue of repetitive clicks and page jumps, creating a more seamless user experience.

Challenges

• Clarifying account permissions at every stage, ensuring roles like managers and administrators have clearly defined responsibilities.

• Reworking the UI to present only the most relevant information while reducing excessive navigation.

• Handling the complexity of different user roles and permissions, and organizing them into a more streamlined UX that balances the needs of all users.

  
  

Charting Our Course: Crafting the Workflow Flowchart

To successfully optimize the workflow, we begin by mapping out the existing process and creating a flowchart to analyze it. This will help us identify areas for improvement and streamline the workflow, ultimately leading to a more efficient approval system.

In our analysis, we identified a bottleneck in the workflow where the "Complete" button in the Select Asset(s) and Complete the PO step must be executed by an Admin. This has disrupted the overall process (Fig. 1).

(Fig. 1)

To address this issue, we revisited the Account Permissions (Fig. 2) and clearly defined the execution scope for all account types.

(Fig. 2)

We aimed to simplify and clarify the permission structure to avoid situations where only Admins can perform certain actions, leaving users unable to complete essential tasks.

This long-standing problem has led users to set their accounts to the highest Admin level, undermining the purpose of the original tiered permission system.

Ultimately, we not only adjusted the permission execution items but also merged the approval and certificate generation processes. This change eliminates the need for managers to perform repetitive clicks, making the overall workflow simpler and enhancing both operational efficiency and user experience.

Additionally, based on user feedback collected from the sales team, we learned that most users do not utilize the Statement function. Therefore, we decided to hide this feature in the optimization process to streamline the workflow further.

Aligning the Functional Map: Crafting a Clear Path Forward

As we delve deeper into the project, we find ourselves at the crucial junction of mapping the functional elements. Here, we weave together the flowchart and user stories, reorganizing the intricate details of the Contract, PO Details, and Contract Details pages.

This thoughtful alignment not only simplifies the workflow by removing unnecessary entry points in the Certificate section and the Processed tab under Contract in Process, but also paves the way for a seamless user experience and clarity in the approval process.

Like a well-tuned orchestra, every detail must harmonize—let’s ensure our functional map hits all the right notes!

Crafting the UI Design and Flow: Following the Blueprint

Designing UI is like storytelling; every element should guide the user through a narrative that feels effortless and engaging.

With our functional map and flowchart as our guiding stars, we embark on the exciting journey of UI design. This phase involves translating the structured information into an intuitive and visually appealing interface. By aligning the UI design with the flowchart, we ensure that each interaction is seamless and user-friendly, creating a natural flow for users as they navigate through the system.

What We’ve Achieved: Streamlining for User Clarity

As mentioned earlier, we meticulously arranged the information according to the functional map, consolidating page content and removing unnecessary approval entry points. By adopting the user's perspective, we focused on integrating the information that truly matters to them (Fig. 3).

(FIg. 3)

We streamlined the previously scattered pages by unifying essential information onto a single screen. This allows users to quickly glance at the table list and instantly understand the inspection and approval status of their assets (Fig. 4).

(Fig. 4)

Finalizing the Design: Expanding into Subpages and Pop-ups

Once the main page information was finalized, we moved on to designing the subpages and pop-ups. Throughout this process, we leveraged annotations to communicate essential details with the development team, ensuring a shared understanding of the design intentions. Finally, we crafted the UI flow for the approval and certificate generation processes, following the scenarios outlined in the flowchart.

Wrapping It Up

I'm thrilled to share that our optimization project has sailed through upper-level review and is officially in the development pipeline! I can't wait to hear the user feedback once it goes live. Here’s to hoping that these enhancements bring a whole new level of efficiency and joy to our users’ experience!