Roteiro: como desenhei um app para o representante comercial que nunca teve ferramenta certa

Um case de UX/UI construído do zero — da ideia às telas em alta fidelidade, com uma parceira inusitada: uma IA.

Todo representante comercial tem uma versão desse dia.

Você acorda cedo, abre o WhatsApp, e ali estão os clientes que precisam de visita. Você anota num papel, tenta lembrar o que fica perto do quê, abre o Google Maps, digita um endereço, sai, percebe que voltou pelo caminho errado, perde tempo, perde energia — e ainda tem cinco paradas pela frente.

Não existe drama nisso. Só uma ineficiência silenciosa que se repete todo dia, para milhares de pessoas que vivem de visitas.

Foi esse problema que me trouxe até esse projeto.

O ponto de partida: uma conversa de amigo

Esse projeto nasceu de uma conversa.

Um amigo meu trabalha como representante comercial há anos. A gente estava conversando sobre o dia a dia dele quando ele mencionou, quase de passagem, duas coisas que o irritavam toda manhã: copiar endereço por endereço no app de navegação — um por um, cliente por cliente — e não saber, olhando para a lista, qual visita ficava mais perto da outra. Ele saía e descobria no caminho. Às vezes dava certo. Às vezes percorria o dobro do necessário.

Não era uma reclamação séria. Era um atrito pequeno, repetido todos os dias, que ele já havia normalizado porque nunca existiu nada melhor.

Quando ele terminou de falar, a pergunta foi inevitável: por que não existe um app que recebe a lista e já coloca em ordem?

Foi aí que começou o Roteiro.

Não tenho o “antes” dramático de quem viveu o problema na pele. Mas tenho o amigo que me mostrou onde a dor estava — com precisão suficiente para eu saber exatamente o que o produto precisava resolver. Uma ferramenta simples, feita para campo, que pegasse uma lista de clientes e colocasse em ordem de visita sem exigir nada do usuário além da lista em si.

O mercado tem soluções — CRMs robustos, sistemas de gestão de equipes, plataformas de logística. Mas elas foram feitas para empresas, não para o representante autônomo que sai todo dia com o carro cheio e o celular na mão. Ele não precisa de um sistema. Ele precisa de uma ferramenta.

Essa diferença guiou cada decisão do projeto.

O que o produto precisava ser

Antes de desenhar qualquer tela, ficou clara uma premissa: esse app precisava funcionar em campo, com uma mão, com pressa, embaixo de sol.

Isso não é metáfora. É uma restrição de design real.

O representante não vai sentar na frente de um computador para configurar sua rota. Ele vai abrir o app no carro, digitar ou colar a lista de clientes, e precisar que o aplicativo faça o resto. O produto tem que ser invisível o suficiente para não criar atrito — e inteligente o suficiente para entregar valor imediato.

A proposta central virou essa: jogue a lista, receba a rota.

Três fluxos de entrada para a lista — manual, colar texto, importar arquivo — porque cada representante tem um jeito de trabalhar e o app não deveria forçar nenhum deles a mudar.

Uma parceira que eu não esperava

Aqui entra a parte diferente desse case.

Esse projeto foi desenhado em parceria com o Claude — uma inteligência artificial da Anthropic. E quando digo parceria, não estou usando a palavra de forma gentil. Estou sendo precisa.

Não usei a IA para gerar texto de apoio ou responder dúvidas pontuais. Trabalhei com ela como se trabalharia com uma designer: trouxe o problema, discuti decisões, pedi opiniões, concordei em alguns pontos e discordei em outros. E o Claude respondeu à altura — questionou escolhas, sugeriu alternativas, e às vezes me surpreendeu com uma perspectiva que eu não havia considerado.

Um exemplo concreto: quando perguntei sobre o app de navegação, minha primeira ideia era fixar o Google Maps como padrão nas configurações. O Claude devolveu com uma pergunta simples — “e o Waze? No Brasil, especialmente para quem trabalha em campo, ele é muito mais popular por conta dos alertas de trânsito em tempo real.” Tinha razão. Mudei a decisão. A tela virou um bottom sheet que pergunta ao usuário na hora, com Google Maps, Waze e Apple Maps como opções — e a possibilidade de fixar um favorito nas configurações.

Essa troca aconteceu em cada tela, em cada detalhe. Cor, tipografia, espaçamento, fluxo de importação, estado de erro, estado vazio. Cada decisão foi discutida.

O resultado não é um projeto gerado por IA. É um projeto que eu não teria chegado sozinha — e que o Claude não teria chegado sem mim.

As decisões de design que mais importaram

A tipografia

DM Sans. Geométrica, limpa, altamente legível em telas pequenas com luz solar direta. Para um app de campo, fonte não é detalhe estético — é funcionalidade. O representante precisa ler o endereço enquanto caminha. A fonte tem que deixar isso acontecer sem esforço.

A paleta

Azul #185FA5 como cor primária. A escolha foi deliberada: azul comunica confiança e profissionalismo sem a frieza do cinza e sem a urgência do vermelho. Para um app de vendas — porque é disso que se trata, no fundo — confiança é a mensagem certa.

Verde #1D9E75 reservado exclusivamente para o estado “visitado”. O olho aprende rápido: verde significa feito. Não existe verde em nenhum outro lugar do app, então quando aparece, comunica sem precisar de texto.

Fundo branco com cinza suave nas seções de apoio. Sem drama, sem peso. O app some para o usuário poder focar no que importa: a rota.

A primeira decisão — antes de qualquer fluxo

Antes de desenhar os fluxos internos, surgiu uma pergunta que parece simples mas define tudo: o app vai exigir cadastro? Criei duas versões da tela de entrada para pensar essa decisão — uma com login, outra sem. Para um MVP, a resposta foi clara: menos atrito, mais valor imediato. O usuário abre o app e já começa. Conta e histórico na nuvem podem entrar numa versão futura, quando o produto já tiver provado que merece o tempo de quem usa.

Tela de login

O fluxo de importação

Três abas — manual, colar lista, arquivo — com lógicas completamente diferentes entre si, mas com a mesma aparência de entrada para não confundir. A aba manual usa cards individuais por cliente, com campos de nome, empresa, endereço e telefone. A aba de colar texto tem pré-visualização em tempo real com validação linha por linha — incluindo alerta amarelo para endereços incompletos, que o usuário pode corrigir depois sem perder o resto da importação. A aba de arquivo aceita CSV, TXT e XLSX, e inclui um passo a passo visual de como montar a planilha — porque nem todo representante é tech-savvy, e o app não deveria exigir que fosse.

A tela de rota

Cards de progresso no topo — clientes, visitados, restantes — para o representante ter consciência situacional em um olhar. Linha do tempo vertical com paradas numeradas. Botão “Navegar” em cada parada que abre o bottom sheet de escolha de app. Botão “Visitado” que risca o nome e registra o progresso. E no final, um botão para abrir a rota completa no Google Maps com todas as paradas em sequência — para quem prefere delegar a navegação toda para um app externo.

Fechamento: para quem esse projeto existe

O Roteiro existe para o representante que nunca teve ferramenta certa.

Não o que trabalha numa grande empresa com sistema de gestão e suporte de TI. O autônomo. O que tem carteira própria, carro próprio, e organiza o dia no papel ou no WhatsApp porque nunca apareceu nada melhor.

Ele merece um produto que respeite o tempo dele. Que some quando não precisa e apareça quando precisa. Que seja tão simples de usar que ele não precise parar para pensar em como usar.

Esse foi o norte do projeto. E é o que eu quero continuar construindo.

Se você é representante comercial, designer, desenvolvedor ou recrutador que chegou até aqui — obrigada por ler. Esse projeto foi construído com cuidado e com uma parceira que me surpreendeu a cada conversa. Toda troca sobre ele importa.