Problem Faced
Problem Definition
Users were unaware of document or resource status changes until manually checking.
Users spent significant time repeatedly checking dashboards for updates.
Reliance on manual checks or polling APIs resulted in slow and inefficient data access.
Delays in receiving critical updates caused bottlenecks in essential workflows.
Invoices, contracts, registrations, or other critical items were not processed promptly, leading to delays.
Manual checking increased the likely hood of human error.
Design Process
An Overview
I initiated the project by conducting thorough requirements gathering sessions with key stakeholders, including CTO,PM's and Sales Executives
These sessions focused on understanding the specific pain points related to manual processes and the lack of real-time updates.
Guided by the insights gained from stakeholder meetings, I focused on creating a user-centric design that prioritized ease of use and efficiency.
Wireframes and prototypes were developed to visualize the system's interface and functionality, allowing for early feedback and iteration.
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
Initial Iteration
"Webhook Setup" and "ADD WEBHOOK" clearly indicate the function of the interface.
"Webhook Name," "Select Events," "Webhook URL," and "Alert Email" are the core components needed for webhook configuration.
The form follows a familiar layout, making it easy for users to understand and complete.
Drawbacks and Scalability Issues:
The major drawback is the checkbox-based event selection. If the number of events increases significantly, the form will become excessively long and cumbersome.
With a long list of checkboxes, users might accidentally select or deselect events.
Designing
Optimizing the design
The initial single-form webhook setup faced scalability issues as the number of event triggers increased. To mitigate this, a two-step workflow was implemented.
The workflow was divided into: (a) "ADD WEBHOOK" for basic setup (name, URL, alerts) and (b) "EVENT CATALOGUE" for detailed event selection, creating a more modular and manageable experience.
The "EVENT CATALOGUE" tab introduced search, filtering, and categorization capabilities, improving user navigation and reducing the complexity of event selection.
Separating basic setup from event selection allowed users to focus on distinct tasks, reducing cognitive overload and minimizing errors.
Designing for scalability
Future- Proof Solution
As the system evolves and new event triggers are introduced, the 'EVENT CATALOGUE' can accommodate these additions without compromising the core webhook setup process.
The separation of basic setup and event selection creates a modular architecture that can be easily scaled.
By creating a scalable and adaptable design, the two-step workflow reduces the need for frequent redesigns or major overhauls as the system evolves.
This translates to lower maintenance and development costs in the long run.
The Impact
Impact of the Webbook System at Staple
Users can now configure webhooks with significantly fewer steps, streamlining the setup process.
Users receive instant updates on critical events, eliminating the need for constant dashboard refreshing and ensuring timely responses.
Webhook integration into user workflows has tripled, demonstrating the system's ease of use and value.
API polling requests decreased by 70%, significantly reducing server load and improving system performance.
The system boasts a high webhook success rate on the first attempt, ensuring dependable and consistent event delivery.
