Causa Ganha, legaltech com IA para advogados e seus clientes

O Causa Ganha é um ecossistema jurídico com cinco frentes de produto: o site e a plataforma do advogado, o site e a plataforma do cliente, e um design system compartilhado.

Atuei do descobrimento à entrega: pesquisa e product analytics, arquitetura de fluxo, UI, design system e handoff para desenvolvimento.

Meu diferencial no projeto foi usar IA não só como feature do produto, mas como parte do meu próprio processo de design, da auditoria à documentação.

• Advogado (autônomo ou pequeno escritório): quer reduzir trabalho repetitivo, monitorar publicações, redigir peças e entender o patrimônio da parte contrária, sem virar especialista em software.
• Cliente (parte assistida): acompanha o andamento do seu caso de forma simples, sem o jargão do processo.

O Causa Ganha nunca tinha tido um designer. O produto foi construído por engenharia e negócio, decisão a decisão, e ninguém estava dedicado a olhar a experiência como um todo. Por isso meu primeiro trabalho não foi desenhar tela, foi entender o que já existia, com dado.

Passei as primeiras semanas em análise de métricas, cobrindo doze meses de histórico da plataforma. Cruzei três fontes, porque nenhuma delas isolada contava a história inteira:

Isso mudou a natureza do trabalho: em vez de abrir o Figma e redesenhar por gosto, cheguei com uma lista priorizada do que atacar primeiro, cada item apoiado numa evidência e com uma métrica para acompanhar depois. Num time que nunca tinha tido design, foi isso que deu ao design um lugar na conversa de produto.

A partir daí, o redesign avançou sobre o produto inteiro, das duas frentes ao design system, na ordem que a análise apontou.

Uma pipeline de UX com IA

O maior aprendizado do projeto foi transformar meu processo numa pipeline semi-automatizada com IA, montada como skills no Claude Code, garantindo que design, documentação e qualidade andassem juntos, com uma fonte única da verdade: o Figma.

Cada skill é um passo do processo com instruções e critérios próprios, e o que dá braço a elas são as integrações via MCP: o MCP do Figma lê variables, componentes e telas direto do arquivo; o do Playwright abre o produto no navegador para auditar o que está no ar; e o do Confluence publica a documentação no fim da linha.

• 1

  live-ux-audit

  Audita a ferramenta rodando no navegador (via Playwright), mapeia fluxo e estados reais e avalia contra heurísticas de Nielsen e Leis de UX. É o banho de realidade antes de desenhar.

• 2

  Design no Figma

  Arquitetura de fluxo e telas em desktop e mobile.

• 3

  gherkin

  Gera os cenários de aceite (Dado / Quando / Então) já como cards no Figma, ao lado da tela que descrevem.

• 4

  ux-audit

  Portão de qualidade antes do handoff: relatório de lacunas priorizado por severidade (escala Nielsen 0-4), checando estados faltantes, affordance de botões e coerência do Gherkin com a tela. Só libera com tudo resolvido.

• 5

  feature-handoff, component-spec e ds-foundation

  Documentam feature, componente e fundação, publicando a árvore de documentação no Confluence.

Pipeline de UX com IA, do banho de realidade ao Confluence

O ganho: cada fluxo entregue vinha com auditoria, cenários e handoff versionados, não como esforço extra, mas como saída natural do processo. É esse rigor de método, mais do que qualquer tela isolada, que define este projeto.

A IA do Causa Ganha ganhou um nome e uma persona: o Cícero. O nome vem de Marco Túlio Cícero, o maior orador da Roma Antiga, que também defendia causas no tribunal, daí a coroa de louros e o pergaminho. Em vez de um chatbot genérico, criei um personagem que humaniza a automação e atravessa os dois lados do produto, advogado e cliente, em linguagem natural.

O visual do personagem foi produzido no Magnific, em iterações até chegar nas poses finais, consistentes entre si e legíveis em tamanhos pequenos.

• Para o advogado, nas petições o Cícero entrevista sobre o caso e monta a peça a partir das respostas; nas intimações, é quem 'visita automaticamente os 65 tribunais vinculados à sua OAB'.
• Para o cliente, o Cícero é a porta de entrada: conduz o fluxo 'Encontre um Advogado', guiando a pessoa por conversa até o profissional certo.

Cícero, jovem orador romano, a persona da IA

'Encontre um Advogado': onboarding conversacional do cliente

O papel do personagem é de confiança: dar rosto e voz a um processo que, por baixo, é integração e modelo de linguagem, reduzindo a ansiedade de delegar um assunto jurídico a uma máquina, seja para quem advoga ou para quem busca ajuda.

Estruturei o Lexis, o Design System que unifica os dois produtos, o do advogado e o do cliente.

O nome vem de lex (lei) no plural, ou do grego lexis (palavra, linguagem): um design system é, no fim, a linguagem compartilhada entre design e engenharia.

Ele nasceu de tokens (cor, tipografia, espaçamento, raios, sombras) exportados via Tokens Studio: o Figma é a fonte da verdade, e os valores chegam prontos ao código.

• Fundações e decisões documentadas: grid, breakpoints (desktop 1920 e mobile 360) e padrões como modal no desktop ↔ drawer/bottom-sheet no mobile, com correspondência 1:1.
• Cada página traz o componente, sua descrição e os exemplos de uso, e as variantes cobrem tamanho, estado e arredondamento.
• Documentação publicada e navegável: fundação, decisões, componentes e handoffs viraram uma árvore no Confluence, um DS que a engenharia consegue consumir, não um arquivo de Figma solto.

Escalas Citrine, do cliente, e Oceanic, do advogado, e os nomes que atravessam Figma e código

Botão: a matriz de variantes e os exemplos de uso, direto da página do componente

Input: estados de vazio, preenchido, foco, erro e desabilitado

Dialog, no desktop

Drawer, o mesmo conteúdo no mobile

O DS deixou de ser 'biblioteca de componentes' para virar contrato entre design e código.

Dois fluxos mostram o método aplicado ponta a ponta, do problema à solução, com todos os estados cobertos.

Petições com IA

Da conversa com o Cícero ao editor rich-text: o advogado descreve o caso, escolhe o tipo de petição, informa as partes e verbas, desbloqueia com moedas e recebe a peça pronta e editável, com download em PDF e DOCX. O fluxo foi desenhado em desktop e mobile, com estados de loading, geração, sucesso e edição.

Editor de petições, peça gerada e editável

Intimações

O advogado conecta uma fonte de captura (via OAB, com vínculo automático, ou via AASP, com login no portal) e passa a receber as intimações num calendário com visões Mês e Dia, detalhe do processo e histórico.

Calendário, visão Mês com legenda de status

Visão Dia, intimações Novas e Lidas

Como todo fluxo entregue, este passou pela pipeline completa: auditoria de UX → correções → handoff. Aqui a auditoria trouxe legenda e texto para o status por cor (acessibilidade), confirmação para a ação destrutiva de 'desvincular' e mensagens específicas por cenário no lugar do erro genérico (OAB, credencial AASP inválida, falha de sistema).

Mapa do fluxo completo: captura via OAB e AASP, calendário, configurações, erros e empty states

É um bom retrato de como o processo vira qualidade na tela.

O outro lado: o cliente

O produto tem duas frentes, e o cliente tem sua própria jornada. O ponto de entrada é o 'Encontre um Advogado', um fluxo conversacional conduzido pelo Cícero que leva a pessoa, por perguntas, até o advogado certo, em vez de um diretório de busca frio.

A partir daí, o cliente acompanha os próprios processos: consulta um processo pelo número (CNJ), vê os detalhes (partes, natureza, valor da causa) e a linha do tempo de movimentações, gerencia processos vinculados e ainda tem o Raio-X Processual, a IA que estima as chances do processo.

Consulta processual, processo encontrado

Detalhes do processo e linha do tempo de movimentações

A decisão de design aqui foi de tom: o cliente não fala 'juridiquês'. A conversa com o Cícero e a leitura das movimentações traduzem o processo para a linguagem da pessoa, sem exigir que ela saiba o nome do que precisa.

Desktop e mobile, 1:1

Cada fluxo foi entregue nos dois breakpoints de referência do Lexis (1920 e 360), com o padrão modal ↔ drawer garantindo a mesma decisão em telas diferentes.

Petições, mobile

Intimações, mobile

Cliente, mobile: o Raio-X Processual

O impacto deste projeto está menos numa tela isolada e mais no que passou a sair pronto de cada entrega:

É o maior projeto em que trabalhei, duas frentes de produto (advogado e cliente) e o que mais me colocou dentro do código. Aqui consolidei entregar de ponta a ponta com IA (Claude Code e skills): meu output deixou de ser só Figma e passou a incluir protótipo estruturado, handoffs detalhados e documentação viva.