TopSend
Disparo em massa, inbox de WhatsApp, CRM, agentes de IA e base de dados B2B. Eram cinco produtos que pediam cinco telas diferentes. O trabalho foi fazer tudo caber numa plataforma só, sem virar painel de avião.
- O quê
- Comunicação, CRM e IA para times de vendas
- Cliente
- TopSend
- Papel
- Product Designer
- Duração
- 2025 até hoje
- Onde
- Web
O problema
A TopSend junta SMS, RCS, voz, URA e WhatsApp com enriquecimento de base, CRM e IA conversacional. Cada módulo nasceu sozinho, e quem operava pulava entre telas para acompanhar um lead que, no fundo, era o mesmo.
Além de organizar, o design precisava deixar visíveis regras de negócio que o cliente sente no bolso e na operação.
- Uma fonte de verdade
- O mesmo lead aparece em listas, CRM e campanhas, sem cópia.
- Paga só o que chega
- Envio que falha não consome saldo, e a interface mostra isso.
- IA com confirmação
- O assistente propõe a ação e só executa depois do aceite.
- Nada se perde
- Listas, negócios e usuários são arquivados, nunca apagados.
Design system primeiro
Antes das telas, montei um design system dark-first, com tokens, componentes documentados e contraste AA no texto e AAA nas ações principais.
A regra do projeto é simples: toda tela consome o design system. Se o componente não existe, ele nasce lá antes de aparecer numa tela. Foi isso que permitiu chegar a 35 telas em alta fidelidade sem que nenhuma parecesse de outro produto.
Uma vertical nova
A mesma base virou produto para operadores de iGaming. Mudou a unidade de valor (o jogador VIP ativo), mudou a navegação, reorganizada em fluxos (operacional, CRM e administração), e entraram Data Engine para a base de VIPs e agentes de IA dedicados.
Foram 24 telas novas, e o design system absorveu a mudança sem retrabalho visual.
Documentação de produto
Antes de um fluxo virar tela, ele vira especificação: resumo, fluxo ideal, estados da interface, regras de negócio, requisitos e user stories. Estes são 7 dos documentos que escrevi para orientar design, desenvolvimento e negócio ao mesmo tempo.
Chat de atendimento WhatsApp
Central de atendimento em tempo real, no estilo WhatsApp Web, com vários números numa tela só e conversa que vira lead no CRM sem sair do chat.
Fluxo
- 1Conectar o número
- 2Receber a mensagem
- 3Atender com respostas rápidas
- 4Converter no CRM
Estados da interface
- Primeira entrada
- Estado vazio com tutorial e um único botão: adicionar conexão.
- Atendimento ativo
- Três colunas. A terceira, de detalhes, só aparece quando o lead existe.
- Vínculo com CRM
- “Criar lead” na conversa; se o lead já existe, só vincula e mostra o estágio.
Regras de negócio
- Cada usuário vê apenas as próprias conexões e mensagens.
- Uma conversa fica ligada a um contato e a um lead por vez.
- A mensagem aparece na tela em menos de 500 ms.
- Digitar “/” abre as respostas rápidas, só se houver alguma cadastrada.
6 requisitos funcionais3 não funcionais3 user stories
Resultado
35 telas da plataforma e 24 da vertical iGaming em alta fidelidade, todas sobre o mesmo design system.
Navegação organizada por fluxo de trabalho, não por canal: quem opera encontra o lead, a conversa e o negócio no mesmo lugar.
Tem um produto parecido travando?