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.
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.
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.
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.
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.
-
Inventory Number
-
Product Details
-
Rate Details
-
-
Offer Details
-
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.
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:
-
The date range is restricted to 30 days.
-
If the date range falls within 30 days, there is no inventories linked to the customer.
-
If the date range falls within 30 days, there is no account created for the customer.
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.
