BILL • FinTech Internal Tooling
Automating engineering workflows for notification issues
Role
Product designer
UX engineer
Team
4 software engineers
1 product manager
1 ux researcher
Timeline
Jun - Aug 2025
Skills
Product design
Frontend engineering
Systems thinking
UX research
OVERVIEW
BILL is the leading financial operations platform for SMBs
$300B
total payment volume (~1% of U.S. GDP)
500,000
SMBs served
8M+
network members pay & get paid
Accurate & timely payment notifications are essential to building customer trust
Notifications, or 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 notifications 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 notification issues
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
This workflow automation tool resulted in…
85%
faster time to resolution for support tickets related to webhooks
~12 hours
monthly time saved for internal support teams
DESIGN OBJECTIVES
How might we enable support teams to identify and simulate missing notifications 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.
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.
6
users
1 on 1
sessions
30
minutes
4
tasks
Key finding: Users need more context & guidance to act
I improved the functionality, organization & discoverability of my designs
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.