Capture structured data for workflow requests

Designing a form builder to allow admins to capture structured data as part of the workflow, Allowing them to capture necessary request details to process the request

Background

Augmentation to workflow builder

Productiv as part of App procurement hub offering, launched a workflow builder aimed to automate software renewal process. Although the workflow builder allowed users to request for necessary approvals and reviews for the renewal. The builder didn't lacked the ability to allow admin to capture specific information based on the type of software being renewed. This resulted in unneeded to and fro between the admins and stakeholders, resulting delay in renewal. To overcome this problem the we needed to build means of allowing admins to request for additional information specific to the software being renewed.

CHALLENGE

Build dynamic forms to capture structured information

After launching the initial Renewal Workflow, we identified a gap in our solution. Users needed a structured way to capture detailed information during the request process. The absence of customizable forms resulted in incomplete or inconsistent data collection, slowing down approvals and complicating audits.

To address this, we developed a Form Builder as an integrated component of the Workflow Builder. This addition allowed teams to create dynamic forms tailored to capture specific data points based on the type of request. For example:

New Software Request: Captures software name, website, vendor details, cost, number of licenses, approvals, and whether PII (Personally Identifiable Information) is involved.
Software Renewal: Captures results of security audits, renewal cost, and compliance status.
Audit Review: Enables capturing results of audits for record-keeping and future reference.

REQUIREMENTS

Design a intuitive form builder

The Form Builder needed to fulfill several critical requirements to ensure usability and alignment with existing workflows:

Ease of Use: A drag-and-drop interface to allow non-technical users to create forms seamlessly.
Customizable Input Controls: Support for various input types like text fields, dropdowns, checkboxes, and file uploads.
Pre-Built Fields: Essential fields such as software and vendor names should be non-removable to ensure data integrity.
Conditional Logic: Ability to show or hide fields dynamically based on user inputs.
Field-Level Configurations: Users should be able to configure field properties, such as length, requirement status, and help text.
Template Reusability: Forms should be reusable across different workflows to reduce repetitive setup.
Workflow Integration: Seamless integration into existing workflows as tasks or request tile

Key features

Input controls include text fields, dropdowns, checkboxes, radio buttons, date pickers, duration selectors, lookup fields, and file uploads.

Each form element comes with customizable options displayed in a configuration pane upon selection

Forms support dynamic visibility rules, allowing certain fields to appear based on previous inputs

Users can easily add and arrange form elements through an intuitive drag-and-drop interface.

Ability to link to workflows or request tiles

DESIGN

Create a new form

User can select the type of form he wants to design and then drag and drop input controls onto the form to design the form. Based on the type of the control select, its configurable properties would be shown in the right pane.

DESIGN

Drag and drop questions

I also designed a drag and drop interaction for user to adding questions to the form

DESIGN

Design documentation

I also documented the various states of the controls, Side pane, Properties, Builder view, Form view editable , Form view readonly as part of the developer handoff

Aravind Rangaswamy · aravindrswamy@gmail.com · 669 225 8310