BILL • Shipped 2025

Operational tool for webhook management

BILL is a financial operations platform that enables half a million SMBs to pay and get paid. I designed and shipped a new tool for managing webhooks in BILL Base, the internal operations tool used by support teams to resolve customer issues.

Role

Product designer

Team

2 software engineers

1 product manager

1 ux researcher

Timeline

Jun - Aug 2025

Tools

Figma

React.js

HTML/CSS

What are webhooks?

Webhooks are event-based "reverse APIs" that allow one application to send real-time data to another application when a specific event occurs. BILL uses webhooks to notify customers of critical events such as payment status updates. Sometimes customers don’t receive webhook events due to upstream delays, resulting in customer frustration and increased workload for support teams.

THE CHALLENGE

Troubleshooting missing payment webhooks takes a long time

Support teams…

don’t have the information they need, resulting in additional back and forth with customers

have to search across multiple codebases, slowing down time to resolution

THE SOLUTION

I designed a cohesive user interface for diagnosing & resolving issues related to payment webhooks

Users can search for subscription and webhooks information related to any payment identifier, get at-a-glance visibility into the underlying reasons for webhooks failure, and simulate webhook events with a single click mechanism and get immediate feedback.

THE IMPACT

The webhooks management tool resulted in…

85%

faster time to resolution for support tickets related to webhooks

~12 hours

monthly time saved for internal support teams

Scroll to see the process ↓

DESIGN OBJECTIVES

How might we enable support teams to identify and simulate missing payment webhooks efficiently?

The engineering team had built an API for retrieving the webhook associated with the latest payment status, and they needed an interface users to diagnose the issue and confidently trigger the API. Working with my PM and the engineering team, I determined the following design objectives.

Streamline search process for webhooks

Allow users to quickly get relevant results with as little information as possible

Align search results with users’ mental models

Ensure content accessibility and usability for different support personas

Empower users to take action faster

Design interface for users to simulate webhooks and get immediate feedback

DESIGN EXPLORATIONS

I explored information architecture, exploring different content layouts to maximize clarity & discoverability

I worked with the engineering team to define the design requirements for a new user interface. I discovered each payment can be associated with multiple subscriptions, and each subscription is linked to a subset of webhook events for payment statuses.

Users prefer experiencing simple progressive disclosure & navigating within a single viewport

I created several user flows for viewing and navigating information. Early feedback revealed users prefer completing all actions on one page without scrolling multiple times. Below are some design explorations I showed to users.

Layout 1 / horizontal tabs

Layout 2 / list of cards

I determined an expansion panel design best meets user needs for clarity & simplicity

I combined the delightful aspects of each layout exploration and created the expansion panel design. I presented this user experience with sample content to the cross-functional team in a design review, and my designs got approved for production.

ITERATING ON USER FEEDBACK

I conducted user testing on my prototype to assess usability & identify areas of improvement

I conducted 30 minute 1-on-1 sessions over Zoom with 6 engineering users who interacted with the Figma prototype. Users completed a series of four tasks: searching for a payment webhook, sending the missing webhook (primary use case), resending a webhook (a secondary use case we identified), and viewing different subscriptions.

users

1 on 1

sessions

minutes

tasks

Key finding: Users need more context & guidance to act

users don't immediately understand what this identifier represents

users don't know which webhook event(s) this button triggers

users are confused how this org ID relates to the Org ID search field

users have trouble finding the "Resend" button

I improved the functionality, organization & discoverability of my designs

descriptive labels for organizing subscriptions

inform users which event button triggers

distinguish different org IDs using clear labels

pin action buttons to viewport for visibility

Learnings

1 / Collaborate early & communicate often

I found it really helpful to get early feedback design concepts from cross-functional stakeholders & other product designers. Initiating informal design critiques is key to rapid iteration & shipping products on tight timelines.

2 / Actively seek a deeper understanding of users throughout the process

Working on products with technical users has made me realize that being a “user-centered” designer means maintaining an intrinsic curiosity for the people I’m designing for.

3 / Don't be afraid to advocate for your work & push back on opinions

As a designer, I'm the user's biggest advocate in conversations with PMs and engineers. I've learned to connect user-centered design decisions to business metrics, maximizing design's impact.