Um sistema de menu e header para as plataformas Retail e Enterprise da Airtm
Como uma estrutura web reuniu os produtos para pessoas e empresas, funcionou em 1366×768 e chegou à engenharia como componentes funcionais.
Airtm · 2026 · Entregue à engenharia
Ficha do projeto
- Único designer
- 1 PM, engenharia, Brand
- 1 mês até o handoff
Defini a direção, conduzi cinco rodadas de exploração e construí os componentes em código.
- Problema
- Dois produtos dividiam uma plataforma, mas navegavam de formas diferentes. Em 1366×768, o menu do protótipo deixava só quatro de doze destinos acessíveis.
- Decisão
- Separar identidade global, contexto da página e ações sobre listas em três camadas, usando breadcrumbs apenas onde existe profundidade real.
- Resultado
- Direção fechada após cinco explorações. Componentes React funcionais e registros de decisão foram para a engenharia. Está com eles agora, e não mostro como algo já lançado.
O problema
O design system publicado era mobile-first, então na web cada tela resolvia a orientação por conta própria. Os títulos de página variavam, os breadcrumbs eram a navegação padrão e um menu lateral de nove itens soltos misturava ações e destinos. Os dois produtos estavam se afastando, sem nada que os mantivesse juntos.
NorteToda tela deveria responder onde estou, o que posso fazer e o que eu tenho, do mesmo jeito, nos dois produtos.
A restrição
Dois produtos, uma plataforma, e nenhum dos dois podia parar de lançar enquanto isso acontecia. O sistema tinha de servir a uma carteira para pessoas e a uma ferramenta de pagamentos para empresas sem que um parecesse visita no outro, e tinha de poder ser adotado por engenheiros que não iam ler um documento de especificação para isso.
O que tentei primeiro
Breadcrumbs como forma padrão de dizer onde você está, por serem explícitos e baratos. Também são errados para este produto, que é feito de destinos rasos e fluxos lineares, e não de uma árvore profunda, então o breadcrumb quase sempre tinha um nível só: um controle que ocupa espaço para repetir o título da página.
A virada
Três camadas, cada uma respondendo a exatamente uma pergunta, e nada respondendo a duas. Uma barra global para quem você é e o que está esperando. Um cabeçalho de página para onde você está e o que pode fazer aqui. Uma barra de ferramentas para o que você está fazendo com a lista à sua frente. Breadcrumbs viraram opcionais para árvores realmente profundas, e os fluxos lineares ganharam um stepper.
Medido no hardware que as pessoas têm
Em 1366×768, o menu do protótipo deixava só quatro dos doze destinos acessíveis, com a ação principal de dinheiro abaixo da dobra. Então fiz a revisão responder à altura da tela, além da largura.
Entregue como componentes funcionando
O time recebeu componentes React funcionando, com os estados, e registros curtos de decisão sobre onde fica o saldo, como as superfícies interativas dividem a tela e como a régua se comporta. A engenharia podia ler o código em vez de uma especificação.
Do que eu abri mão
Da liberdade de cada produto. O app de empresas perdeu a possibilidade de inventar a própria moldura para uma tela que se beneficiaria disso, e alguns layouts ficaram com um pouco menos de espaço. Um só sistema significa que alguém sempre abre mão de algo; deixei a troca explícita em vez de deixar cada time descobri-la depois.
Resultado
Direção fechada depois de cinco rodadas, um protótipo funcional publicado para o time e os componentes entregues à engenharia, com as regras escritas para que a próxima pessoa não precise rediscuti-las.
A estrutura, na tela
Do arquivo de design entregue à engenharia. Os dados são fictícios, como em todo o site.