Problem Faced
Problem Definition
Manually setting up webhooks for each queue is time-consuming.
Users need to configure similar settings multiple times.
Increases chances of mistakes and inconsistencies.
Difficult to manage or review all webhook configurations.
Issues are harder to identify and resolve across multiple queues.
Doesn’t scale well as the number of queues increases.
Solution/Objective
Proposed Solution
Streamlined Setup: Users can configure webhooks in one place, reducing time and effort.
Reduced Repetition: Eliminates the need to repeatedly configure similar settings for each queue.
Fewer Errors: Minimizes mistakes by reducing manual entry and ensuring consistent configurations.
Centralized Management: Provides a single point for managing and reviewing all webhook configurations.
Better Scalability: Scales efficiently as the number of queues and events of trigerring increases, and changes can be applied globally.
Efficient Change Management: Allows for easier and more consistent updates to webhook settings across all queues.
Information Architecture
Defining the flow
To understand the flow I started with figuring out the steps a user should undergo to setup a webhook in the platform
The flow was discussed with the stake holders and the development team to get the thoughts and feedback
Inspiration
How other platform does this
As we were in a hurry to ship this feature out, wireframing was not documented it was done on books and presented
We got some inspiration from the industry leaders like Zapier on how they are helping users to setup webhooks easily
Designing
Flow Starts
The idea was to add a new section on the profile page exclusively for webhooks
If any of the webhooks were not configured there will be a blank table where the user need to click on the prominent button "Add New Webhook"
Either the user can click on the primary button or the teritiary button
Designing
Setting up Webhook
When the user click on "Add New Webhook" the user is presented with a modal were he has to select the type of webhook
As a first step we decided we will be focusing on make an API call is done when something happens in the system
When the user select "Make an API call" option he should enter the details like "Webhook Name" "Selelction of evevnts" "Webhook URL" "Parameters"
I gave an option to add an alert email so that the user will know if the webhook fails at any point
Designing
Population of Webhook Table:
When a webhook is created it will get populated on the table that the users will see when they arrive at the webhook section in the profile page
Table is populated with columns that give the users an idea of what is happening with the webhook they have configured
Play and Pause icon is provided to the users for quickly enabling and disabling the crated webhook
The users are able to assign the webhook to multiple queues, edit the webhook and delete the webhook if needed, this can be done be using the kebab icon on the Actions column.
Future Enhancement
Linking Webhooks and Labels
To make the feature scalable we linked webhook to labels feature which was present in the dashboard
There was light UI changes, it worked like when a user assign a label to any document then the webhook that has been linked will get triggered
Future Scope
Thinking Wide
While designing the feature we made sure that the webhook system is very scalable
Initially we focused on 4 major events document getting Uploaded,Deleted,Completed,Rejected
The company should be able to add more events in the future and the UI should be scalable
The user should be able to get an email or a whatsapp message when something happens in the system
The email and whatsapp message should be customizable from the user end
The designs were completed and the stake holders should look at the scope and bandwidth to implement it
