Billing Solutions for CSPs

Focused on providing billing and order management software for communication service providers, by helping them streamline billing processes, manage customer accounts, and optimize revenue generation.

Project
Overview

In this project, I played a role in supporting the client's UX Designer, who was relatively new to the field. My responsibilities included providing guidance and assistance with UX/UI tasks such as developing a design system, establishing workflows, and designing pages to ensure user-friendly and accessible designs. Additionally, I helped in delivering assets to developers and answered questions.

Problem Statement

The existing design lacks responsiveness across platforms and significant usability issues like accessibility.

Benefit Hypothesis

By redesigning the current billing solutions to address usability challenges and enhance user experience, we anticipate a reduction in user frustration and an increase in user satisfaction, leading to improved customer retention and loyalty.
Introducing responsiveness across platforms will enable users to access the billing solutions seamlessly on various devices, resulting in greater flexibility and convenience, ultimately enhancing overall productivity and efficiency.
Integrating customizable settings for customers, such as the ability to add their own logo and color for the header, is expected to foster a sense of ownership and personalization, strengthening the brand-customer relationship and potentially attracting new customers through positive word-of-mouth and referrals.

Criteria

Ensure that designs are both intuitive and easy-to-use, while also being inclusive and accessible to users through adherence to accessibility standards and guidelines.

Design Iterations

This project was quite comprehensive with numerous pages. To streamline things, I’m only displaying the key screens.

Account Summary

ACCOUNT SUMMARY

Iteration - 01

Designed a flexbox layout where elements move to subsequent rows when the layout size decreases and their dimensions exceed the available space.

ACCOUNT SUMMARY

Iteration - 02

Combined the usage information for data, minutes, and messages into a single card.

Additionally, enhanced visual interest by presenting the date statistics in a bar format.

ACCOUNT SUMMARY

Iteration - Final

To reduce the page height, we added tabs to the usage card to separate data, minutes, and messages. This minimized visual clutter, making the information easier to scan.

My Bill

MY BILL

Original Screenshot

A screenshot showing the current UI.

MY BILL

Redesign

The invoice number has been added to the bill header, and the year has been included in the date of the bill.

A quick link to view usage has been added under the bill date.

Usage

USAGE

Iteration - 01

The page displays total usage by service number.

Users can search for and click on a service number to see a usage breakdown.

They can also access Usage Details from the Usage page for the billing period or a specific service number.

USAGE

Iteration - Final

Removed the date from the card to avoid redundancy, as it’s already shown in the drop-down.

Added the service name to the service number.

Usage Balances

USAGE BALANCES

Rough Draft

Filters by Bill Period (current or previous) and Type (Data, Minutes, Messages, Other).

Displays for each grant:

Shared Grant Name
Total Used vs. Available with a graphic bar

Less emphasized details:

Associated service number
Start and expiration dates (if different from bill period)
Utilization Details

Users can click to view Service Number usage, including amount used and overage, with a utilization graph. Paging and searching are available, and remaining days are shown if the period is current.