O Desafio
Diferente de um banco de pessoa física, uma empresa opera com múltiplos responsáveis, documentação jurídica, fluxo de caixa entre contas e obrigações regulatórias. O app precisava carregar tudo isso sem travar a usabilidade.
O desafio central foi criar uma experiência que parecesse simples para o gestor do dia a dia, mas que cobrisse toda a complexidade do back-office financeiro por baixo: KYC com documentação empresarial, representante legal, selfie de validação biométrica e PIN como segundo fator de autorização.
Além disso, a feature de subcontas (contas filhas vinculadas à empresa-mãe) não tem equivalente direto em apps de bancos tradicionais. Foi necessário criar um modelo mental novo, sem referência de mercado consolidada.
PS: Este projeto consistiu na criação do design completo de um aplicativo de fintech voltado para pagamentos e recebimentos via Pix, com integração nativa a sistemas ERP. Desenvolvido internamente como proposta para um cliente real, o projeto não foi implementado por motivos orçamentários. A identidade visual apresentada é fictícia, criada exclusivamente para fins de portfólio.
Wireframes e Estrutura
Estruturei a experiência considerando a complexidade do contexto B2B, especialmente no onboarding, que envolve 9 etapas críticas — da criação da conta até validações de segurança. Cada passo foi desenhado para reduzir abandono e garantir clareza ao usuário.
O fluxo também contempla os 4 tipos de chave Pix (CPF/CNPJ, e-mail, telefone e aleatória), com validações e estados de erro específicos, mantendo consistência e previsibilidade na jornada.
Além disso, desenvolvi um módulo inédito de subcontas com transferências em lote no mobile, sem referências no mercado brasileiro, exigindo construção de fluxos do zero com foco em controle, escalabilidade e usabilidade.
Decisões de UX e UI
Cada escolha tem uma razão. A seguir, as decisões mais significativas: de arquitetura de informação, interação, sistema visual e tratamento de erros.
UX – Arquitetura e Fluxo: Hub centralizado em vez de operações fragmentadas, Todas as operações PIX (Transferir, Pagar QR Code, Depositar, Cobrar, Minhas Chaves, Meu Limite) partem de uma Área PIX única, acessível tanto pela Conta Digital quanto pelo menu principal. A alternativa seria distribuir cada operação como item de menu separado, o que aumentaria a carga cognitiva para o gestor que usa todas.
Campo CEP preenche endereço automaticamente: Nos dois fluxos de endereço (empresa e representante), ao digitar o CEP, logradouro, bairro, cidade e estado são preenchidos via integração ViaCEP. O usuário só precisa completar número e complemento. Isso elimina 5 dos 7 campos do formulário de endereço como tarefa ativa, reduzindo tanto o tempo quanto o potencial de erro de digitação em dados que são objetivos.
CTA desabilitado até completar campos obrigatórios: O botão “Continuar” permanece cinza e inativo enquanto qualquer campo marcado com * não estiver preenchido. Na tela de documentos, o botão só ativa após o upload do Contrato Social; os demais documentos são opcionais e exibidos com aparência distinta.
Isso elimina erros de submissão e a frustração de mensagens de validação após o clique. O feedback vem antes da ação, não depois.
UI – Ícone contextual + label flutuante = reconhecimento imediato: Cada campo de formulário tem um ícone no lado esquerdo que comunica o tipo de dado esperado antes da leitura, cadeado para senha, envelope para e-mail, calendário para data. Isso reduz a carga de leitura em formulários longos, especialmente no onboarding de 9 passos.
Grid 2×2 com ícone + label em vez de lista: A Home usa um grid de 4 cards com ícone e nome do serviço, não uma lista vertical. Para um app com múltiplos módulos de negócio distintos (Conta Digital, Open Banking, Central de Cobranças, Crédito Consignado), o grid comunica paralelismo “são 4 produtos, todos igualmente acessíveis”, enquanto uma lista implicaria hierarquia ou sequência.
Recibo com dados mascarados e download direto: O comprovante de transferência exibe CNPJ parcialmente mascarado (***000-**) e agência/conta no padrão bancário. O ícone de download no canto superior direito é o único elemento de ação, deliberadamente sem botão de compartilhar inline para não incentivar o envio de dados mascarados por apps externos como padrão. A máscara não é só estética, é um comportamento de segurança comunicado visualmente, sem aviso textual.
Sistema – Pin como segundo padrão: Um padrão de 6 pontos para todas as ações críticas: transferência PIX, exclusão de chave, ajuste de limite e criação de subconta, todas pedem o mesmo PIN de 6 dígitos. A consistência é intencional: um único modelo mental de “autorização” evita que o usuário precise decidir qual credencial usar em cada contexto.
Saldo como toggle: a visibilidade do saldo é opt-in, não padrão. O ícone de olho ao lado do saldo permite ocultar o valor. O saldo fica visível por padrão, decisão baseada no contexto B2B, onde o gestor financeiro tipicamente precisa ver o valor imediatamente para tomar decisões, ao contrário do consumidor que pode estar em público.
Limite pix: Três períodos de limite independentes com edição individual, o app distingue limite diurno (06h–19h59 para pessoas físicas), noturno (20h–05h59) e o período todo para empresas; cada um editável separadamente, com confirmação por PIN. Essa granularidade não é comum em apps B2C, mas é uma demanda regulatória do Banco Central para contas empresariais.
Subcontas — Modelo Mental Novo
Distribuição de saldo para múltiplas subcontas em uma única tela. A tela de “Transferir entre contas” lista todas as subcontas com um campo de valor editável para cada uma, mais um campo global no topo (“Informe o valor a ser enviado para cada conta”). O saldo restante a distribuir é calculado em tempo real conforme o gestor preenche os valores. Alternativas descartadas: um fluxo de transferência separado por subconta (ineficiente para quem tem 5+ subcontas) e uma tela de “distribuição automática” (perda de controle granular que os gestores precisam).
Resultados: Plataforma completa com documentação de processo, do mapeamento de IA às telas finais — pronta para handoff com desenvolvimento.
71 Telas documentadas — estados default, vazio, erro e sucesso.
9 Passos de cadastro com KYC completo, nenhum campo supérfluo.
1 IA – Arquitetura completa com 4 módulos e 3 níveis de hierarquia.
0 Erros sem recuperação — todo edge case tem next step mapeado.
