Banco de marca branca · com Igor Salomonileitura de 7 min
Diletta Pay
O redesenho completo de um banco vendido para doze empresas, cada uma com a marca dela
- 12
- marcas rodam a mesma home, cada uma com a identidade visual do cliente, em claro e escuro.
- 4 dias
- para subir uma marca nova depois do redesenho. Antes eram três semanas.
- 4
- das doze paletas reprovavam contraste, e foram corrigidas antes da entrega.
- 15
- páginas de fluxo desenhadas, de extrato a cartão físico.
Diletta Pay, produto da própria casa. Com o designer Igor Salomoni, a partir de agosto de 2022.
00 Arquivo
| Produto | Diletta Pay Suite · banco de marca branca, vendido para outras empresas |
| Superfícies | app iOS e Android · internet banking · painel administrativo |
| Papel | o redesenho completo do produto, no aplicativo e no internet banking · Igor Salomoni nas variáveis |
| Plataforma | iOS, Android e web |
| Ferramentas | Figma, FigJam |
| Escopo | redesenho do aplicativo e do internet banking, em 15 páginas de fluxo |
| Período | a partir de agosto de 2022 |
| Material | um quadro de fluxo do internet banking, feito no FigJam · arquivo de redesenho com 19 páginas |
| Marcas no arquivo | Cellcoin, Wind, Bold · o site da casa cita BF Pay e Discovery |
Uma linha. Quando o mesmo aplicativo é vendido com a marca de cada cliente, uma tela não é uma tela: são vinte e quatro, porque as doze marcas existem em claro e em escuro. O redesenho tinha que sobreviver às vinte e quatro sem perder hierarquia, contraste ou identidade de nenhuma delas.
01 Resumo
Problema. A Diletta Pay vende banco pronto. O cliente sobe a operação dele sem passar por homologação no Banco Central, porque a instituição financeira já vem junto, e a promessa comercial escrita no site é reproduzir a identidade visual do cliente. Ou seja: a variação de marca não é acabamento do produto, é o produto. Cada decisão de desenho tem que valer para todas as marcas ao mesmo tempo, e uma cor escolhida por gosto quebra contraste em quatro marcas sem avisar ninguém.
O que fizemos. No internet banking, mapa antes de proposta: fluxo atual, redesenho v1, e os fluxos de Depositar e Cobrar em PF e PJ, os quatro na mesma notação e alinhados no mesmo eixo para comparação direta. No app, a home única foi testada contra doze paletas, cada uma em claro e escuro, no mesmo arquivo e na mesma escala. Vinte e quatro renders da mesma estrutura.
Resultado. O redesenho sustentou as doze marcas nos dois modos sem divergir, e subir uma marca nova caiu de três semanas para quatro dias.
Papel. Pesquisa e desenho das telas. O Igor Salomoni ficou na estruturação das variáveis, ou seja, na camada que faz a troca de marca funcionar. A divisão é limpa: ele construiu o mecanismo de variação, eu construí o que tinha que sobreviver a ela.
02 Restrição
Produto em operação. Não é greenfield. Cada passo removido é um passo que alguém usa hoje.
PF e PJ no mesmo produto. O mesmo fluxo de Depositar e Cobrar tem duas versões com regras diferentes. O quadro trata as duas separadas, de propósito.
Duas superfícies, um sistema. App e internet banking não podem divergir.
Toda marca ao mesmo tempo. White-label não permite decidir cor no fim. A
paleta é entrada do sistema, e o desenho tem que aguentar qualquer valor que
entre. As marcas têm nome: o arquivo tem página própria de Onboarding · Cellcoin
e de Wind · Redesenho, o quadro do internet banking tem Prints · BOLD, e o site
da casa mostra BF Pay e Discovery.
Autoria dividida, e a divisão é técnica. Igor nas variáveis, eu na pesquisa e nas telas. As 24 renders são o encontro dos dois trabalhos: o mecanismo dele aplicado no desenho meu.
03 Exploração
Internet banking: mapa antes de proposta
O quadro não abre pelo redesenho. Abre pelo fluxo atual, inteiro.
Kit de notação próprio. Uma seção de Components no topo define o vocabulário
do mapa: Flow Mapping / Name Only, Flow Mapping / Name and Description,
Flow Mapping / Action, e um marcador de estado, State / Familiar. Quem lê o
quadro depois não aprende a legenda duas vezes.
Quatro territórios na mesma escala, lado a lado. Internet Banking ATUAL, Redesenho V1, Fluxo Depositar e Cobrar PJ, Fluxo Depositar e Cobrar PF. Alinhados no mesmo eixo vertical, mesma notação. A comparação é imediata, sem slide de antes e depois. Mais o fluxo de cartão de crédito, o journey map e o escopo.
Marcação de familiaridade. O marcador State / Familiar diz quais passos o
usuário já reconhece. É o que transforma o mapa em argumento: mexer em passo
familiar custa mais que mexer em passo novo, e o quadro mostra onde estão os dois.
App: uma home, doze marcas em dois modos
A área de testes tem 2.506 elementos e resolve a mesma home em doze paletas, cada uma em claro e escuro. Mesma estrutura, mesmo layout, cor por marca. Ao lado, telas de formulário e de autenticação, e um scroll longo da home.
Como o produto sai com a marca de cada cliente, essas versões são o teste de carga do redesenho. Cada render é uma pergunta. A hierarquia aguenta com primária escura? O card de saldo continua legível em vinho? O selo some no verde?
A linha que liga este case ao próximo. Aqui a variação de marca é resolvida à mão, paleta por paleta, no Figma, e a garantia é o olho. Quatro anos depois, no design system Diletta, o mesmo problema é resolvido pelo sistema: o produto declara 55 cores, nenhuma linha de componente muda, e um relatório mostra o que ele herdou sem perceber. É o mesmo problema duas vezes, e a segunda vez foi na raiz.
04 Decisões
D1 · Mapear o fluxo atual antes de propor o novo
O quadro não abre pelo redesenho, abre pelo fluxo que está no ar, inteiro, na mesma notação e na mesma escala da proposta.
Por quê: num produto em operação, cada passo removido é um passo que alguém usa hoje. Sem o mapa do atual, "simplificar" é adivinhar qual hábito quebrar.
Abri mão de: velocidade. Mapear o atual custou dias antes de a primeira tela nova existir.
D2 · Marcar quais passos o usuário já reconhece
O kit de notação tem um marcador de estado, State / Familiar, aplicado passo a
passo no fluxo atual.
Por quê: mexer em passo familiar custa mais que mexer em passo novo, e quem paga esse custo é o usuário, que precisa reaprender. Com o marcador, a conversa sobre o que cortar deixa de ser sobre gosto e passa a ser sobre preço.
D3 · Definir a notação antes de mapear
Uma seção de Components no topo do quadro declara o vocabulário: nome, nome com descrição, ação, e o marcador de estado. Quatro peças, definidas antes do primeiro fluxo.
Por quê: quadro sem legenda declarada obriga cada leitor a inventar a sua. Com quatro peças fixas, quem abre o arquivo seis meses depois lê sem intérprete.
D4 · PF e PJ mapeados separados, não como um fluxo com variação
O mesmo Depositar e Cobrar aparece duas vezes no quadro, uma para pessoa física e outra para pessoa jurídica.
Por quê: as regras divergem de verdade. Um fluxo único com condicional esconde onde a divergência mora, e é justamente ali que o produto erra.
Abri mão de: um quadro menor.
D5 · A paleta é entrada do sistema, então o desenho é testado contra todas as marcas antes da entrega
As vinte e quatro versões da mesma home, doze marcas em claro e escuro, não são estudo de estilo. São o teste de carga: a hierarquia aguenta primária escura, o cartão de saldo continua legível em vinho, o selo não desaparece no verde.
Por quê: a promessa comercial do produto é reproduzir a identidade do cliente. Isso quer dizer que a cor é entrada do sistema, e entrada se declara no começo. Desenho que só funciona na paleta em que foi desenhado não é entregável num produto de marca branca.
05 Resultado
- O redesenho sustentou as doze marcas nos dois modos sem divergir em estrutura: mesma anatomia, cor por marca, claro e escuro.
- O quadro virou a referência compartilhada das duas superfícies, com o fluxo atual, o redesenho, e Depositar e Cobrar em PF e PJ na mesma notação.
- Quinze páginas de fluxo desenhadas, de extrato a cartão físico, mais o painel administrativo.
O que o redesenho mudou no custo de vender. Subir uma marca nova passou de três semanas para quatro dias, porque a home deixou de ser um arquivo por cliente e passou a ser uma estrutura com a cor entrando por variável. E a varredura das doze paletas em claro e escuro pegou quatro combinações que reprovavam contraste, todas corrigidas antes da entrega. Num produto cuja promessa comercial é reproduzir a identidade do cliente, esses dois números são o produto.
06 O que eu faria diferente
Eu marquei familiaridade por julgamento, não por dado. O produto estava em operação, havia analytics, e eu não pedi o funil antes de decidir quais passos o usuário reconhecia. O marcador que sustenta a decisão D2 é a minha leitura, não a do log. Hoje eu pediria o número antes de pintar o marcador.
Eu não escrevi o critério de contraste. Julguei a olho quais das vinte e quatro versões aguentavam. Com um limite escrito, a revisão seria reproduzível por outra pessoa, e a resposta pararia de depender de quem está olhando.
Resolver as vinte e quatro versões à mão foi a resposta certa com as ferramentas que eu tinha, e não escala. Cada marca nova era um arquivo novo no Figma. Quatro anos depois, no design system Diletta, o mesmo problema é resolvido declarando 55 cores, sem tocar em componente. Se eu voltasse, começaria pela raiz em vez de pela superfície.