Workflow Builder Low-Code Design Case Study

Helping the engineering teams build effective workflows within Zinier

Overview

About Zinier

Zinier is a field service automation software. The company invests in finding solutions to common problems of speed and scale with AI-driven field service management.

Zinier low-code suite of apps

Zinier has a low-code platform built for helping developers and citizen developers develop and deploy solutions at high speed. It consists of a wide choice of prebuilt field service solutions ready to go, a Low-Code platform to self-build applications, and a highly configurable AI engine for transformative predictive service - all in one.

Team Members

1. Product Manager: Abhijeet Anant Joshi

2. C-Suite Stakeholders: Gideon Simons

3. Engineering Stakeholders: Ritesh Goyal, Shwetha Murthy

4. Product Designer: Dhananjay Garg

Case Study: Workflow Builder

Problem Statement

I conducted a short Workflow (WF) Simulator research study in August 2020, which uncovered many WF Simulator issues. It also exposed a significant concern around declined usage of the Workflow Builder. In the revamp of Workflow Builder, we looked at getting the workflow simulator combined into the builder, increasing the adoption of WF-Builder, and fixing some of the critical library bugs.

Workflow Builder is typically used to build complex organization-wide process workflows. Once made, the tool (whose WF got built) and processes are tied to the logic and follow it religiously.

The engineering teams use a Workflow Simulator to help simulate and look for bugs in the designed Workflow. So, ideally, the process of building and simulating goes hand-in-hand and is usually done one after another by the same engineering team member.

Objectives

1. Combine WF Simulator and Builder.

2. Find a library or build in-house support for building and simulating workflows.

Affected Personas

• Citizen Developers

• Advanced Developers

Research Findings

Learnings from Workflow Simulator Research

Problems

1. UI realignment with Mobile Page Builder (MPB) and WorkFlow Builder (WFB).

2. Very little visible space to edit long strings of code. The area available to write/edit code is tiny.

3. The user cannot search in non-editable blocks.

4. The user wants to wrap content for WF-JSON. See Process-Rule in any Process-Node.

5. Collapsable line and line numbers needed for Context-Variables, WF Inputs, Input Variables, Output Variables. Code should be formatted/indented for Context variables, input variables, workflow inputs, output variables.

6. Need more space to debug Context variables and logs.

7. Search inside read-only components Context variables, input variables, workflow inputs, output variables.

8. Need full-width JSON editor to edit Process Nodes.

9. WF-Simulator should have stored sample WF inputs.

10. In case of errors, WF-Simulator should show the last node, which failed in RED.

11. Multi decision node not supported in the preview of WF-Simulator.

12. Workflow Builder should have a horizontal scroll. Unfortunately, the user could not follow the WF with 100% zoom.

13. For Process Node (JS) > Position/line number of errors should be shown in LOGS.

14. Errors should be marked in RED for LOGS or have a different tab for logging ERRORS.

15. The instance node is not getting stimulated.

16. Process value editing is the main problem.

17. He wants a way to configure breakpoints.

18. Reduce string length of logs (redundant data at the start of the line).

Zinier Team Ideas (via Team Interviews & MIRO Sessions)

1. Show the direction the nodes can be connected to in the workflow builder. Meaning unidirectional nodes vs. bi-directional nodes.

2. Simulate and configure the breakpoint button for each node.

3. Edit and Delete a node.

4. Built-in debugging support for each node.

   1. Total elapsed time/run time.

   2. How much time does each node take to execute during the simulation?

   3. For each, Node Details - JSON Definition, name of the type, type of node.

   4. For each, Response - The result you get at the end of running the node.

   5. For each, Console Logs - Execution Logs

   6. For each Context Variable

   7. The time limit for the node to execute

5. Node Types and short description text

6. Logical classification of nodes.

   1. Start/Stop Nodes.

   2. Logic Nodes.

   3. Crud Nodes.

   4. Template Nodes.

   5. Process Nodes.

   6. Utility Nodes.

7. Verbalize the flow of the nodes

8. Execute just one node. If a user executes a node, then all the nodes till that point get executed. So you don’t need a breakpoint specifically.

9. Put description for each node before dragging or after dragging into the canvas.

10. Red, Yellow, Green status for Failed, Not Tested, Tested & Successful. This status should be attached to each node to let the developer know which parts of the Workflow are tested and not tested.

11. When a user clicks on a node, complete configuration documentation should be shown/displayed/made visible.

12. Move away from the usage of localStorage to save the data from Workflowflow.

User Flow/Competitor Study

• Knime: KNIME Software bridges the worlds of dashboards and advanced analytics through an intuitive interface, appropriate for anybody working with data. It empowers more business experts to be self-sufficient and more data experts to push the business to the bleeding edge of modern data science, integrating the latest AI and Machine Learning techniques. KNIME is distinct in its open approach, ensuring easy adoption and future-proof access to new technologies.

  

• Parabola: Parabola is a drag-and-drop productivity tool that runs entirely in your browser. Parabola makes it easy for anyone to automate their manual, repetitive data tasks. We have a library of customizable, prebuilt components specifically designed for e-commerce operations and marketing teams to pull in data, combine and transform it in bulk, and automatically take action.

• Tonkean: Tonkean is the OS for Business Operations, transforming operations teams from facilitators into Makers with an enterprise-grade, no-code process orchestration platform. By abstracting the technical knowledge required to automate, monitor, and manage mission-critical business processes while maintaining compliance and security, Tonkean enables enterprises to accelerate operational velocity at scale.

  

• Salesforce Einstein: Salesforce Einstein is the first comprehensive AI for CRM. An integrated set of AI technologies makes Salesforce Customer 360 smarter and brings AI to trailblazers everywhere.

  

Existing Workflow Libraries

1. Rete.js

2. NoFlo

3. React Flow

Final Solution

We looked at all the research conducted under this epic and talked to the engineering teams. It made us understand how the engineering team would like the tool to be built based on the current set of issues faced.

Breakdown of the solution

• Node Description: Each node will have a unique description and documentation linked to it. It will enable engineers to learn more about each node and dig deeper into the documentation. In addition, it will reduce the hand-holding and onboarding time for recruits.

• Node Direction: Each node has a directional design to them. This change allows the engineers the know which directions the node should get connected to.

  

• Node Briefs: Even though the nodes have documentation for each node, the tool attaches a small two-liner brief for engineers to know about each node and which node they are dragging and dropping into the canvas.

  

• Configuring Breakpoints: When simulating workflows, engineers must debug for issues and stop the flow after a certain point is reached. All of this can now be achieved by using breakpoints configured for each node.

  

• Freehand Connectors: Each node has a directional design to them. This change allows the engineers the know which directions the node should get connected to. For example, the Workflow start should have the Start Node, and the end of the Workflow should have the End Node. Engineers can hover over each node and connect them to the previous or next logic node by simply clicking and dragging over them.

  

• Node Simulation: Engineers can configure breakpoints to each connected node and then simulate the entire Workflow. After simulation, the data processed through each node can be seen and analyzed separately. In addition, the platform will show the time required for each node to get executed and if encountered any errors during the process.