Empresa
Santander
Projeto
Navegação — Documentação de Referência para o One App Santander
Contexto /
O Santander nunca havia tido um documento de boas práticas de navegação. As informações eram adicionadas aos produtos sem critérios ou padrões compartilhados — e o banco operava com múltiplos Design Systems rodando simultaneamente, o que tornava qualquer tentativa de consistência ainda mais complexa.
Escopo /
Criação da primeira documentação de referência de navegação do One Digital: um repositório de especificações, regras e boas práticas para times de Design, Tecnologia e Negócios construírem juntos uma experiência de produto mais intuitiva e consistente.
Processo /
O projeto foi sustentado por uma base robusta de pesquisa — entrevistas, card sorting, testes de guerrilha e um survey com 399 respondentes — além da análise de 37 bilhões de acessos ao menu. Esses dados orientaram os princípios que guiaram o trabalho: acessibilidade, organização lógica, clareza hierárquica e consistência como elemento de segurança para o usuário.
Como UI Designer, meu desafio central foi tornar sistemas complexos legíveis para pessoas fora do design — sem simplificar demais e sem perder precisão técnica. Para isso, criei frameworks visuais que mapeavam a arquitetura de navegação do app (níveis hierárquicos, transições de tela, padrões de componente como bottom-sheet e overlay) de forma completamente agnóstica de Design System. O objetivo era que um desenvolvedor, um PO ou um stakeholder de negócios pudesse entender exatamente o que estava sendo especificado — sem precisar conhecer Figma, sem precisar decifrar jargão de design.
Resultado /
Um documento vivo que pela primeira vez deu estrutura à espinha dorsal do produto. Mais do que um guia de componentes, a documentação estabeleceu uma linguagem visual comum entre design, tech e negócios — e foi apresentada diretamente a stakeholders como referência oficial para o desenvolvimento do One Digital.
Uma linguagem além dos sistemas
↴
Um dos maiores desafios do projeto foi comunicar decisões de navegação em um ambiente onde múltiplos Design Systems coexistiam — cada um com seus próprios componentes, nomenclaturas e convenções visuais. Criar documentação acoplada a qualquer um deles seria criar documentação com prazo de validade.
A solução foi desenvolver uma linguagem visual própria para o projeto: diagramas em wireframe que descrevem comportamento e hierarquia sem depender de nenhum DS específico. Sem cores de marca, sem componentes proprietários — só estrutura, fluxo e lógica. O resultado é uma documentação que qualquer time consegue ler e aplicar, independente do sistema que está usando, e que sobrevive a migrações, atualizações e reestruturações. Uma linguagem universal dentro de um ambiente fragmentado.
Onde forma e conteúdo se encontram
↴
A especificação final é onde tudo converge. Cada elemento de navegação — cabeçalho, tab bar, menu, tipos de hierarquia — é documentado em duas dimensões simultâneas: como deve ser construído visualmente, e como deve falar com o usuário. Esse trabalho foi desenvolvido em colaboração direta com uma UX Writer, o que significa que design e conteúdo não foram tratados como camadas separadas a serem reconciliadas no final, mas como partes inseparáveis de uma mesma decisão.
O resultado é uma especificação que não deixa perguntas sem resposta — nem para quem vai montar a interface, nem para quem vai escrever o que aparece nela.
