Mux’s Billing Portal

Problem and context:

Mux’s billing page had not been updated since the launch of the company 5 years ago, and needed to evolve to support new products and more complex plans. Very little detail was shown for usage, which made it difficult for customers to understand what their bill would be. The page needed a complete overhaul to provide more real estate for enhanced usage detail, new products and plans.

Key challenges:

Mux had multiple possible plan configurations, including custom plans for enterprise and volume customers, that all looked fairly different. My design had to be flexible to support all of these scenarios in a consistent way, but without introducing a lot of complex logic to display different versions of the page.

Approach:

I conducted a thorough discovery phase with internal stakeholder and customer interviews that provided a clear sense of pain points and limitations with the current billing page.

How my solution addressed the problem:

Visibility into their next bill: One of the biggest customer pain points I uncovered was not knowing how their usage would affect their next bill. This was a challenge for both our self-service customers and contract customers, who paid a fixed amount for a set of minutes each month. I learned we had estimated usage data easily available on our internal administration database, and we could easily provide an estimate of their usage, so I incorporated that into the customer-facing billing page.
Usage visualizations: Incorporating usage bars helped contract customers understand how much of their monthly contracted amount they had left.
Revised IA with room to grow: I expanded billing from a single page into a billing and usage portal with 4 different sections: the current billing summary, payment information, invoices and plans. This provided some much-needed real estate for detailed usage information and plan details without cramming everything onto a single page with excessive use of modals.
Dedicated page for new users to sign up: I designed an updated full-screen page for customers visiting the billing section who hadn’t yet signed up. This gave us plenty of real estate to showcase the plans available.
Extensible design: Working closely with engineering, I developed a design that would be extensible to support both self-service and contract customers with different plan types. I provided multiple mock-ups in Figma to show how the page would look for different plan permutations using actual billing data.
Driving traffic to the new page: To entice customers to visit the new page once it was delivered, I authored a blog post that showcased the redesigned billing experience and new features.

Solution mockups:

*New billing summary page for PAYG (pay as you go) customers*

*New billing summary page for contract customers that includes usage bars*

*Expandable rows helped accommodate complex pricing structures like tiered resolution-based pricing in a consistent way*

Value delivered:

Reduced customer support inquiries for frequently-asked billing and usage questions on usage and invoices
Created efficiencies for engineering by designing a flexible, extensible design that easily supported new products and changes to pricing (for example, we recently added tiered pricing and resolution-based pricing) without having to drastically update the designs
Complete set of designs for multiple permutations of the billing page with different plan configurations that continues to serve as a reference
Increased usage of the billing pages over time