Ascendon Quarterly Billing
The Challenge
CSG Ascendon's clients require the ability to customize their billing cycles, which has led to the need for a redesign of the usage widget on the customer's dashboard. The challenge is to create a clear and concise visual indicator of the customer's remaining service entitlements for a given billing cycle, while taking into consideration the limited space on the dashboard.
The Solution
Update all areas of Ascendon’s customer-relationship management portal that are impacted by usage functionality. The design solution should be considerate of limited space on the customer's dashboard and prioritize the clear visualization of usage and entitlements. The redesign should give a clear visual indicator of the remaining service entitlements for a given billing cycle, and take into account customizable billing cycles, allowing customers to prevent overage charges.
Research Method: SME Interview
After performing the general inquiry, I read the FSD more in-depth and scheduled meetings with internal stakeholders. I targeted the assigned system architect and client solution manager for a more high-level understanding. I outlined my findings below.
Client Context: The customers of some of our B2B and B2B2C clients, are annoyed with how how frequently they receive invoices and the time/costs associated with releasing payments on such a regular basis. The client’s customers would prefer to receive one invoice per quarter but retain the ability to see usage charges in smaller increments so that they are not surprised with surplus usage charges.
System Constraints: For the commercial customers descibed above, it is more likely than not that they will be consuming thousands of service entitlements at a time and will need to be able to track the usage of each. The design will have to accomodate these large quantities without blowing all other page elements out of proportion.
After conversations with the product and client success teams, we determined that client customers would require the following features to be delivered as part of the quarterly billing solution:
CSRs must be retain the ability to view usage and charge details for each billing period, even when the client opts in to quarterly billing.
The CSR must be able to tell at-a-glance time range details, such as how many billing periods will exist per quarter and the date range of each billing period.
There should be a visual indicator of the amount of usage committed against each individual service entitlement.
There should be a visual indicator of the amount of usage committed against each individual service entitlement.
The visual indicator should be responsive to it’s container on both instance that it appears - both the usage widget on the customer dashboard and the usage details page.
For each service entitlement instance, the associated charge and any late-landing usage charges should be displayed.
Working with a Design System: Choosing Components
Visual design elements, such as color palettes and iconography are already codified in Ascendon’s existing design system - which consists almost entirely of text-entry forms, search result pages, and tables. Here are some existing components that I used our reworked for my design.
Wireframes
Taking the base component of the service offering widget, I sketched out how to display a range of billing periods, and the contained service entitlements, within a single quarter. Changes to the usage details page were much lighter and did not require a wireframe.
Cross-Team Review Session
Unfortunately, Ascendon’s release cycle does not allot the time required to perform meaningful user testing and the design team has never been granted access to clients or their users. Instead, we are forced to rely on the approval of internal product and development teams only. I presented my work to both parties, who both expressed happiness at the final result - though, of course, it would be more meaningful to hear from the clients and their users.
Iteration and Conclusion
This feature was self-contained to the present release and isn’t scheduled to have any planned enhancements. The time to completion was roughly two weeks while being worked on alongside eight other features. This was an interesting problem to work on as the goal seemed to provide the clients with what seemed like two conflicting ways of presenting data - attempting to give them the best of both worlds. I think we accomplished this and I was additionally able to practice some visual design in finding ways to organize nested time ranges and alter how we show progress depending on container size.