Web ·
Klaring ·
2025
Payouts
When will I get paid, and why is it this amount? A payouts page that answers both.
Company
Klaring
Role
Lead product designer
Team
A product manager, five engineers, a part-time researcher, and the support lead
Year
2025
Duration
Seven months
Platform
Web
Context
Klaring handles payments for online marketplaces. When someone buys a lamp on a marketplace, the money comes to us first, and a few days later we pay the person who sold the lamp. Sellers track all of this in the merchant dashboard.
For years the Payouts page was a list of bank transfers: date, amount, status. It answered one question: whether a transfer had been sent. Sellers had two others. When will the next payout arrive? And why is it smaller than what I sold? Refunds, fees, and chargebacks came off the balance, reserves were held back and released later, and the page only showed the net amount that went out.
The answers existed, in a CSV export most sellers never opened. So they asked support instead, every day.
My role
I led the design from the first interviews to launch. I worked with our researcher on the interviews, designed the flows and screens, and wrote most of the interface copy with the support lead. I also spent a lot of time with the payments engineers, because a screen that shows a total has to agree with the ledger that produces it.
Approach
We started with the support inbox instead of the old page. The support lead and I read three months of payout questions and sorted them by what the seller was trying to find out. Most of them came down to the same two questions.
Then we watched sellers do their bookkeeping: a ceramicist with one shop, a furniture reseller with three employees, a bike shop selling on four marketplaces. Small sellers opened the dashboard on the day they expected money and wanted a date they could plan around. Larger sellers matched every payout against their own books and needed every line to point to an order, a fee, or a hold they could match.
We prototyped three directions and put them in front of sellers. A calendar was easy to read but hid the math. A running balance, like a bank statement, showed everything, and nobody could find anything in it. The third treated each payout like a receipt, broken into the lines that made it up. That one won. We put a timeline on top so the next payout date was obvious.
Solution
The new page has two parts.
At the top is a timeline of payouts: scheduled, on its way, and paid, each with a date. Money on hold sits on the same line and says why it’s held, with a release date when the hold has one. A seller can see the next payout before it happens instead of finding out after.
Below the timeline, every payout opens into a breakdown that reads top to bottom like a receipt. It starts with sales, then subtracts refunds, fees, chargebacks, and reserves. Each refund and chargeback links back to the order it came from. The last line is the amount sent to the bank, with the payout reference the seller will see on their statement. Amounts use tabular figures and line up on the decimal point, so a column can be checked at a glance.
The hardest case was a week with more refunds than sales. The old page showed a red minus sign and nothing else. The new one shows the refunds and chargebacks that put the balance below zero, and says the shortfall will come out of later payouts.
We also changed the words. “Settled,” “captured,” and “disbursed” were our words, not the sellers’. The page now says “scheduled,” “on its way,” “paid,” and “on hold,” and each term has a short explanation one click away. Before launch we gave support the new terms, so their saved replies matched the page.
Notifications got the same treatment. Instead of an email for every transfer, sellers get one when a payout is on its way and another if something goes on hold. The export stayed, but now it matches the screen column for column, so an accountant can check one against the other.
Payouts: the timeline on top, one payout opened below.
The timeline of scheduled, on its way, and paid, with a date for each.
Money on hold, with the reason it's held.
Result
The new page went live for all sellers in March 2025. The “why is it this amount” question mostly stopped reaching support. What still comes in is about specific orders, and support answers those from the same screen the seller is looking at. A few of the larger marketplaces asked for the breakdown in the API, which became my next project.
What I learned
Start in the support queue. Several of the labels we shipped were phrases sellers had written in their tickets.
I also spent more time with payments engineers than with other designers that year, and the design is better for it. A screen that shows money is only as right as the ledger behind it.