White-label banking · with Igor Salomoni7 min read

Diletta Pay

The full redesign of a bank sold to twelve companies, each under its own brand

12: brands run the same home screen, each with the client’s own visual identity, in light and dark.
4 days: to launch a new brand after the redesign. It used to take three weeks.
4: of the twelve palettes failed contrast, and were fixed before handover.
15: flow pages drawn, from statement to physical card.

Diletta Pay, the company's own product. With designer Igor Salomoni, from August 2022.

The same home screen across the twelve brands · light and darkThe same home screen across twelve palettes, light and dark. Twenty-four renders of one structure, in one file at one scale, because a color picked by taste breaks contrast in four brands without telling anyone.

00 File


Product	Diletta Pay Suite · white-label banking, sold to other companies
Surfaces	iOS and Android app · internet banking · admin panel
Role	the full redesign of the product, in the app and in internet banking · Igor Salomoni on the variables
Period	from August 2022
Platform	iOS, Android and web
Tools	Figma, FigJam
Material	an internet banking flow board, built in FigJam · a 19-page redesign file
Scope	redesign of the app and of internet banking, across 15 flow pages
Brands in the file	Cellcoin, Wind, Bold · the company site also shows BF Pay and Discovery

One line. When the same app is sold under each client's brand, a screen is not a screen: it is twenty-four, because the twelve brands exist in light and in dark. The redesign had to survive all twenty-four without losing hierarchy, contrast, or any single brand's identity.

01 Summary

Problem. Diletta Pay sells a bank, ready to run. The client launches their operation without going through central bank approval, because the financial institution comes bundled, and the commercial promise written on the site is to reproduce the client's visual identity. Which means brand variation is not the product's finish, it is the product. Every design decision has to hold for every brand at once, and a color picked by taste breaks contrast in four brands without telling anyone.

What we did. On internet banking, map before proposal: the current flow, the v1 redesign, and the Deposit and Charge flows for business and personal accounts, all four in the same notation and aligned on the same axis for direct comparison. On the app, the single home screen was tested against twelve palettes, each in light and dark, in the same file at the same scale. Twenty-four renders of the same structure.

Result. The redesign held the twelve brands in both modes without drifting, and launching a new brand went from three weeks down to four days.

Role. Research and screen design. Igor Salomoni worked on structuring the variables, that is, on the layer that makes the brand swap work. The split is clean and worth stating: he built the variation mechanism, I built what had to survive it.

02 Constraint

A product in operation. Not greenfield. Every step removed is a step someone uses today.

Business and personal in the same product. The same Deposit and Charge flow has two versions with different rules. The board keeps them separate on purpose.

Two surfaces, one system. The app and internet banking cannot drift apart.

Every brand at once. White-label doesn't let you decide color at the end. The palette is an input to the system, and the design has to withstand any value that comes in. The brands have names: the file has its own page for Onboarding · Cellcoin and for Wind · Redesign, the internet banking board has a Prints · BOLD section, and the company site shows BF Pay and Discovery.

Shared authorship, and the split is technical. Igor on the variables, me on research and screens. The twenty-four renders are where the two pieces of work meet: his mechanism applied to my drawing.

Pix onboarding · 1 — FlowEntering instant payments, three explanation steps before the first key. The product sells a ready-made bank to companies that are not banks, so the end customer arrives without knowing what a key is.

Pix onboarding · 2 — FlowEntering instant payments, three explanation steps before the first key. The product sells a ready-made bank to companies that are not banks, so the end customer arrives without knowing what a key is.

03 Exploration

Internet banking: map before proposal

The board does not open with the redesign. It opens with the current flow, in full.

A notation kit of our own. A Components section at the top defines the map's vocabulary: Flow Mapping / Name Only, Flow Mapping / Name and Description, Flow Mapping / Action, and a state marker, State / Familiar. Whoever reads the board later doesn't learn the legend twice.

Four territories at the same scale, side by side. Internet Banking CURRENT, Redesign V1, Deposit and Charge for business, and the same flow for personal. Aligned on the same vertical axis, same notation. The comparison is immediate, with no before-and-after slide. Plus the credit card flow, the journey map and the scope.

A familiarity marker. The State / Familiar marker says which steps the user already recognizes. That is what turns the map into an argument: changing a familiar step costs more than changing a new one, and the board shows where both are.

App: one home screen, twelve brands in two modes

The home screen before the redesign786×1704The starting point, and what the redesign moved. The old home opened with a notification carousel and only showed the balance after two other blocks; the actions were round icons in a horizontal scroll where only three fit on screen. In the redesign the balance comes first, the actions become a fixed grid with a "see all" beside it, and the brand

The test area holds 2,506 elements and resolves the same home screen across twelve palettes, each in light and dark. Same structure, same layout, color per brand. Alongside it, form and authentication screens, and a long scroll of the home.

Because the product ships under each client's brand, these versions are the redesign's load test. Each render is a question. Does the hierarchy hold with a dark primary? Is the balance card still legible in burgundy? Does the badge disappear against green?

Transfer · the four rails — FlowTransfer, from the menu to the receipt. The four rails, Pix, QR code, wire and contact list, sit on one screen because the end customer is not a bank customer: they arrive without knowing which one solves their problem.

Transfer · the amount — FlowTransfer, from the menu to the receipt. The four rails, Pix, QR code, wire and contact list, sit on one screen because the end customer is not a bank customer: they arrive without knowing which one solves their problem.

Card · closed statement786×1704The brand color shows up in three places at once, the button, the badge and the limit bar, and swapping the palette moves all three together. That is why the test is the whole screen, not the button.

The line that connects this case to the next. Here brand variation is solved by hand, palette by palette, in Figma, and the guarantee is the eye. Four years later, in the Diletta design system, the same problem is solved by type: the child product declares 55 colors, not one component changes, and a report shows what it inherited without noticing. It is the same problem twice, and the second time was at the root.

04 Decisions

D1 · Map the current flow before proposing the new one

The board doesn't open with the redesign, it opens with the flow that is live, in full, in the same notation and at the same scale as the proposal.

Why: in a product in operation, every step removed is a step someone uses today. Without a map of the current state, "simplify" means guessing which habit to break.

What I gave up: speed. Mapping the current flow cost days before the first new screen existed.

D2 · Mark which steps the user already recognizes

The notation kit has a state marker, State / Familiar, applied step by step across the current flow.

Why: changing a familiar step costs more than changing a new one, and the cost isn't design, it's the user relearning. With the marker, the conversation about what to cut stops being about taste and starts being about price.

D3 · Define the notation before mapping

A Components section at the top of the board declares the vocabulary: name, name with description, action, and the state marker. Four pieces, defined before the first flow.

Why: a board with no declared legend forces every reader to invent one. With four fixed pieces, whoever opens the file six months later reads it without an interpreter.

D4 · Business and personal mapped separately, not as one flow with a variant

The same Deposit and Charge appears twice on the board, once for personal accounts and once for business.

Why: the rules genuinely diverge. A single flow with conditionals hides where the divergence lives, and that is exactly where the product gets it wrong.

What I gave up: a smaller board.

D5 · The palette is an input, so the design is tested against every brand before handover

The twenty-four versions of the same home screen, twelve brands in light and dark, are not a style study. They are the load test: does the hierarchy hold with a dark primary, is the balance card still legible in burgundy, does the badge survive against green.

Why: the product's commercial promise is to reproduce the client's identity. Which means color is an input to the system, and an input gets declared up front. A design that only works in the palette it was drawn in is not deliverable in a white-label product.

05 Result

The redesign held the twelve brands in both modes without diverging in structure: same anatomy, color per brand, light and dark.
The board became the shared reference for both surfaces, with the current flow, the redesign, and Deposit and Charge for personal and business in one notation.
Fifteen flow pages drawn, from statements to physical cards, plus the admin panel.

What the redesign changed in the cost of selling. Launching a new brand went from three weeks to four days, because the home screen stopped being one file per client and became one structure with color entering as a variable. And the sweep across twelve palettes in light and dark caught four combinations that failed contrast, all fixed before handover. In a product whose commercial promise is to reproduce the client's identity, those two numbers are the product.

06 What I would do differently

I marked familiarity by judgment, not by data. The product was live, analytics existed, and I never asked for the funnel before deciding which steps the user recognized. The marker that holds up decision D2 is my reading, not the log's. Today I would ask for the number before painting the marker.

I never wrote down the contrast criterion. I judged by eye which of the twenty-four versions held up. With a written threshold, the review would be reproducible by someone else, and the answer would stop depending on who is looking.

Solving the twenty-four versions by hand was the right answer with the tools I had, and it doesn't scale. Every new brand was a new Figma file. Four years later, in the Diletta design system, the same problem is solved by declaring 55 colors, without touching a component. If I went back, I would start at the root instead of the surface.

Next case

Directo · TicTac