top of page

Platform  Web App

Service  Customer Care & Billing

Tool  Adobe Xd

BILLINGCX - INVENTORY TABLES

Disclaimer: All the names and screenshots have been modified to comply with my non-disclosure agreement. This case study reflects my own opinions, not necessarily the view of the company.

OVERVIEW

BillingCX is a complex and cloud-based billing software for corporations in the Energy Industry. It offers the capability of extensive customer management, seamless billing automation and real-time market transactions. Due to its business nature, the system needs to handle a tremendous amount of data streaming in and out everyday, so do the users using it.

THE PROJECT

As a product designer, I was involved in enhancing the Inventory data table which stores information of the customer and the contract. By enhancement, it means more details are required to be added in the table for users to understand customers better.

 

More details are not necessarily more columns which can affect the performance as well as user’s readability, therefore, the team needs to come up with a more flexible and creative resolution.

Account Inventories
ORIGINAL STATE

The Inventory table can be accessed via the Customer account screen and displayed in a pop-up modal. It presents a maximum number of 5 active products.

Original state of Account Inventories
THE PREP

MEETINGS AND PREPARATION

As a product designer, I was involved in enhancing the Inventory data table which stores information of the customer and the contract. By enhancement, it means more details are required to be added in the table for users to understand customers better.

 

More details are not necessarily more columns which can affect the performance as well as user’s readability, therefore, the team needs to come up with a more flexible and creative resolution.

Online meeting

The meeting helps us determine the right list of attributes in the data table, and both sizes are on the same page about what to be expected.

Meeting minute

WORK BREAKDOWN

After all the information was gathered, an epic statement is formed and it is broken into 3 tasks.

 

Then, the team works on the information hierarchy to make sure users can see what they need to see first.

 

  1. Inventory Number

    1. Product Details

      1. Rate Details

    2. Offer Details

Work breakdown
THE WORK

ADD THE PRODUCT & OFFER DETAILS

Option 1:

 

The Inventory number is treated as an independent attribute and below it, there is a table with complex headers to present Product and Offer.

Option 2:

 

The inventory is an accordion and expanding it can reveal the product and offer. The product is also an accordion nesting the rate details. 

The client chose the Option 2 moving forward as it looks much more neat and organized. 

Inventories table popup
Inventories table popup

ADD THE DATEPICKER FOR DATA RETRIEVAL

A new date picker was added to the pop-up modal for users to retrieve data in a selected time range. When the pop-up first opens, 5 latest inventories are shown by default and users can choose to view previous inventories by using the date picker. 

I also need to prepare the design for error scenarios:

 

  1. The date range is restricted to 30 days.

  2. If the date range falls within 30 days, there is no inventories linked to the customer.

  3. If the date range falls within 30 days, there is no account created for the customer.

Error scenario for Account Inventories

Even though the amount of information remains almost the same in the limited frame of the pop-up, the hierarchy can help re-organize the information in a neat and effective layout. A clear hierarchy can be achieved by active communication with clients / end users, with the development team; and a high flexibility is also highly recommended when there are rejections, design revisions and unexpected use cases. Next time, there should be no data tables that are too small.

Before and After
THE TAKEAWAY
bottom of page