Diletta PayBanco white label · com Igor Salomonileitura de 6 min

Um banco, doze marcas, a mesma tela.

O redesenho completo de um banco white label, testado nas doze cores que a plataforma oferece

Cliente: Diletta Pay
Período: 2022
Papel: Pesquisa e telas, com Igor Salomoni
Escopo: App e internet banking

Verde · claro — A mesma home em quatro das doze paletas. A estrutura não muda, só a cor. Quatro das doze reprovavam contraste até eu corrigir.

Rosa · claro — A mesma home em quatro das doze paletas. A estrutura não muda, só a cor. Quatro das doze reprovavam contraste até eu corrigir.

Diletta Pay, produto da própria casa. Com o designer Igor Salomoni, a partir de agosto de 2022.

12: paletas de marca na mesma home, em claro e escuro, sem mudar a estrutura da tela.
4 dias: para subir uma marca nova depois do redesenho.Antes eram três semanas.
4: das doze paletas reprovavam contraste.Eu corrigi as quatro antes da entrega.
15: páginas de fluxo desenhadas, de extrato a cartão físico.

00 Arquivo


Produto	Diletta Pay Suite · banco white label, vendido para outras empresas
Superfícies	app iOS e Android · internet banking · painel administrativo
Papel	Product Designer · pesquisa e desenho das telas do redesenho · Igor Salomoni nas variáveis de cor
Escopo	app e internet banking, em 15 páginas de fluxo
Período	a partir de agosto de 2022
Ferramentas	Figma, FigJam
Material	arquivo de redesenho no Figma, com 19 páginas · quadro de fluxo do internet banking, no FigJam
Marcas no arquivo	Cellcoin, Wind, Bold · o site da casa cita BF Pay e Discovery

01 Resumo

Problema. A Diletta Pay vende banco pronto para empresas que não são banco, e cada cliente sai com a própria marca. A plataforma oferece 12 cores de marca possíveis, mais um exemplo de aplicação. Cada cor roda em claro e escuro, então toda tela existe em 24 versões. A cor que funciona numa paleta quebra o contraste em outra.

Papel e time. Fiz a pesquisa e desenhei as telas do app e do internet banking. O designer Igor Salomoni montou as variáveis de cor no Figma, a parte que troca a marca.

A decisão. Testar a mesma home contra as 12 paletas antes de entregar, com a paleta tratada como dado que chega de fora.

Resultado. Em 2022, subir uma marca nova na Diletta Pay caiu de 3 semanas para 4 dias. O teste pegou 4 das 12 paletas reprovando contraste, e eu corrigi as quatro.

Estado. O redesenho foi ao ar. O produto já rodava quando ele começou, em agosto de 2022.

02 Restrição

O produto já estava em operação. Cada passo que eu tirasse era um passo que alguém usava naquele dia.

Pessoa física e pessoa jurídica dividem o mesmo produto, e Depositar e Cobrar tem regras diferentes para cada uma. App e internet banking também não podiam divergir.

E todas as cores valiam ao mesmo tempo. Num banco white label não dá para escolher a cor no fim, porque ela chega de fora e o desenho tem que aguentar qualquer valor. O arquivo tem página própria para a Cellcoin e para a Wind, o quadro do internet banking guarda prints da Bold, e o site da casa mostra BF Pay e Discovery.

A autoria é dividida, e a divisão é técnica. O Igor cuidou das variáveis e eu da pesquisa e das telas. As 24 versões da home são onde os dois trabalhos se encontram: as variáveis dele rodando em cima do meu desenho.

Onboarding do Pix · 2 — FluxoA entrada no Pix tem três telas de explicação antes da primeira chave. Aqui estão a segunda, a terceira e a lista de chaves que vem depois. Quem usa o banco de uma empresa que não é banco chega sem saber o que é uma chave.

Onboarding do Pix · 3 — FluxoA entrada no Pix tem três telas de explicação antes da primeira chave. Aqui estão a segunda, a terceira e a lista de chaves que vem depois. Quem usa o banco de uma empresa que não é banco chega sem saber o que é uma chave.

03 Exploração

Internet banking: mapa antes de proposta

O quadro abre pelo fluxo que estava no ar, inteiro. O redesenho vem depois.

No topo, uma legenda própria define as peças do mapa: o nome da tela, o nome com descrição, a ação e um marcador para passo que o usuário já conhece. Quem abre o quadro depois aprende a legenda uma vez só.

O começo do mapa atual1500×1130O começo do mapa do internet banking que estava no ar, no quadro do FigJam. Cada caixa é uma tela, com o que ela faz em tópicos. O círculo rosa ao lado de Validation Error é o marcador de passo que o usuário já conhece.

Embaixo ficam quatro mapas na mesma escala, alinhados no mesmo eixo: o internet banking atual, o redesenho v1, e Depositar e Cobrar para pessoa jurídica e para pessoa física. Dá para comparar olhando, sem slide de antes e depois. O quadro ainda tem o fluxo de cartão de crédito, um mapa de jornada e o escopo.

App: uma home, doze paletas em dois modos

A primeira tela da home, antes e depois do redesenho. Antes ela abria com um carrossel de notificações e só mostrava o saldo depois de dois blocos. As ações eram ícones redondos numa rolagem lateral onde cabiam três. No redesenho o saldo vem primeiro, as ações viram uma grade fixa com "ver tudo" ao lado, e a marca fica numa faixa no topo, que é o único lugar onde ela precisa estar.

Depois — A primeira tela da home, antes e depois do redesenho. Antes ela abria com um carrossel de notificações e só mostrava o saldo depois de dois blocos. As ações eram ícones redondos numa rolagem lateral onde cabiam três. No redesenho o saldo vem primeiro, as ações viram uma grade fixa com "ver tudo" ao lado, e a marca fica numa faixa no topo, que é o único lugar onde ela precisa estar.

A área de testes no Figma tem 2.506 elementos e resolve a mesma home nas doze paletas, cada uma em claro e escuro. Estrutura e layout ficam iguais, só a cor muda. Cada versão responde uma pergunta. A hierarquia aguenta uma cor primária escura? O card de saldo continua legível em vinho? O selo some no verde?

As 24 versões da home1800×1021As 24 versões lado a lado, escuro em cima e claro embaixo. É nessa grade que eu procurava onde o desenho cede.

Transferir · as quatro vias — Fluxo4 telas, role →Transferir, do menu ao comprovante. Pix, QR code, TED e lista de contatos ficam na mesma tela, porque o cliente final chega sem saber qual das quatro resolve o problema dele.

Transferir · o valor — Fluxo4 telas, role →Transferir, do menu ao comprovante. Pix, QR code, TED e lista de contatos ficam na mesma tela, porque o cliente final chega sem saber qual das quatro resolve o problema dele.

Cartão · fatura fechada786×1704A cor da marca aparece no botão, no selo e na barra de limite. Trocar a paleta mexe nos três juntos, então o teste precisa olhar a tela inteira.

04 Decisões

D1 · Mapear o fluxo atual antes de propor o novo

O mapa do que estava no ar veio primeiro, na mesma notação e na mesma escala da proposta.

Por quê: com o produto em operação, simplificar sem o mapa do atual é chutar qual hábito quebrar.

Abri mão de: velocidade. Mapear o atual custou dias antes da primeira tela nova.

D2 · Marcar os passos que o usuário já conhece

Apliquei o marcador passo a passo no fluxo atual.

Por quê: mexer num passo conhecido obriga o usuário a reaprender. Mexer num passo novo não obriga ninguém. Com o marcador no mapa, a conversa sobre o que cortar passou a ser sobre esse custo, e parou de depender do gosto de quem estava na sala.

D3 · Fechar a legenda antes de mapear

A legenda tinha quatro peças, definidas antes do primeiro fluxo.

Por quê: quadro sem legenda obriga cada leitor a inventar a dele. Com a legenda fixa, quem abrir o arquivo seis meses depois lê sozinho.

D4 · Pessoa física e jurídica em mapas separados

Depositar e Cobrar aparece duas vezes no quadro, uma para cada tipo de conta, em vez de um fluxo só com variação.

Por quê: as regras divergem de verdade. Um fluxo único com condicional esconde onde elas se separam, e é bem ali que o produto costuma errar.

Abri mão de: um quadro menor.

D5 · Testar a home contra todas as paletas antes de entregar

As 24 versões da mesma home funcionam como teste de carga. Primária escura, saldo em vinho, selo sobre verde: cada combinação procura o ponto onde o desenho cede.

Por quê: a promessa comercial do produto é reproduzir a identidade do cliente. Então a cor entra no sistema desde o começo. Uma home que só funciona na paleta em que nasceu não dá para vender.

05 Resultado

Subir uma marca nova na Diletta Pay passou de três semanas para quatro dias. A home deixou de ser um arquivo por cliente e virou uma estrutura só, com a cor entrando por variável.
A varredura das doze paletas em claro e escuro pegou quatro que reprovavam contraste. Eu corrigi as quatro antes da entrega, e o redesenho foi ao ar.
As doze paletas rodam na mesma anatomia de tela, nos dois modos.
O quadro virou a referência comum do app e do internet banking.
Desenhei quinze páginas de fluxo, do extrato ao cartão físico, mais o painel administrativo.

06 O que eu faria diferente

Marquei os passos conhecidos no julgamento. O produto estava no ar e tinha analytics, e eu não pedi o funil antes de decidir o que o usuário reconhecia. O marcador da D2 é leitura minha. Hoje eu pediria o número primeiro.

Também não escrevi o critério de contraste. A varredura foi a olho. Com um limite escrito, outra pessoa refaria a revisão e chegaria na mesma resposta.

E resolvi as 24 versões à mão. Com as ferramentas que eu tinha, foi o certo, mas cada marca nova ainda pedia conferência tela a tela no Figma. Quatro anos depois, no design system Diletta, o mesmo problema se resolve declarando 55 cores, sem tocar em componente, e um relatório mostra o que o produto herdou sem perceber. Se voltasse, eu começaria por essa camada.

Próximo case

Directo · Local Ads