Back

2024

Finance

Web app

Optimizing financial oversight and invoice management for Kikin users

Identifying the Problem

During a conversation with one of our most active user, it became clear that tracking upcoming payments for loans was inconvenient for him. He had many payments to manage, but the app either showed the payments for separate loans, or summarized payments for 30 days. Sometimes, he needed to know how much he would have to pay in a specific week. He even mentioned a competitor he uses (a much larger one) that displayed similar data in a graphical format.

What Kikin Does

It's is a B2B supplier invoice payment service tailored for small to mid-sized businesses. There is typically a lag time of 2-4 months between when businesses pay in full for the production of goods to suppliers and when they sell the goods and receive revenue. This delay often results in a drop in cash flow and leaves their balance empty. Invoice financing through Kikin helps these businesses stabilize their cash flow, allowing them to spend more on marketing or other priorities.

Users upload their bills (invoices from suppliers they need to pay), select the date they’d like them to be paid, and choose the number of installments for repayment to Kikin. Kikin pays the supplier in full and then deducts money from the user's account on a monthly basis until the loan is repaid.

Take a look at an overview of my work at Kikin → 

Why is it important to track payments?

To control how much money is leaving your company’s accounts. During interviews, we found that many companies do not keep much money in the account linked to direct debits and transfer funds as needed. Therefore, it is crucial for them to know when a specific amount needs to be available in the account.

How payment tracking system was organized

  • Email reminders
  • A page with a list of invoices, showing how much is left to pay on each invoice and when the payments will be deducted
  • A dashboard showing the total and 30-day due amounts
  • Mini cards on the dashboard with active invoices, including the date and amount of the next payment

Next steps

I decided to investigate further to see if the problem experienced by one client affected other users:

  • Reviewed 130+ user session recordings  to check what were the paths of users who already had active invoices
  • Spoke with users to figure out their personal ways to track payments to build the full picture
  • Collected stats, identified dependency between the number of invoices and user behaviors

Findings

Most users utilized the detailed invoice list to track upcoming payments, and some relied on email notifications. Although the initial hypothesis was that they would use the dashboard primarily, this was not the case. Many users also downloaded a CSV file of upcoming payments. Some did this to share with their team, others as a backup (a more traditional way of tracking finances), and some found the CSV table more convenient than what our interface offered.

These users typically had many invoices, making it challenging to summarize and compare payments. A chronological table was more straightforward for them, but it still showed individual payments, which was not ideal when they needed to see totals for a specific period.

Active invoices mini-cards were underutilized. They were too detailed for simply tracking upcoming payments and were not in chronological order. In a way, they duplicated what could be seen on the Invoices page but lacked the detail to track specifics, so users preferred the full list. So mini cards seemed redundant.

Prioritizing

Despite the average number of invoices per customer being 5.65, only 19% of users had more than 2 active invoices at a time. This meant that 81% of users did not have a problem with payment tracking, making it a less critical issue than initially thought, but still necessary to address, because those 19% were our highest-paying clients.

Designed Solutions

On the dashboard, we decided to remove the ‘Active invoices’ component due to its unclear value for users. Instead, we introduced a component that combined a graph showing totals for each week with separate payments related to individual invoices. When hovering over a week with multiple repayments, users could see the total amount (principal + fee) and a breakdown of this amount by invoice. Clicking on upcoming payments opened a side drawer with a chronological list of all upcoming payments. The graph also allowed users to download the CSV file for accounting purposes.

Before coming up with the version above, I experimented various data presentation options. The main alternatives were:

So the combination of the graph and separate payments won both in team discussions and testing. It addressed both important tasks — displaying a summary for each week and individual payments. The bonus was that the graph was connected to the left panel, so while hovering a graph bar users could see which payments were due each week.