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.
Flowchart diagram with five white rectangles connected by red lines, depicting a process or decision tree, on a gray background.
Flowchart with four minimalist smartphone screens and connecting lines, some screens highlighted in red.
Flowchart with three rectangular nodes connected by red and black lines on a gray background.
A digital flowchart diagram on a computer screen displaying interconnected boxes and arrows, with labels such as 'logo_santander' and 'Destaque', illustrating a website or app layout and navigation structure.
Screenshot of a website or app interface with multiple wireframes and layouts
A screenshot of a digital flowchart or wireframe diagram with various interconnected nodes and documents, including text boxes labeled 'Titulo' and 'Bottom-Sheet.' It features different shapes connected with lines, some with labels like 'N.1,' 'N.2,' 'N.3,' and 'Destaque,' and has a light gray background.
Flowchart diagram with interconnected boxes labeled N.1, N.2, N.3, and N.2, showcasing directions to go back ('Voltar') and loops. The diagram appears to depict a process or system with directional flows.
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.
A detailed infographic about navigation in UI design, including sections on introduction, definition, usability impact, navigation elements, header, tab bar, menu, and types of navigation with diagrams, icons, and text explanations in Portuguese.