← Back to all case studies
Energy Payments

Rebuilding trust in energy payments

An end-to-end redesign of Bia's billing and payments experience, making it easier for customers to understand, pay, and stay on top of their energy bills.

68%
Reduction in payment time

Average of 3+ minutes to under 1 minute to complete a bill payment.

-29%
Billing customer service contacts

Clearer bill breakdowns meant fewer confused users reaching out for help.

5K+
Active users

Rolled out across web and native apps within the first quarter after launch.

Project

Overview

Bia is an energy management system serving business customers, helping them monitor consumption, manage their accounts, and pay their energy bills.

As the platform's customer base grew, billing and payments became one of the most-used and most complained-about parts of the product. Customers found it difficult to understand what they were being charged for, and the payment flow itself was slow and fragmented across multiple methods.

As Senior Product Designer, I led the end-to-end redesign of the payments and billing experience, from early research through to a phased rollout across web and native apps.

Problem

The challenge

Billing was consistently the top driver of customer support contacts. Customers didn't understand their bills, struggled to find a payment method that worked for them, and had no easy way to track what they owed over time.

What looked like a simple "pay your bill" flow was actually hiding a lot of complexity: multiple charge types, proration, taxes, and a legacy payments backend that didn't always talk to the app in real time.

The Goal

Make billing and payments simple enough that customers never have to call support to understand what they owe.

Research

Discovery

01

Confusing bill breakdowns

Customers couldn't tell which charges were usage, fees, or adjustments — so every bill looked suspicious.

02

Fragmented payment methods

Card, bank transfer, and cash payments each lived in a different flow, with inconsistent confirmation and receipts.

03

No visibility over time

Customers had no simple way to see past bills, payment history, or upcoming due dates in one place.

Approach

The solution

We redesigned payments and billing as a single, unified flow instead of a collection of disconnected screens. Every bill now shows a clear, plain-language breakdown of charges, and customers can pay with any method in the same place, with consistent confirmations across the board.

Bia payments flow screens
Design

Key design elements

01

Unified payments hub

A single home for everything related to billing: current balance, due date, payment methods, and history.

  • One flow for all payment methods
  • Saved payment methods for one-tap pay
02

Plain-language bill breakdown

Every line item on the bill is labeled and explained in simple terms, with visual cues for anything unusual.

  • Visual breakdown of usage vs. fees
  • Inline explanations for adjustments
03

Proactive notifications

Customers get timely reminders before a bill is due, and confirmation the moment a payment goes through.

  • Due-date and payment reminders
  • Instant payment confirmations
Delivery

Delivery highlights

01

Phased rollout

Launched to a small customer segment first, validated against support-ticket volume, then rolled out to all users.

02

Cross-platform parity

Shipped a consistent experience across web and native iOS/Android, sharing the same design system components.

03

Support team enablement

Worked with the support team to update help docs and macros ahead of launch, anticipating the drop in ticket volume.