Constanza

As a Senior Product Designer, I led the design of a Multi-Step Approval Process for a complex rule engine flow, aiming to transform a cumbersome procedure into a streamlined, intuitive experience. Our goal was to empower users with the flexibility to configure multiple approval steps effortlessly. By conducting user research and gathering extensive feedback, we identified pain points and opportunities for improvement. The result was a user-friendly interface that not only facilitated seamless setup of approval steps but also enhanced overall efficiency. This project allowed me to leverage advanced design principles to create a sophisticated yet accessible tool, ultimately elevating the user experience to new heights.

Timeline

March 2024 - Ongoing

Role

Lead Product Designer

Team

PM, EM, 2 Frontend Devs, 2 Backend

Enhancing EQS's automated workflows

Within EQS's Compliance Cockpit, we currently have an approvals process that functions via a rule engine feature.

This rule engine allows users to configure an approval process for employees requests in case of receiving any sort of benefits or gifts from a third party.

Example of current Rule Engine (before EQS's rebrush):

As I embarked in this project, I realized that simply adding extra features, would not be sufficient to improve the user experience while navigating though our tool.

Understand

As previously mentioned, as I jumped into this project, I quickly realized that the scope of it was much larger. The need for a more tailored, efficient, and improved experience became apparent.

The main challenges with the existing setup were:

Our users were companies with large amount of employees, located in different regions, which meant that every case was particular and required an extra layer of rules to be set.
The current flow, when having a populated the screen could not be overviewed at a single glance, and the user had to scroll up-down/left-right in order to navigate the rules setup.
Whenever adding a new step or node, into the rules setup, the screen was covered by a modal, that would block all view from being able to live-view how the setting was being done.
The current setup was also limiting the possibilities for the variables that could be set with this tool.

Enabling a the multi-step approval process

During the design phase of the Multi-Step Approval Process, our primary goal was to create an intuitive and seamless experience that allowed users to easily set up multiple approval steps within a rule engine flow. Additionally, I recognized an opportunity to further improve the overall user experience, ensuring that the system was both highly functional and exceptionally user-friendly.

Multistep Approval required functionalities

Allow the user to add up to 5 levels of approvers.
Provide an improved user flow, where the new features wouldn't disrupt.

Some of the key findings on the current rule engine functionality

The current EQS Approvals' Rule Engine has highly complex use cases, which means is very customizable depending on the user needs.
The UI needed an update and match the parallel development of 'Brezel' design system
Due to the amount of variables, the viewport (non responsive) can get crowded, which makes it really hard to navigate.
Each content 'node' is editable and customizable, the current flow displays a modal that allows the user to set their desires parameters.

‍

Designing the user experience

Improving the experience with baby steps:

Our fist quick win was to move all the setting elements into a side navigation. This provided the user the chance to 'live set' desicion and see what those desicions meant for the overal rule engine, without being disrupted with overlaying content.

‍

Movement flexibility

Due to the user's high complexity cases, the rule engine could be highly populated and this was currently activating an horizontal and vertical scroll bar.

‍

The scroll bar solution didn't provide a smooth experience, and meant that the user couldn't easily navigate thought the different nodes or have a overview at a single glance of the whole setup. I decided to go with a more dynamic navigation, via a toolbar and the bottom of the screen, that would enable the user to zoom in/out and grab the canvas around, as their needs required.

‍

Enabling the multi-step approval process

Another mjust needed feature was to enable our users to set up an approval process that could count with up-to 5 different levels of approvals. In order to achieve this, we implemented a flow that easily allows the user to not only setup a single accept/decline process, but is flexible enough to allow multi step approvals.

Impact and future directions

Improving the user experience of the rule engine, not only provided an invaluable benefit for our users in their approval processes. But the new flexibility of this workflow, quickly brought the interest of other cockpit stakeholders. The impact of it, was reflected into a new project that currently is being planned, that would include our new feature on a much global scale, allowing our users the possibility of creating, editing, and defining new workflows for the different compliance areas, within EQS's product suite.

EQS - Rule Engine