Case Study

Fornal

Fornal is a self-initiated payments dashboard concept for small brands that sell online across countries. We designed eight screens and a design system.

Client:Self-initiated concept

Year:2026

Services:Product design: UX, UI, design system

The Fornal Payouts and Overview screens on a dark ground.

The Brief

A payments dashboard for the person who checks the money first.

No client asked us for Fornal. We started it ourselves and wrote the brief. Small brands that sell online take cards, wallets and pay later, invoice some buyers and get paid out in several currencies. One person in finance watches all of it. We chose her, the finance lead, and gave her three questions for the start of each day: is today normal, where is my money, what needs me. To test the design on real-looking work, we invented a merchant, Tagus Clayworks, a stoneware studio in Lisbon that sells mugs and bowls online and invoices restaurants and shops.

Fornal overview for a sample stoneware studio: four goal meters, daily volume for the month against the month before, payouts, payment methods and live payments on a globe

Core screens, from overview to invoices.

System pages, from colors to motion.

States for each part, from rest to disabled.

Solution

We designed the screens around the three questions, on one design system.

The overview answers all three in order. It shows four totals with goal meters, the daily chart for the month, payouts on the way, the payment mix and a live view. Seven more screens go deeper: payments, one payment, payouts, disputes, one dispute, customers and invoices. One design system sits under all eight. The screens are designed for this case study. All names and numbers are sample data.

Map of the eight Fornal screens around three questions: is today normal, where is my money and what needs me. The overview leads to each group.

01 Is today normal?

Read the overview, then open the list behind it.

After the overview, the finance lead checks two lists. Payments shows the newest payments first, under tabs for succeeded, refunded, disputed and failed ones. Customers lists the buyers who paid, with one buyer's payment history open at the side.

Payments list with tabs for succeeded, refunded, disputed and failed payments; each row shows the customer, method, status, time and amount — Payments, newest first, with method and status

Customers, with one buyer's history open

02 Where is my money?

Follow a payment from the order to the bank.

Payouts shows what was paid out, what is in transit and what is on hold, with the three payout accounts and the held payout on its own card. Payment detail follows one card payment from the order lines, through the timeline, the fee and the net amount, to the payout it lands in. The close-up puts two cards side by side: the fee and payout of a euro payment, and a pound payout held until the account holder is confirmed.

Payouts screen with paid, in transit, on hold and not yet paid out totals, the month's payouts with their status, the three payout accounts and one held payout — Payouts, the accounts and the held payout

One card payment from Berlin: the order lines, delivery, a timeline, the fee, the net amount and the payout it lands in — One payment, from order to payout

Two cards shown large: the fee and payout of one euro payment, and a pound payout on hold until the account holder is confirmed — Fee and payout of one payment, and a held payout

03 What needs me?

Put what needs a reply first, with its deadline.

Disputes lists each dispute with its reason and status, and pulls the three that need a response to the side, with due dates. Open one and the response screen holds the evidence files, the reason and a timeline. Invoices tracks wholesale invoices by due date, with the overdue ones listed first.

Disputes screen with status counts, all disputes with reason and status, and the three that need a response with their due dates — Disputes, with the ones due first

Response to one dispute about a parcel not received: tracking and delivery fields, a note to the bank, four evidence files, the reason and a timeline — One dispute: evidence, reason and timeline

Invoices screen with open, overdue, due and paid totals, open wholesale invoices by due date, the overdue list and the invoices due next — Wholesale invoices by due date, overdue first

04 System

One system behind all eight screens.

The system holds colors, type, icons and parts. Parts are drawn in the states that apply to them: rest, hover, pressed, focus, selected and disabled. The cards also have empty, loading, error and partial versions. Feedback comes as a tooltip, a menu, a dialog, a toast and a banner, and motion is short and quiet. Source Serif 4 sets the name and the page titles. Inter sets the rest. Warm orange carries the brand, and one dark button marks the main action on a screen.