Billing

Roles: UX designer, UX researcher & UI designer

Figma file

Setting the scene

Ascenda, as a loyalty SaaS provider, identified a significant operational inefficiency within their finance department. The team was expending considerable resources manually emailing clients with balance reminders, a process necessary to maintain service continuity but highly time-intensive. Recognising this pain point, Ascenda sought to leverage their existing self-service platform to create a more streamlined experience for both internal stakeholders and clients.

Ascenda operates on 2 financial frameworks for client billing: Pay on Issuance (POI) and Pay on Redemption (POR). To facilitate these models, Ascenda has implemented a balance system within the Admin Panel where clients maintain funds. This balance serves as the source from which Ascenda deducts appropriate fees whenever customers utilise reward services. The system ensures seamless financial operations while maintaining transparent transaction records between Ascenda and its clients.

🎯 Objective

The objective was to empower clients with real-time visibility into their account balances and enable them to independently initiate top-ups when necessary. With the billing feature, "Ascenda would be able to enhance operational efficiency while simultaneously improving the client experience through greater transparency and autonomy."

Step #1:
Market research

After understanding the objective of this billing feature, I started with market research to inform our design approach. I conducted an analysis of subscription-based products that our team actively uses, including Maze, Figma, Miro, and similar platforms, to benchmark current market practices and user experience patterns.

Given Ascenda's wallet-based payment model, I expanded my research to examine dedicated wallet products in the market. This dual approach allowed me to identify innovative concepts that could be adapted to our specific context while maintaining familiarity for users accustomed to standard SaaS billing interfaces.

Through this research process, we identified 3 key functionalities required for the billing feature:

1. Balance Management

A clear, intuitive way for clients to view their current balance and initiate top-ups when necessary

2. Financial Reporting

Capabilities for downloading detailed financial reports to support client audit requirements and financial reconciliation

3. Transaction History

A comprehensive log of all transactions to facilitate troubleshooting and provide clarity on account activity

These core requirements established the foundation for our subsequent design process, ensuring we addressed both Ascenda's operational needs and client expectations.

Step #2:
Wireframing

After gathering the insights, started on the first version of the billing feature.

Balance Management

The "Your Balance" widget prominently displayed the client's current available funds within their Admin Panel account. This widget incorporated the crucial top-up functionality, enabling users to replenish their account balance through a streamlined process whenever necessary, thus ensuring service continuity without manual intervention from Ascenda's finance team.

Financial Reporting

The "Financial Reports" section directly beside provided immediate access to the 3 most recent billing statements and invoices. Each document was accompanied by a download button, allowing users to quickly retrieve financial records for internal processing or review. Furthermore, users were also able to view billing statements and invoices across the years via the "View all" button. This implementation eliminated the need for clients to navigate through complex menu structures when accessing essential financial documentation.

Transaction History

Lastly, a comprehensive transactions table displayed real-time redemption or issuance events, enabling detailed account audits and complete transparency. Additional functionalities included linking records to customers for cross-referencing redemption history. The chronological presentation supported effective financial reconciliation and independent issue resolution without requiring Ascenda's support team assistance.

Step #3:
Insights gathering

After completing the initial design version, I conducted targeted feedback sessions with finance experts and developers within our team to identify potential improvements to the billing feature design.

During these consultations, we identified 2 key usability issues:

1. Financial report download functionality

Our original design closed the side drawer automatically after downloads. However, finance experts revealed that users access the Billing feature with specific objectives - often needing to retrieve multiple financial reports across different periods for comprehensive reporting. This insight showed our automatic drawer-closing would create unnecessary friction, forcing users to repeatedly reopen the drawer. The finance team's expertise highlighted the importance of maintaining contextual continuity during tasks.

2. Time required to download multiple financial reports

Our development team highlighted a technical consideration we had overlooked—the potential time required to generate and download multiple financial files. They advised incorporating a loading state to provide users with visual feedback on download progress, thereby reducing uncertainty and enhancing the perceived responsiveness of the system.

✨ Final solution

Therefore with the insights we gathered, we came up with the current launched product.

To address this pain point of the side drawer automatically closing after download, I implemented a targeted modification that maintains the side drawer's open state following download actions. While this approach does create a deliberate deviation from the standard behaviour established elsewhere in the admin panel, the decision was made with clear purpose—prioritising user efficiency over strict interface consistency. This strategic adjustment transforms the closing of the side drawer into an intentional user decision rather than a system-imposed action. By allowing users to maintain their contextual workspace until they explicitly choose to close it, the solution significantly reduces friction during download-intensive tasks, enabling a more streamlined and efficient workflow that better aligns with actual user needs.