Impact
1.5x reduction in support tickets related to unexpected sync charges, a direct result of surfacing the warning before the action, not after.
Airbyte Webapp
Billing warning flow for cloud users reaching high-frequency data refresh thresholds
Billing warning flow for cloud users reaching high-frequency data refresh thresholds
1.5x
Reduction in support tickets
2 weeks
Decrease in drops off from the Cloud customer base
Overview
A billing workflow redesign for cloud customers to understand data sync configurations and prevent unexpected charges.
Team
Product Designer, Product Managers, Frontend Engineer
Company
Airbyte
role
UX Design - B2B - SaaS Platform
Role
I designed a warning experience for high-frequency sync options so users could understand the cost impact before committing, preventing unexpected charges and accidental misconfigurations. My role focused on clarifying system behavior, simplifying descision points, which reduced user friction. and guided them toward more configurable settings.
challenge
Cloud customers were setting up high-frequency data syncs without realizing how much it would cost. The product had no way to alert them at the moment they were making that decision.
what was found
Customer Issue
A recurring question
The support team was flooded with the same questions: Why did my bill go up? What happened during my sync? The product had a gap of offering guidance at the point of decision, leaving users to guess.
Business Impact
Refunds creating instability
Unpredictable refunds made revenue difficult to forecast. Unexpectedly high bills were causing users to churn, especially customers who had switched to Airbyte from competitors specifically because of its pricing.
Customer Issue
A recurring question
The support team was flooded with the same questions: Why did my bill go up? What happened during my sync? The product had a gap of offering guidance at the point of decision, leaving users to guess.
Business Impact
Refunds creating instability
Unpredictable refunds made revenue difficult to forecast. Unexpectedly high bills were causing users to churn, especially customers who had switched to Airbyte from competitors specifically because of its pricing.
How it happened
Accidental Misconfiguration
Users switched from incremental to full refresh without realizing the cost difference between the two.
Alerts lacked context
Email notifications went out, but gave users no explanation of what caused the charge or what to do about it.
Usage buried in settings
Sync usage information existed in the product, but it was three levels deep inside Workspace Settings, somewhere almost no one looked.
Accidental Misconfiguration
Users switched from incremental to full refresh without realizing the cost difference between the two.
Alerts lacked context
Email notifications went out, but gave users no explanation of what caused the charge or what to do about it.
Usage buried in settings
Sync usage information existed in the product, but it was three levels deep inside Workspace Settings, somewhere almost no one looked.
Evidence from the product
Usage data buried in Workspace Settings, rarely seen by users
Usage data buried in Workspace Settings, rarely seen by users
Usage data buried in Workspace Settings, rarely seen by users
Alert sent via email with no context on cause or how to resolve
Alert sent via email with no context on cause or how to resolve
Alert sent via email with no context on cause or how to resolve
The result was a spike in support tickets, refund requests, and growing churn risk, particularly among users who had switched from competitors for Airbyte's value proposition.
The result was a spike in support tickets, refund requests, and growing churn risk, particularly among users who had switched from competitors for Airbyte's value proposition.
Current Flow
THE PROCESS
Then how we got to the final design?
Three design directions were explored before landing on the final solution. Each iteration was shaped by real constraints and feedback along the way.
Concept 1 : Surfaced cost implications upfront
Users were shown the cost impact of high-frequency syncs right away, with options to upgrade their plan, accept the additional charges or cancel the sync.
Why we moved on - Putting pricing information inside a warning modal asked users to make a financial decision in a moment of uncertainty. It was too much, too fast.
Concept 1 : Surfaced cost implications upfront
Users were shown the cost impact of high-frequency syncs right away, with options to upgrade their plan, accept the additional charges or cancel the sync.
Why we moved on - Putting pricing information inside a warning modal asked users to make a financial decision in a moment of uncertainty. It was too much, too fast.
Concept 1 : Surfaced cost implications upfront
Users were shown the cost impact of high-frequency syncs right away, with options to upgrade their plan, accept the additional charges or cancel the sync.
Why we moved on - Putting pricing information inside a warning modal asked users to make a financial decision in a moment of uncertainty. It was too much, too fast.
Concept 2 : Single confirmation alert
Since exact sync costs couldn't be calculated in real time it varies from team to team, the system shifted focus to a simple prompt: do you want to proceed knowing this may result in higher charges?
Why moved on - Exact data synced cannot be measured, the system can only alert users to potential high-frequency charges and this doesnt give much information to proceed to next steps.
Concept 2 : Single confirmation alert
Since exact sync costs couldn't be calculated in real time it varies from team to team, the system shifted focus to a simple prompt: do you want to proceed knowing this may result in higher charges?
Why moved on - Exact data synced cannot be measured, the system can only alert users to potential high-frequency charges and this doesnt give much information to proceed to next steps.
Concept 2 : Single confirmation alert
Since exact sync costs couldn't be calculated in real time it varies from team to team, the system shifted focus to a simple prompt: do you want to proceed knowing this may result in higher charges?
Why moved on - Exact data synced cannot be measured, the system can only alert users to potential high-frequency charges and this doesnt give much information to proceed to next steps.
Concept 3 : Single-click acknowledgment flow
Simplified to one acknowledgment step before the sync kicked off. But technical constraints on the frontend meant users still had to work through more steps than intended.
Why moved on - The additional clicks created friction at exactly the wrong moment in the flow, when users needed clarity, not more decisions.
Concept 3 : Single-click acknowledgment flow
Simplified to one acknowledgment step before the sync kicked off. But technical constraints on the frontend meant users still had to work through more steps than intended.
Why moved on - The additional clicks created friction at exactly the wrong moment in the flow, when users needed clarity, not more decisions.
Concept 3 : Single-click acknowledgment flow
Simplified to one acknowledgment step before the sync kicked off. But technical constraints on the frontend meant users still had to work through more steps than intended.
Why moved on - The additional clicks created friction at exactly the wrong moment in the flow, when users needed clarity, not more decisions.
SOLUTION
Use Case 1 : When a user switches a stream from incremental to full refresh
A warning modal surfaces before the change is saved, giving users the context they need to decide without leaving the flow.
Use Case 1 : When a user switches a stream from incremental to full refresh
A warning modal surfaces before the change is saved, giving users the context they need to decide without leaving the flow.
Use Case 1 : When a user switches a stream from incremental to full refresh
A warning modal surfaces before the change is saved, giving users the context they need to decide without leaving the flow.
Use Case 2 : When configuration changes need a one-time data refresh
The system flags which streams are affected and nudges users toward a one-time refresh instead of a permanent change, preventing recurring costs they didn't intend.
Use Case 2 : When configuration changes need a one-time data refresh
The system flags which streams are affected and nudges users toward a one-time refresh instead of a permanent change, preventing recurring costs they didn't intend.
Use Case 2 : When configuration changes need a one-time data refresh
The system flags which streams are affected and nudges users toward a one-time refresh instead of a permanent change, preventing recurring costs they didn't intend.
impact and takeaways
Hierarchy
Information hierarchy was the key. We wanted users to understand the reason for the warning without overwhelming them with too much information.
Action
Actionable CTAs were critical. Rather than highlighting that users were on the wrong path, we provided the best options to configure settings, paying close attention to button semantics.
other projects
Airbyte Website
Visual Design - Design system - Illustration