CPF SeguroProduto · três frentes ao mesmo tempoleitura de 7 min

Proteção contra fraude rodando com a marca de outra empresa.

Proteção contra fraude em três lugares: a loja, o app de um parceiro e a mesa do operador

Cliente: CPF Seguro
Período: 2021 a hoje
Papel: Product Designer Sênior
Escopo: App, app de parceiro e painel

A home do aplicativo próprioO estado do CPF ocupa o topo inteiro. Quem compra proteção chega com medo, e a primeira pergunta é se está protegido agora. Embaixo vem a ação de maior consequência do produto, e depois o histórico de quem usou o seu nome e onde.

Produto em produção. Product Designer na Diletta Solutions, a empresa de software onde eu trabalho, de novembro de 2021 até hoje. Sênior desde 2025.

+34%: de conclusão no cadastro dentro do aplicativo do parceiro, depois do fluxo de seis telas.
3: superfícies no ar sobre um sistema só: loja, aplicativo de parceiro e painel de operação.
88: peças de tela com opções, valores e padrão declarados num lugar só.
22: fluxos auditados por programa, com saída legível.

00 Arquivo


Produto	CPF Seguro · proteção de identidade
Onde ele aparece	app próprio na loja · dentro do app de um parceiro · painel de operação
Papel	Product Designer, Sênior desde 2025 · Diletta Solutions
Plataforma	Flutter, iOS e Android · painel na web
Ferramentas	Figma, Flutter, Git
Escopo	3 superfícies, e eu levo as três
Parceiro no ar	o TicTac, feed de ofertas de loja da Directo, uma empresa de tecnologia para o varejo
Período	novembro de 2021 até hoje

01 Resumo

Problema. No app do parceiro, o cadastro mandava a pessoa achar, baixar e abrir o nosso aplicativo. Muita gente parava ali. Quem entrava dava com uma marca que não reconhecia.

Papel e time. 3 superfícies, e eu levo as três. Pesquisa, fluxo, tela e entrega para a engenharia são meus. O código é da engenharia da Diletta. A marca e o app do parceiro são da Directo.

A decisão. A marca do parceiro entra por lugares reservados na tela, e nunca por cima das nossas cores.

Resultado. +34% de conclusão no cadastro dentro do app do parceiro. O ganho vem de tirar a instalação do caminho. Antes a pessoa tinha que achar o nosso app na loja, baixar e abrir. Agora o fluxo embutido tem seis telas e começa por um SMS.

Estado. No ar nas três superfícies. Período: novembro de 2021 até hoje.

02 Contexto

Quem compra proteção de CPF chega desconfiado. Muitas vezes já foi fraudado.

Isso muda o desenho. Num app de banco o inimigo é o atrito. Aqui é a dúvida: cada elemento que lembra golpe custa uma conversão, porque o usuário já viu golpe usando essa mesma linguagem visual.

03 Restrição

A linguagem em que este produto é escrito é o design system Diletta. O parceiro onde a versão embutida está no ar é o TicTac, da Directo.

Marca de outra empresa dentro do nosso produto. No modo embutido, parte da tela é do parceiro e parte é nossa. Isso é regra de composição, e não cabe num arquivo de configuração de cores.

Dado pessoal sensível. Consentimento e verificação de identidade seguem a lei, e ali eu não invento.

O parceiro decide quando atualiza. O app dele recebe o nosso sistema por versão numerada. Versão que quebra tela ele simplesmente não adota.

04 O problema em número

O cadastro perdia gente em três pontos.

A instalação. Pelo caminho antigo, quem vinha do app do parceiro tinha que sair dele, achar o nosso app na loja, baixar e abrir. Instalação é o degrau mais caro de qualquer funil no celular.
A marca. Dentro do parceiro, a nossa marca aparecia solta, cada tela de um jeito.
A demonstração. O app próprio servia ao mesmo tempo quem usa de verdade e a demonstração para investidor. Aparecia função sem ação por trás.

Pano de fundo: no Brasil, uma fraude é aplicada a cada 16 segundos, e o golpe comum imita a tela de governo e de birô de crédito. A nossa tela precisa parecer verificável. Fonte: Fórum Brasileiro de Segurança Pública, 2024.

05 Decisões

D1 · A marca do parceiro entra por lugar reservado

A identidade do parceiro entra por cores com função própria e por uma posição fixa na barra superior. Ela não sobrescreve as nossas cores.

Por quê: sobrescrever abre a porta para cada parceiro novo pedir uma exceção. Com função nomeada, o parceiro preenche o que é dele e não alcança o resto. As medidas dessa composição estão escritas em pixel num arquivo.

Abri mão de: deixar o parceiro pintar a tela inteira com a marca dele. A tela fica menos "deles", e em troca nenhum parceiro quebra a nossa.

Prova em campo: está no ar dentro do TicTac, da Directo, e o mesmo produto segue na loja como app próprio.

SMS de convite — Fluxo6 telas, role →As seis telas da entrada pelo app do parceiro. O cliente recebe um SMS, cria a conta e sai com biometria ligada, sem abrir a loja de aplicativos.

Boas-vindas — Fluxo6 telas, role →As seis telas da entrada pelo app do parceiro. O cliente recebe um SMS, cria a conta e sai com biometria ligada, sem abrir a loja de aplicativos.

Checkout · resumo do pedido — FluxoO pagamento dentro da loja do parceiro, do resumo ao aprovado. A marca dele fica no pedido, a nossa no meio de pagamento. É a regra da barra superior aplicada a outra tela.

Checkout · aprovado — FluxoO pagamento dentro da loja do parceiro, do resumo ao aprovado. A marca dele fica no pedido, a nossa no meio de pagamento. É a regra da barra superior aplicada a outra tela.

D2 · A tela mora numa descrição que o Figma e o app leem

Cada tela é descrita num formato que o desenho e o programa leem. Um programa só monta todas as telas a partir dessa descrição. Editar tela virou editar a descrição.

Por quê: com duas fontes de verdade, o Figma e o app divergem em uma semana. E depois ninguém sabe qual está certo.

Abri mão de: escrever tela avulsa do jeito que desse na hora. Em troca, medir e comparar.

D3 · Cada peça declara as próprias opções

São 88 peças de tela com opções, valores possíveis e valor inicial escritos num lugar só. Por isso dá para montar tela sem programar e conferir cobertura por programa.

O que eu aprendi errando: só as opções que a peça sempre mostra podem receber dado real. As que aparecem só em certas condições recebem o dado e não mostram nada, sem erro. Achei isso por acaso, e virou regra escrita.

D4 · Um programa confere os 22 fluxos

O programa percorre os 22 fluxos do produto e devolve número. Ele não vê que uma tela está feia. Vê que uma tela está faltando, e é esse o erro que mais escapa.

D5 · A chave de acesso vale no domínio inteiro

A pessoa cadastra uma chave de acesso no nosso produto e ela passa a valer nos outros apps do mesmo domínio, sem digitar senha. O app do parceiro entra nessa lista declarando o nosso domínio no arquivo de domínios associados dele.

A ordem do fluxo saiu daí. Primeiro pergunto se a pessoa vai usar mais de um aparelho, depois ofereço a chave e a biometria, e a senha fica por último.

Por quê: a biometria desbloqueia o aparelho, mas fica presa nele e não passa de um app para outro.

Limite: só funciona dentro do mesmo domínio. Dois gerenciadores de senha diferentes não compartilham a chave, e trocar de celular só leva a chave junto no mesmo ecossistema. Isso ficou escrito.

De volta, sem digitar de novo — A volta e a recusa. Na primeira o perfil já está salvo e a entrada é um toque. Na segunda a credencial não passou. Os dois campos ficam em vermelho e o aviso desce no topo da tela, pedindo para conferir e tentar de novo.

Credencial recusada — A volta e a recusa. Na primeira o perfil já está salvo e a entrada é um toque. Na segunda a credencial não passou. Os dois campos ficam em vermelho e o aviso desce no topo da tela, pedindo para conferir e tentar de novo.

D6 · A marca no login saiu de pesquisa

"Entrar com o Google" tem nome para pedir confiança numa tela alheia. Nós ainda não temos. O negócio queria seguir só com a marca do cliente até ter escala. Em vez de discutir gosto, levantei o padrão mínimo de marca em fluxo de login e levei para a mesa, junto com um ponto que ninguém tinha trazido: a lei de proteção de dados pede que login intermediado fique claro para quem entra.

Proposta que saiu: uma linha de "autenticação pela CPF Seguro" abaixo do logo do parceiro, com as cores dele. Uma linha de texto resolve a transparência e o reconhecimento.

06 Craft

Visão geral do operador972×526A terceira superfície, a que quase ninguém mostra em portfólio. O operador vê o funil de cadastro do app próprio quebrado por fase, com a queda entre um degrau e outro. É daqui que o atendimento trabalha quando um alerta chega errado.

A conta de um cliente962×778A mesma pessoa vista pelo operador. A aba CPF Seguro traz o "Pausar CPF" e as duas listas de quem gerencia o CPF de quem, com convite pendente e resposta em aberto.

Verificação rápida em 16 segundos, completa em 2 minutos, e testes de imagem que comparam cada tela com a versão aprovada.
Na migração para o sistema novo, mantive 200 apelidos de nome para nenhuma chamada antiga do app quebrar.

07 Resultado

+34% de conclusão no cadastro dentro do app do parceiro. O número vem de tirar a instalação do caminho. Antes a pessoa saía do parceiro, achava o nosso app na loja, baixava e abria. Agora o fluxo embutido tem seis telas, começa por um SMS e a pessoa não sai do app do parceiro em momento nenhum.

Pedir a conta — Fluxo5 telas, role →O caminho antigo, como estava no Figma. Sem o nosso app, a pessoa saía do parceiro, caía na loja, baixava, abria e ainda precisava fazer login. É esse degrau que as seis telas tiraram.

Redirecionando — Fluxo5 telas, role →O caminho antigo, como estava no Figma. Sem o nosso app, a pessoa saía do parceiro, caía na loja, baixava, abria e ainda precisava fazer login. É esse degrau que as seis telas tiraram.

Três superfícies no ar sobre um sistema só. O sistema chega no app por versão numerada, com um registro do que muda em cada uma. Quando o registro nasceu, ele mostrou 176 versões publicadas desde a última que o app tinha adotado, sem uma linha sobre o que mudou.

Dois produtos no mesmo esqueleto. Separei o app de quem usa da demonstração para investidor. O servidor decide o que aparece em cada ambiente.

O processo. As demandas chegavam soltas, sem definição escrita. Propus um comitê de produto interno, duas vezes por semana, para registrar o objetivo de cada tela e guardar o histórico de decisão. A proposta foi aceita. Não é desenho, e foi o que mais mudou o meu trabalho ali.

08 O que eu faria diferente

Um ícone sumia em silêncio, e eu demorei para achar. Quando o sistema é instalado como dependência, os arquivos de imagem mudam de lugar, e o programa que carrega imagem devolvia vazio em vez de erro. A tela ficava certa, só sem o ícone. Foram dez testes de imagem até alguém notar.

Num produto que vende confiança, o usuário não vê erro, vê desleixo. Hoje eu faria a busca de imagem falhar alto desde o primeiro dia.

Próximo case

Design system Diletta