Zeev: processos e agentes de IA para mais de 350 mil pessoas
Do design system ao front-end: como reorganizei a interface da plataforma de automação de processos da Stoque.
Papel
UX/UI Designer Sênior
Período
2021 até hoje
Impacto
350 mil+ pessoas
4,49 ★
no Capterra, antes 3,1
6×
Global Awards for Excellence in BPM
50+
componentes, do Figma ao código
+30%
de velocidade no front-end
O produto
O Zeev automatiza processos de empresas como Itaú, Sympla, Banco BMG e TIM, da aprovação de férias ao atendimento com agentes de IA. Liderei a evolução da interface: uma plataforma robusta, mas visualmente fragmentada, virou um sistema coeso, escalável e whitelabel. O Zeev é o motor de milhares de operações críticas, e cada mudança precisava manter a precisão e a rastreabilidade.
O desafio
Anos de desenvolvimento descentralizado deixaram mais de vinte módulos inconsistentes, sem suporte ao celular nem às diretrizes da WCAG. Figma e código não conversavam, e a engenharia vivia de retrabalho e bugs. Para criar uma base que escalasse, o projeto focou num novo design system e em ajustes estruturais de UX.
A interface antes do novo design system.
A solução
Projetei e codifiquei o zeev-bootstrap, uma camada sobre o Bootstrap, que a engenharia já dominava. Os tokens em CSS custom properties ligaram o tema escuro sem refatorar código. São mais de 50 componentes documentados, e o nome da camada no Figma é o nome da classe no CSS.
A escolha do Bootstrap foi pragmática: sobre uma base conhecida, a curva de aprendizado encurtou e produto e comercial adotaram o sistema mais rápido. A documentação para desenvolvedores ensina a instanciar cada componente, as regras de acessibilidade e o versionamento.
zeev-bootstrap: componentes prontos para produção.
Os módulos refeitos
Com o sistema pronto, conduzi a migração do Workflow Builder, do Gerenciador de Processos e dos dashboards, com contraste AA, foco visível no teclado, ARIA nos modais e layout do celular ao ultrawide. Os fluxos críticos passaram por testes de usabilidade.
O construtor de formulários no tema escuro, sustentado pelos tokens.
O jeito de entregar
Também mudei a forma como o time entrega:
Métricas e OKRs: auditorias trimestrais de usabilidade que embasaram os roadmaps apresentados à diretoria.
Melhoria contínua: retrospectivas do fluxo de trabalho, que reduziram os atritos entre discovery, protótipo e entrega.
IA no fluxo: Claude e Copilot gerando mockups em código, e LLMs analisando dados de UX.
Handoff documentado: estados especificados nas histórias de usuário, com menos reuniões de alinhamento.
O copiloto de IA desenha o processo no editor BPMN.
O resultado
+43% na nota do Capterra: de 3,1 para 4,49 estrelas.
+150% de adoção no segmento enterprise, sem perder estabilidade.
+30% de velocidade no front-end, com componentes já testados.
Menos chamados de dúvidas básicas de navegação.
Marca unificada nos novos requisitos corporativos.
SuaMEI · 2020 a 2022
SuaMEI: gestão financeira para microempreendedores
Arquitetura, módulos e sistema visual de uma fintech para MEIs, no desktop e no celular.
Papel
UX/UI Designer Júnior
Contrato
PJ, de 2020 a 2022
Escopo
6 módulos, desktop e celular
Telas refeitas no Google Stitch a partir do briefing de produto, com dados fictícios.
2.500+
MEIs atendidos
250+
empresas
R$ 8,1 mi
em notas fiscais emitidas
O contexto
Sete em cada dez MEIs estão irregulares, segundo o Sebrae, muitas vezes sem saber. A SuaMEI junta conta digital, impostos, notas fiscais, contratos e benefícios, que antes ficavam espalhados entre portais do governo e bancos. O desafio era traduzir a legislação do MEI para quem não entende de finanças e usa o celular no meio do expediente. Participei do ciclo inteiro, da pesquisa aos testes de usabilidade.
A arquitetura
Visão Geral: resumo financeiro, indicadores e atalhos.
Financeiro e Conta Digital: receitas, despesas, extrato, Pix, pagamentos e cartão.
Minha Empresa: dados cadastrais, impostos, notas fiscais e contratos.
Benefícios: catálogo, contratação e gestão.
Minha Conta e Preferências: perfil, contas bancárias, categorias e tags.
Seis áreas, com as tarefas frequentes na frente e linguagem direta. Pagar DAS e Novo Pix ficam à mão em qualquer tela, o que só informa fica separado do que movimenta dinheiro, e taxas e prazos aparecem antes da confirmação.
Financeiro: receitas e despesas em abas próprias.
Os módulos
No Financeiro, receitas e despesas ganharam abas próprias, porque os testes mostraram que as pessoas queriam ver primeiro o que entrou no mês. Em Minha Empresa, a guia do DAS aparece com valor, vencimento e código, sem mandar ninguém ao portal do governo. Na Conta Digital, o saldo e as ações que movimentam dinheiro ficam nos cartões do topo, separados do extrato. Em Benefícios, quatro ofertas em cartões de mesma estrutura, com preço, cobertura e uma ação cada.
Conta Digital: o que movimenta dinheiro fica separado do que só consulta.
O sistema visual
Fundo branco, tipografia legível e o laranja da marca só no botão principal e no item ativo do menu. Verde e vermelho aparecem só como estado. O que vence ou atrasa sobe na hierarquia; o que só informa fica em segundo plano. A biblioteca no Figma, com tokens documentados, atendeu desktop e celular, e o handoff incluiu o acompanhamento da implementação em HTML e CSS.
No celular
O acesso acontece quase sempre pelo celular, muitas vezes com conexão instável. Os cinco módulos principais vão para uma barra inferior, e as ações frequentes, como Novo Pix, Pagar DAS e Emitir NF-e, viram botões logo no topo.
O que eu levo
Pagamento, emissão de nota, abertura de conta e regularização do CNPJ foram prototipados e testados com usuários antes do desenvolvimento. O pagamento termina sempre com a revisão dos dados e a confirmação por senha.
CYTEI · 2020, com releitura em 2026
CYTEI: um SaaS de energia solar para cinco perfis
Da arquitetura de informação de 2020 à releitura da plataforma para desktop e celular.
Papel
UX/UI Designer Júnior
Contrato
PJ, 3 meses (2020)
Modelo
SaaS B2B e B2C
Escopo
5 perfis, 6+ módulos
Dashboard da releitura. Os dados das telas são fictícios.
O ponto de partida
Em 2020, a usina controlava as cobranças em planilha, o investidor recebia números por e-mail e o consumidor não sabia por onde começar. A CYTEI juntou essas pontas numa plataforma só. Usinas e investidores precisavam de muita informação na tela; o consumidor, de uma tela limpa que dissesse quanto ia economizar. Com duas plataformas fora de questão, a estrutura tinha de mudar de densidade conforme quem estivesse logado.
Cinco perfis, cinco perguntas
Usinas: quanto faturei, quem me deve e quanta energia ainda tenho para vender?
Investidores: onde está meu dinheiro, com que taxa e que risco?
Consumidores: quanto economizo e o que preciso assinar?
Especialistas e EPCistas: quem precisa de mão de obra e quando estou livre?
Integradoras: como provo que sou confiável e encontro clientes?
Se um elemento não ajudava a responder a pergunta de um perfil, ele saía da tela dele.
A arquitetura antes das telas
Cada módulo é independente, e o menu mostra só o que faz sentido para o perfil logado: o consumidor nunca vê a contabilidade. Cada perfil enxerga um produto menor, e a empresa pode criar módulos sem redesenhar a navegação.
Dashboard: visão geral e gráficos de janeiro a dezembro.
Gestão e financeiro: pagamentos, cobranças, receitas, despesas, notas e contabilidade.
Usinas: cadastro e dados técnicos, como subgrupo, carga e produção em MWp.
Negociação: consumidores, sócios investidores, especialistas e EPC.
Contratos: contratos firmados, financiamento e termos padrão.
Qualificação, acesso e conta: dados do perfil, permissões, setores e notificações por WhatsApp e e-mail.
O onboarding seguiu a mesma lógica: pessoa jurídica e pessoa física passam por qualificações diferentes, e cada etapa pede só o que aquele perfil precisa informar. Quatro regras visuais mantiveram tudo coerente enquanto os módulos cresciam:
Cor só para estado: verde para pago, vermelho para atraso, amarelo para o que espera alguém.
Navegação na lateral, para sobrar largura para tabelas e gráficos.
Ação na linha do dado: cobrar ou enviar o contrato sem abrir outra tela.
Número com contexto: sempre ao lado do mês anterior, da meta ou do ticket médio.
A releitura
Em 2026, voltei ao projeto para testar se aquela arquitetura aguentaria o mercado depois do Marco Legal da geração distribuída (Lei 14.300/2022). Escrevi uma direção de arte curta: tema escuro de alto contraste, violeta só para o que é clicável, verde para estado positivo, vermelho só para erro e bordas finas no lugar de sombras. Gerei as telas no Google Stitch a partir da estrutura original e trabalhei em cima do resultado, mantendo as quatro regras. A plataforma ganhou dois módulos, consórcio e leitura automática da conta de luz.
Lado a lado, 2020 e a releitura mostram o que eu queria verificar: a lateral, os indicadores no topo e a tabela com ação na linha continuam no mesmo lugar. A estrutura recebeu os módulos novos sem mudar.
Módulo a módulo
No dashboard, cada um dos quatro indicadores (geração, faturamento, inadimplência e consumidores ativos) traz a comparação com o período anterior e uma barra fina até a meta. Na tabela de pagamentos, a ação muda com o status: quem pagou tem o comprovante, quem atrasou tem o botão de cobrar.
Cobrança: só o card de vencidos usa a cor de alerta, e a cobrança em lote é a ação principal.
O ciclo de cobrança se lê da esquerda para a direita: emitido, recebido, a vencer e vencido. Só o último card tem borda vermelha, porque é o único que pede ação, e a linha de um inadimplente há mais de quinze dias ganha fundo avermelhado.
No financeiro, os meses realizados têm cor cheia e os projetados ficam num tom apagado, com asterisco: a diferença entre fato e estimativa aparece sem legenda. Em consumidores, uma coluna de etapa da jornada diz onde cada cliente parou, do lead qualificado ao contrato vigente, e um funil no rodapé resume a carteira.
Na qualificação, a conta de luz virou dado: a usina envia o PDF ou a foto, e o lead entra com score de crédito e parecer técnico. Os critérios ficam na mesma tela, para o gestor entender um “incompatível” sem abrir chamado.
Qualificação: a regra aparece junto do resultado.
Em negociações, investidores, usinas e especialistas ficam em abas, e a agenda dos especialistas virou um termômetro de quem está atuando, disponível ou reservado. Nos contratos, seis modalidades viram filtros com contagem, a tabela segue a ordem em que um advogado lê e os alertas avisam um reajuste pelo IPCA trinta dias antes.
Consórcio: a barra de distribuição e a cota de cada cotista usam a mesma linguagem.
No consórcio, módulo novo da releitura, a tela mostra primeiro se a usina está toda comprometida e como a potência se divide entre os cotistas. No cadastro da usina, cards numerados e uma faixa de conformidade dizem quanto falta e qual é a única pendência.
No celular
A versão para celular partiu de outra pergunta: o que o gestor resolve longe do computador? A resposta virou a barra inferior, com dashboard, cobrança, consórcio e leads. As tabelas viraram cards com uma faixa de cor por status, e o gestor qualifica um cliente fotografando a conta de luz durante a visita. As ações seguem o status, em botões largos ao alcance do polegar: o inadimplente tem WhatsApp e reemitir boleto; quem pagou, o comprovante.
O que eu levo
Começar pelos perfis e pela arquitetura permitiu entregar cinco jornadas em três meses sem que uma atrapalhasse a outra. Seis anos depois, a mesma estrutura recebeu módulos novos e uma versão para celular sem mudar a navegação, e as regras visuais valeram no tema claro, no escuro e no celular. Uma boa arquitetura continua útil depois que o visual muda.
Harpia Networks · 2020
EZ Topology: interface para mapear redes complexas
Traduzi configurações técnicas de rede em fluxos claros para profissionais de infraestrutura.
Papel
UX/UI Designer Júnior
Contrato
PJ, 3 meses
Entregas
Wireframes, telas e design system no Figma
0→1
produto do zero
4
jornadas críticas
DS
pronto para o front-end
☾
tema escuro nativo
O produto
O EZ Topology descobre a topologia física de uma rede pelo protocolo SNMP e manda o mapa por e-mail em poucos minutos. O trabalho manual deu lugar a um processo de minutos. O usuário compra tokens, instala o agente de coleta e conecta o sistema, e os dispositivos aparecem sozinhos. O público, de técnicos N2 a administradores de rede, domina protocolos e não quer horas de treinamento.
O desafio
Termos como SNMP, IP e Meraki, mal expostos, travariam o uso. Cada tela precisava dizer o que fazer, por que e o que esperar, diante de:
configurações técnicas sem contexto;
um setup com risco de abandono em várias etapas;
dezenas de IPs validados em tempo real;
varreduras de vários minutos, que geram ansiedade;
um público que vai do estudante de TI ao administrador sênior;
poucas referências visuais no mercado nacional para ferramentas desse porte.
Meu papel
Fiz toda a camada visual, com cada decisão de componente partindo das necessidades do sistema e dos clientes reais:
Wireframes e arquitetura: cada ponto de escolha e cada rota de erro mapeados antes de qualquer decisão visual.
Alta fidelidade: telas com os estados padrão, hover, foco, erro, carregamento e vazio, para nenhuma falha passar em silêncio.
Design system no Figma: tokens de cor para o tema escuro, tipografia e espaçamento, com os nomes que o front-end usaria.
Templates: formulários de configuração e tabelas de resultado padronizados, para evitar retrabalho.
Onboarding: três telas curtas, sem tutorial longo.
Tema escuro por usabilidade
Quem trabalha com infraestrutura passa o dia em ambientes com pouca luz. A paleta parte do roxo e do azul-escuro; os mesh gradients aparecem só no login, no splash e no onboarding, e as telas internas usam superfícies neutras, que leem mais rápido.
Barra lateral como âncora: projetos, conta e saldo de tokens sempre à mão, com o botão de compra em destaque sem invadir o espaço útil.
Tipografia funcional: rótulos, descrições e alertas separados por uma hierarquia rígida, que previne erros de preenchimento.
Controles com contexto: SNMP, Meraki e CDP vêm com um texto curto de apoio, e ninguém precisa de um guia em PDF.
Ilustrações 3D no onboarding: os benefícios aparecem antes mesmo da configuração.
Login: o gradiente como marca, só na porta de entrada.
O fluxo até o mapa
Login: o erro diz o que foi digitado errado e como corrigir, e a recuperação de senha usa ilustrações para suavizar um momento tenso.
Onboarding: três telas que respondem o que a ferramenta faz, por que usar e como começar.
Setup: campos em etapas e seletores de protocolo com texto de apoio; o limite de nós cruza o tamanho da rede com o gasto estimado em tokens.
Mapeamento: IPs digitados ou por CSV, validados em tempo real, que bloqueiam dados capazes de quebrar a varredura.
Resultado: o progresso aparece durante a varredura, a tabela lista os equipamentos com filtros rápidos e o mapa chega por e-mail no fim.
O que eu levo
Interfaces de infraestrutura afetam a segurança dos dados e a agilidade da manutenção, e informação ambígua mina a confiança do time na plataforma. O trabalho foi manter a nomenclatura técnica exata dentro de um layout limpo, que acelera a configuração. O handoff levou templates e lógicas de estado descritos junto dos padrões de código.
Zeev · uso interno
Zeev Kanban Flow: os gráficos de fluxo do time, numa ferramenta nossa
Uma página web com os gráficos de kanban que o time do Zeev usa todo dia. Ela reproduz o que a gente via no Nave, e o time deixou de pagar a assinatura.
Papel
Ideia, design e código
Para quem
Time do Zeev
Status
Em uso diário
Reconstrução com dados de exemplo: a ferramenta é interna.
Métricas de fluxo sem assinatura
O time do Zeev trabalha em kanban e acompanha o fluxo nas reuniões do dia a dia. O Kanban Flow lê o quadro do time e desenha os mesmos gráficos que vinham do Nave: o time manteve as métricas, deixou de pagar a ferramenta externa e pode ajustar os gráficos ao próprio processo. Quem entra no time ganha acesso sem aumentar uma fatura.
Cada gráfico responde uma pergunta
Fluxo cumulativo: onde o trabalho está acumulando?
Cycle time: quanto tempo um item leva do início ao fim?
Throughput: quantos itens o time entrega por semana?
Idade do WIP: o que está parado há mais tempo que o normal?
Previsão Monte Carlo: quando um lote fica pronto, e com que chance?
Percentis no lugar de médias
Poucos itens muito demorados puxam a média para cima. Por isso o painel diz “85% em até 14 dias”: uma promessa que se cumpre. Os itens acima desse limite ficam em vermelhão, e é por eles que a conversa começa. A previsão também responde com o risco junto, como “85% de chance em 23 dias úteis”, e quem pergunta escolhe a confiança de que precisa.
ClippCut · produto próprio, 2026
ClippCut: agendamento online com assistente de IA, criado do zero
Para quem atende com hora marcada e ainda organiza a agenda no caderno e no WhatsApp. Fiz o produto inteiro, da marca ao banco de dados.
Papel
Fundador: produto, design e código
Plataforma
Web e app instalável (PWA)
Status
No ar
3
repositórios: app, site e gateway de WhatsApp
179
testes de acesso no banco
0
contas feitas pela IA
O produto
O profissional para o corte para responder “tem horário?” e só descobre quanto faturou quando fecha o mês. O ClippCut dá a cada negócio uma página de agendamentos para a bio do Instagram: o cliente marca sozinho e recebe a confirmação no WhatsApp. O dono vê agenda, equipe e relatórios num painel que se instala no celular. Comecei pelo modelo de dados: todo negócio é uma empresa, inclusive quem trabalha sozinho, e o banco só devolve a cada login as linhas da própria empresa.
A duração protege a agenda: um serviço de 1h30 só aparece onde cabe 1h30.
Uma agenda por profissional, e o dono vê os números de todos.
Cada agendamento entra numa fila no banco, e a confirmação sai pelo WhatsApp a cada dois minutos, com nova tentativa quando falha.
Faturamento previsto e realizado lado a lado, para ninguém confundir promessa com caixa.
Onde entra a IA
O dono pergunta em português: “quanto fiz mês passado?”. A regra do projeto é que a IA nunca calcula. Se o modelo somasse por conta própria, viraria uma terceira fonte de verdade, capaz de contradizer o relatório da tela ao lado. Também descartei deixar o modelo escrever SQL: uma consulta que esquecesse um filtro de status sairia com um faturamento diferente do relatório.
A resposta mostra sempre o mesmo número da tela de relatórios.
Interpretar: o modelo só devolve um JSON com a consulta e o período.
Executar: uma Edge Function chama a mesma função do Postgres que monta os relatórios, com o login de quem perguntou.
Redigir: o modelo recebe os valores já formatados em reais e só escreve a frase.
São três chamadas em vez de function calling, porque os modelos gratuitos têm suporte irregular a ferramentas, e JSON estrito com validação funciona em qualquer modelo. Os números chegam prontos porque modelo de linguagem erra aritmética: se recebesse 4320.00, um dia escreveria R$ 43,20. Se a redação falhar, a resposta sai de um modelo de frase escrito no código, com os mesmos números. Nome, telefone e observações dos clientes nunca saem do banco.
Como eu construí
Marca e site em HTML, SCSS e Vite, com uma página por segmento e por recurso. Supabase com Postgres, regras de acesso por empresa e 179 testes num Postgres descartável; Vue 3 com Pinia num PWA, uma fila de WhatsApp disparada pelo pg_cron e modelos do OpenRouter numa Edge Function. No desenvolvimento, programo em par com o Claude Code. O plano para um profissional é grátis, e o assistente está em beta, com cota de perguntas por plano.
Boto · 2026
Boto Sonar: robôs de IA que acham clientes e sugerem o que postar
A plataforma que a Boto, a agência onde eu desenho e programo, usa para achar clientes, planejar conteúdo e acompanhar cada conversa até o contrato. Agora ela abre para outros negócios.
Papel
Ideia, design, código e os robôs
Plataforma
Web, com robôs agendados
Status
Em uso na Boto, acesso antecipado
4 de 6
módulos rodam todo dia
3
travas entre o robô e o banco
6h10
o Radar roda sozinho, de segunda a sexta
100%
dos leads com o link da fonte
O produto
Uma agência pequena acha clientes numa planilha, planeja posts em outra ferramenta e anuncia numa terceira, e ninguém sabe qual post trouxe o cliente que fechou. O Sonar junta esse ciclo:
Radar: varre fontes públicas por cidade, bairro e categoria e entrega negócios com presença digital fraca, com nota, a fonte e o gancho da primeira mensagem.
Pautas: ideias de post para a semana, com o motivo, o formato e a rede. O que a pessoa descarta ensina o próximo lote.
Funil: etapas, dono e prazo de resposta de cada conversa até o contrato, com a origem registrada.
Playbook: tom de voz, ofertas e respostas aprovadas, que os robôs também seguem.
A IA propõe e a pessoa decide: nenhum lead entra no funil sem triagem, e nada vai ao ar sem aprovação.
Radar: cada negócio chega com nota, fonte e gancho.
Um robô que lê a web sem mexer em nada
Uma página da internet pode esconder instruções para enganar um robô. O Radar e as Pautas são agentes do Claude que rodam como tarefas agendadas, então separei quem lê a web de quem tem acesso ao sistema:
Quem lê a web não tem terminal nem senha: só busca, lê e grava arquivos.
Quem tem terminal só roda o CLI, que trata o que o agente escreveu como dado.
O robô não lê nenhuma tabela: o servidor revalida cada candidato e recusa duplicatas.
Cada rodada segue um contrato em JSON Schema, e regras extras conferem, por exemplo, que toda URL citada foi mesmo visitada e que a primeira mensagem tem até 350 caracteres, sem link e sem preço. A Triagem é a última barreira: o robô nunca marca data, nunca aborda ninguém e nunca altera um lead existente, e um negócio descartado nos últimos 90 dias não volta.
Pautas: o que publicar na semana, e por quê.
As regras moram no banco
Etapas, transições e prazos do funil são funções do Postgres, testadas com pgTAP: a interface pede e o banco decide. O front é Vue 3 com Pinia, e o Supabase com RLS mostra a cada pessoa só o que o papel dela permite. Cada robô tem um teste de ponta a ponta que roda sem internet, no banco local. O Estúdio e as Campanhas estão em construção, e o ClippCut já usa os mesmos robôs.
