Diletta PayWhite-label banking · with Igor Salomoni5 min read

One bank, twelve brands, the same screen.

The full redesign of a white-label bank, tested in the twelve colors the platform offers

Client: Diletta Pay
Period: 2022
Role: Research and screens, with Igor Salomoni
Scope: App and internet banking

Green · light — The same home screen in four of the twelve palettes. The structure stays put and only the color changes. Four of the twelve failed contrast until I fixed them.

Pink · light — The same home screen in four of the twelve palettes. The structure stays put and only the color changes. Four of the twelve failed contrast until I fixed them.

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

12: brand palettes on the same home screen, in light and dark, with no change to the layout.
4 days: to launch a new brand after the redesign.It used to take three weeks.
4: of the twelve palettes failed contrast.I fixed all four before handover.
15: flow pages drawn, from statement to physical card.

00 File


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

01 Summary

Problem. Diletta Pay sells a ready-made bank to companies that are not banks, and every client ships it under their own brand. The platform offers 12 possible brand colors, plus an example of application. Each color runs in light and dark, so every screen exists in 24 versions. A color that works in one palette breaks contrast in another.

Role and team. I did the research and designed the screens for the app and internet banking. Designer Igor Salomoni built the color variables in Figma, the part that swaps the brand.

The decision. Test the same home screen against all 12 palettes before handover, with the palette treated as input from outside.

Result. In 2022, launching a new brand on Diletta Pay dropped from 3 weeks to 4 days. The test caught 4 of the 12 palettes failing contrast, and I fixed all four.

Status. The redesign went live. The product was already running when it started, in August 2022.

02 Constraint

The product was already in operation. Every step I removed was a step someone used that day.

Personal and business accounts share the same product, and Deposit and Charge follows different rules for each. The app and internet banking could not drift apart either.

And every color counted at once. In a white-label bank you can't pick the color at the end, because it comes from outside and the design has to hold whatever value arrives. The file has its own pages for Cellcoin and for Wind, the internet banking board keeps screenshots from Bold, and the company site shows BF Pay and Discovery.

Authorship was split, and the split is technical. Igor handled the variables and I handled research and screens. The 24 versions of the home screen are where both pieces of work meet: his variables running on top of my drawing.

Pix onboarding · 2 — FlowGetting into Pix, Brazil's instant payments, takes three explanation screens before the first key. Here are the second, the third and the key list that comes next. Someone using the bank of a company that isn't a bank arrives without knowing what a key is.

Pix onboarding · 3 — FlowGetting into Pix, Brazil's instant payments, takes three explanation screens before the first key. Here are the second, the third and the key list that comes next. Someone using the bank of a company that isn't a bank arrives without knowing what a key is.

03 Exploration

Internet banking: map before proposal

The board opens with the flow that was live, in full. The redesign comes after.

At the top, a legend of our own defines the pieces of the map: the screen name, the name with a description, the action, and a marker for steps the user already knows. Whoever opens the board later learns the legend once.

The start of the current map1500×1130The start of the map of the internet banking that was live, on the FigJam board. Each box is a screen, with what it does in bullets. The pink circle next to Validation Error is the marker for a step the user already knows.

Below sit four maps at the same scale, aligned on the same axis: current internet banking, redesign v1, and Deposit and Charge for business and for personal accounts. You can compare them by looking, with no before-and-after slide. The board also holds the credit card flow, a journey map and the scope.

App: one home screen, twelve palettes in two modes

The first screen of the home, before and after the redesign. Before, it opened with a notification carousel and only showed the balance after two other blocks. The actions were round icons in a sideways scroll that fit three. In the redesign the balance comes first, the actions become a fixed grid with "see all" beside it, and the brand sits in a band at the top, the only place it needs to be.

After — The first screen of the home, before and after the redesign. Before, it opened with a notification carousel and only showed the balance after two other blocks. The actions were round icons in a sideways scroll that fit three. In the redesign the balance comes first, the actions become a fixed grid with "see all" beside it, and the brand sits in a band at the top, the only place it needs to be.

The test area in Figma holds 2,506 elements and resolves the same home screen in the twelve palettes, each in light and dark. Structure and layout stay the same and only color changes. Each version answers a question. Does the hierarchy hold with a dark primary color? Is the balance card still legible in burgundy? Does the badge vanish against green?

The 24 versions of the home screen1800×1021All 24 versions side by side, dark on top and light below. This grid is where I looked for the point where the design gives way.

Transfer · the four rails — Flow4 screens, scroll →Transfer, from the menu to the receipt. Pix, QR code, wire and contact list sit on one screen, because the end customer arrives without knowing which of the four solves their problem.

Transfer · the amount — Flow4 screens, scroll →Transfer, from the menu to the receipt. Pix, QR code, wire and contact list sit on one screen, because the end customer arrives without knowing which of the four solves their problem.

Card · closed statement786×1704The brand color shows up in the button, the badge and the limit bar. Swapping the palette moves all three together, so the test has to look at the whole screen.

04 Decisions

D1 · Map the current flow before proposing the new one

The map of what was live came first, in the same notation and at the same scale as the proposal.

Why: with the product in operation, simplifying without a map of the current state means guessing which habit to break.

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

D2 · Mark the steps the user already knows

I applied the marker step by step across the current flow.

Why: changing a familiar step makes the user relearn it. Changing a new step costs nobody anything. With the marker on the map, the talk about what to cut turned to that cost, and stopped depending on the taste of whoever was in the room.

D3 · Lock the legend before mapping

The legend had four pieces, defined before the first flow.

Why: a board with no legend forces every reader to invent one. With the legend fixed, whoever opens the file six months later reads it alone.

D4 · Personal and business in separate maps

Deposit and Charge appears twice on the board, once per account type, instead of one flow with a variant.

Why: the rules really diverge. A single flow with conditionals hides where they split, and that is right where the product tends to get it wrong.

What I gave up: a smaller board.

D5 · Test the home screen against every palette before handover

The 24 versions of the same home screen work as a load test. Dark primary, balance in burgundy, badge on green: each combination looks for the point where the design gives.

Why: the product's commercial promise is to reproduce the client's identity. So color enters the system from the start. A home screen that only works in the palette it was born in can't be sold.

05 Result

Launching a new brand on Diletta Pay went from three weeks to four days. The home screen stopped being one file per client and became a single structure, with color coming in as a variable.
The sweep across the twelve palettes in light and dark caught four that failed contrast. I fixed all four before handover, and the redesign went live.
The twelve palettes run on the same screen anatomy, in both modes.
The board became the shared reference for the app and internet banking.
I drew fifteen flow pages, from statements to the physical card, plus the admin panel.

06 What I would do differently

I marked the familiar steps by judgment. The product was live and had analytics, and I never asked for the funnel before deciding what the user recognized. The marker behind D2 is my reading. Today I would ask for the number first.

I also never wrote down the contrast criterion. The sweep was by eye. With a written threshold, someone else could redo the review and reach the same answer.

And I solved the 24 versions by hand. With the tools I had, that was right, but every new brand still needed a screen-by-screen check in Figma. Four years later, in the Diletta design system, the same problem is solved by declaring 55 colors, without touching a component, and a report shows what the product inherited without noticing. If I went back, I would start at that layer.

Next case

Directo · Local Ads