Personas
Employees
AP processor
AP Processor is responsible for managing the organization's payments to suppliers, ensuring accurate and timely processing of invoices, payments, and reconciliations.
The role includes verifying financial records, communicating with suppliers, and ensuring compliance with internal policies and regulations. Additionally, the AP Processor collaborates with accountants and external auditors to support financial controls and reporting.
Key challenges include meeting strict deadlines and maintaining a high level of accuracy to prevent critical errors.
AP Controller
AP approver
AP Approver is responsible for reviewing and authorizing payments before they are processed, ensuring company policies and financial guidelines. This role is critical in preventing unauthorized transactions, identifying discrepancies, and maintaining financial integrity.
The role involves evaluating payment details, verifying approvals, and making decisions on whether to approve, reject, or escalate payments for further review. AP Approvers frequently interact with internal stakeholders to ensure payments align with budget constraints and contractual obligations.
Key challenges include balancing efficiency with risk mitigation, meeting approval deadlines to prevent payment delays, and handling high volumes of transactions while maintaining accuracy and making sure that they are compliant.
CFO/CEO
Background
We received a request from several clients to add an indication of how many payments have been paid within the batch.
Pain Points Identified
- Display amount - Payment groups display amounts that do not include canceled or rejected invoices, making it impossible toview specific amounts.
- Filter - When applying a filter, such as 'Paid' status, isn't being updated. The filter only displays the payments that have been marked as paid within the group, while the total remains unchanged.I’ve recognized this behavior as problematic and confusing for the users.
Assessment and Analysis
I started by evaluating the placement of the indication within the batch.
Easy to scan and compare across batches.
Requires a separate column, which takes up space and significantly reduces visible information on lower resolutions.
lacing the count information on the left aligns with the
natural reading flow and supports a clear visual hierarchy.
Its proximity to the total payment count header
creates confusion.
I analyzed the data and found that 14% of users are
with low resolution screens, so I placed the indication on the left.It was important to me that the indication show the ratio of paid payments to total payments, therefore I examined several ways to present the paid payments.
Option 1
Option2
Final design
Pending my approval tab
I added an indicator for total payments to maintain consistency.
All payments tab
The AP processor needs to quickly review the statuses of the payments. To support this, I added a tooltip that allows them to scan and view the statuses of all payments within the batch without any clicks.
Highlighting behavioral change with micro animation
To help users understand that batch values are updated based on status filters, I added a 3-step skeleton animation:
