Flow Benefits:
da burocracia à confiança.
Em 2016 eu era analista de RH numa seguradora e o processo de reembolso de benefícios era uma bagunça que todo mundo sofria. Fui atrás de resolver, deu certo, e só muito depois fui descobrir que o que eu tinha feito tinha nome: UX. Esta é essa história, contada dez anos depois com as ferramentas que eu não tinha então.
A Origem
Caixa Seguradora. Processo quebrado. Uma analista de RH que não sabia que o que fazia tinha nome.
2016 – 2021A Madrugada
Figma Make recém-lançado. Uma madrugada inteira. Um protótipo batizado de Flow Benefits. Muito caos, muita descoberta.
Set / 2025O Produto Real
Com metodologia, métricas e Claude Code como parceiro. O produto que aquela madrugada tentou ser.
2026 · Produto no arAntes de saber que era UX, eu já estava criando experiências.
Era analista de RH na Caixa Seguradora quando percebi que o processo de reembolso de benefícios causava frustração em todo lado da cadeia e ninguém conseguia enxergar por quê.
O que eu fiz antes de saber o nome do que estava fazendo
Eu ocupava um lugar único nesse projeto: era a responsável pela experiência do colaborador dentro do programa Viva Bem, a representante do RH junto à TI, a interlocutora com auditoria e também usuária do próprio benefício que estava redesenhando. Eram muitas camadas ao mesmo tempo, o que hoje reconheço como algo próximo a design de serviço: enxergar o sistema inteiro de dentro.
Mapeei as jornadas dos dois lados (colaborador e RH), analisei os dados do processo (volume, tempo médio por etapa, categorias com mais rejeição) e conduzi conversas para entender o que cada área precisava de verdade. Atuei como ponto focal na validação do novo fluxo, que incluiu formulários com validações, upload de comprovantes pelo celular, checagem automática de elegibilidade e retorno claro para o colaborador em cada etapa, além de organizar as regras que antes viviam espalhadas em pastas, e-mails e acordos paralelos sem registro.
Aplicava heurísticas de Nielsen por intuição, sem saber que o nome era esse, organizava a informação para que o fluxo fizesse sentido sem precisar de manual e usava as palavras certas para reduzir dúvidas no caminho. O resultado: processo centralizado, rastreável, com muito menos retrabalho e, finalmente, sem a sensação de que o RH tinha preferidos.
O coração acelerou
Foi ali que aconteceu. Não em uma aula, não em um curso, não em um momento planejado. Numa sala de empresa, tentando resolver um problema real com o que eu tinha, o coração acelerou diante de uma situação que podia ser resolvida com uma forma diferente de olhar para as pessoas envolvidas.
Uma colega da TI me deu um feedback positivo sobre como eu tinha pensado o fluxo. Foi a primeira vez que alguém nomeou o que eu estava fazendo como um olhar de design. Só fui saber que aquilo tinha nome muito depois. Mas a faísca foi essa.
Como era. Entre e explore.
Reconstituição interativa do sistema intranet da Caixa Seguradora, feita a partir de memória e referências visuais antigas. Três telas funcionais: a visão do colaborador, o formulário de solicitação e o painel administrativo do RH.
Figma Make, uma madrugada e o lobo de Wall Street.
Setembro de 2025. O Figma Make tinha acabado de sair, sem manual, sem comunidade, com todo mundo correndo atrás de entender o que a IA era capaz de fazer. Eu tinha um problema que conhecia de dentro e decidi que era a hora de descobrir.
O que aconteceu naquela madrugada
Escolhi o problema certo
Não testei com algo novo. Peguei um problema que eu conhecia de dentro, que eu tinha vivido em múltiplas camadas, como quem cuida do processo, como quem representa o cliente interno e como usuária do próprio benefício. Esse entendimento profundo foi o que me deu base para identificar o que a IA gerava errado e corrigir com precisão.
Fiquei acordada até o sol nascer
Prompt, resultado, feedback e ajuste, um ciclo que se repetia enquanto o Figma Make construía em tela o que eu tinha pensado. Batizei de Flow Benefits. Já entrei com o escopo em mente: dois perfis, distribuição automática para os departamentos envolvidos, dashboards e visibilidade que eu sentia falta porque vestia vários chapéus nesse processo. Não só reconstruí o que existia: expandí a partir do que eu via de ângulos que a maioria das pessoas não via.
Entendi o que a ferramenta não sabia fazer
Interface inconsistente. Sem confirmação em ações críticas. Limite mensal invisível para o colaborador. A IA havia amplificado minha intenção, mas também tinha amplificado onde meu briefing era impreciso.
O protótipo existia. O produto, ainda não.
O Flow Benefits v1 tinha forma, mas não tinha método por trás nem infraestrutura real. Ficou como evidência de um caminho aberto, esperando o momento e as ferramentas certas para virar produto de verdade.
O carro chegou, mas precisou de muita batalha...
As duas jornadas que esse produto resolve
Antes de ver as telas, o contexto: duas pessoas com problemas completamente diferentes, causados pelo mesmo processo quebrado.
O que a avaliação heurística revelou
Analisei o protótipo pelas 10 heurísticas de Nielsen — não como checklist, mas como ferramenta de diagnóstico para orientar o que a v2026 precisa entregar de diferente.
🔍 Metodologia aplicada: Heurísticas de Nielsen
Avaliação sistemática
Cada heurística avaliada com evidência visual direta dos screenshots, não por intuição.
Finding + impacto + oportunidade
Cada problema documentado com nível de impacto e o que muda na v2026.
Dois perfis de usuário
Colaborador e RH avaliados separadamente, porque os problemas são diferentes e as soluções também.
Baseline documentado
A v1 vira referência mensurável para validar melhorias da v2026 com métricas reais.
H1 — Visibilidade de status
Toasts de confirmação em toda ação relevante. Loading states durante aprovação/rejeição. O colaborador sempre sabe o que aconteceu.
H3 — Controle do usuário
Sem modal de confirmação antes de aprovar/rejeitar no RH. Ação direta, sem possibilidade de desfazer. Alto risco de erro operacional com 16+ solicitações simultâneas.
H4 — Consistência visual
Painel colaborador usa verde; RH usa azul escuro — sem razão semântica. Componentes gerados por prompts diferentes divergem em espaçamento e tipografia.
H5 — Prevenção de erros
O colaborador não vê quanto do limite mensal já usou antes de abrir um novo pedido. A informação só aparece no detalhe da solicitação — na visão do RH.
H2 — Linguagem
Terminologia corporativa correta: "Modalidades", "Limite Mensal", "Período de Referência", CNPJ do prestador. Não precisa ser traduzida para o contexto.
Escopo surpreendente
Dois perfis completos, analytics, exportação CSV/Excel/PDF, distribuição por e-mail, loop de feedback de usuários. Mais funcionalidade do que aparentava.
Ciclo de vida de uma solicitação
Na operação real, uma solicitação raramente termina só em aprovada ou rejeitada: a terceira via mais frequente é devolver para o colaborador corrigir. A v2026 mapeia os estados completos do ciclo de vida, com prazos automáticos para cada transição.
O happy path pelos dois lados
A mesma solicitação, dois fluxos. O colaborador manda do celular em dois minutos. O RH analisa e decide no painel desktop sem precisar abrir um e-mail.
O protótipo que nasceu naquela madrugada. Venha ver.
Esta é a versão que nasceu naquela madrugada. O efeito da vassoura voadora do Chaves: na época era incrível. Hoje é possível ver o que a IA amplificou bem e o que ela amplificou errado. É exatamente esse contraste que torna este case interessante.
Flow Benefits v1 — Protótipo Figma Make
Construído em uma madrugada de setembro de 2025. Dois perfis de usuário, fluxo completo de reembolso, analytics e relatórios. Tudo em modo demo: os dados são simulados, mas a estrutura é real.
Com método, diagnóstico e o produto que a madrugada de 2025 apontou o caminho.
A mesma energia da madrugada de 2025, mas agora com diagnóstico claro, decisões justificadas e Claude Code como parceiro de construção — não uma ferramenta que gera interface, mas uma inteligência que colabora enquanto questiona.
Três entregáveis. Um produto.
O Flow Benefits v2026 não é um redesign: é um produto completo com case documentado e landing de produto que pode ser vendido para empresas com esse problema hoje.
Narrativa estratégica
Os três atos, processo, decisões e métricas reais de uso após lançamento.
- UX Writing: voz de quem viveu o problema, não de quem o inventou
- Avaliação heurística aplicada: evidência visual por screenshot para cada finding
- Pensamento sistêmico: narrativa em 3 atos que demonstra visão de produto de longo prazo
- Comunicação com stakeholders: problemas técnicos traduzidos em impacto de negócio
- Senioridade: identificação crítica dos próprios erros da v1 como evidência de maturidade profissional
Produto funcionando
SaaS com dados reais, dois perfis, mobile-first, testado em dispositivo.
- Product Thinking: IA/nav (sidebar vs tabs) justificada pelo fluxo operacional real do RH
- Design System: tokens semânticos, escala tipográfica, componentes reutilizáveis
- Mobile-first execution: 375px como viewport primária, áreas de toque mínimas 44px
- Acessibilidade: WCAG AA em todos os componentes de status — produto enterprise-grade
- IA contextual: Gemma como copiloto de análise no painel RH — pensamento crítico sobre IA, não adoção acrítica
- Employee Experience: cada decisão justificada pelo impacto direto na experiência do colaborador
Landing de produto
Posiciona e vende a solução para empresas com esse problema hoje.
- Growth Design: hierarquia de mensagens orientada para o problema do comprador (RH, Financeiro)
- Business Thinking: posicionamento contra o concorrente real — planilha Excel e e-mail manual
- Copywriting estratégico: headline orientado para dor, não para feature
- Dados como argumento: métricas reais do case como prova social técnica
- Segmentação B2B: mensagens distintas para decisor (ROI) e usuário operacional (eficiência)
- CTA architecture: funil por nível de intenção com tracking de conversão como evidência de resultado
O produto. Use os dois perfis.
Alterne entre Colaborador e RH no canto superior direito. No perfil do colaborador: veja o indicador de limite, envie uma solicitação em 3 passos. No RH: analise a solicitação, aprove ou devolva com confirmação obrigatória.
A página que vende. Growth design em prática.
Não é só uma landing bonita: é uma demonstração de como penso funil, hierarquia de mensagem e conversão B2B. O concorrente real aqui não é outra solução de benefícios, é a planilha e o e-mail que a maioria das empresas ainda usa. O copy fala com dois decisores ao mesmo tempo, RH e colaborador, sem perder foco em nenhum dos dois.
Identidade visual, cuidado que se vê
A v1 não tinha logo, paleta definida nem personalidade visual. A v2026 comunica saúde, confiança e cuidado antes mesmo de o usuário abrir uma tela.
Símbolo geométrico com duas setas curvas formando um ciclo fechado — a seta da direita representando o colaborador enviando a solicitação, a seta da esquerda o retorno do benefício. O ciclo incompleto no processo manual. O Flow Benefits o fecha. As duas setas formam implicitamente F e B estilizados.
Wordmark em Source Code Pro Light 300 + Nunito para interface.
Dark mode navy profundo. Cor só onde tem função semântica — cada modalidade tem identidade própria.
IA como copiloto do RH
Ao abrir qualquer solicitação, um painel lateral mostra a análise automática: política, histórico do colaborador, CNPJ validado, nível de confiança e sugestão. A IA sempre propõe, nunca aprova. A decisão final é sempre humana.
- Valida se o valor está dentro da política de reembolso configurada
- Compara com média histórica do colaborador no mês
- Sugere decisão com justificativa e nível de confiança
- OCR de comprovante: extrai valor, data, CNPJ e prestador da foto
- Pré-preenche campos do formulário com indicador "Preenchido automaticamente"
- Valida CNPJ extraído vs. CNPJ digitado pelo colaborador
Outras melhorias mapeadas para próximos ciclos
O que muda da v1 para a v2026, e por quê
O que uma madrugada, dez anos e muita iteração ensinam sobre trabalhar com IA.
Não é sobre a ferramenta ser boa ou ruim. É sobre o que você traz para o processo antes de chegar nela.
Contexto impreciso, saída imprecisa
A IA amplifica na mesma proporção. Um briefing raso produz resultado raso, independente de qual ferramenta você usa. Isso não mudou com o Claude Code e não vai mudar com o que vier depois.
"Parece pronto" não é o mesmo que "está pronto"
O Figma Make criou algo visualmente acabado. A avaliação heurística revelou problemas reais de uso que o olhar estético não captura. Método não é burocracia: é o que separa interface de produto.
Domínio do problema vale mais que domínio da ferramenta
Escolhi o case da Caixa porque eu o conhecia de dentro. Esse entendimento foi o que me deixou identificar os erros da IA, dar feedback preciso e manter a coerência do produto. Ferramenta se aprende. O que não se aprende do zero é décadas de vivência com pessoas, processos e o que acontece quando uma experiência falha ou funciona.
A IA lê o texto. O usuário vive a experiência.
Humanos e máquinas entendem de formas diferentes. "Faz mais bonito" não é instrução — é intenção. Traduzir intenção em contexto preciso foi o maior aprendizado da madrugada, e é o que carrego para todos os projetos desde então.
"É o efeito da vassoura voadora do Chaves: na época parecia incrível, hoje pode soar bem tosco, mas o que importa é que naquele momento, quando aquilo era novidade, alguma coisa mudou em mim."
Em 2016, sem saber que o que eu fazia tinha nome de UX, ficou a sensação de ter resolvido algo real para pessoas reais. Em 2025, o Figma Make provou que eu conseguia tirar da cabeça e colocar em tela, mesmo sozinha, mesmo sem saber programar, mas o produto ainda não tinha infraestrutura para existir de verdade.
Com o Claude Code, a distância entre ideia e produto funcional mudou de escala. A IA entra onde ela agrega. Eu lidero onde o pensamento humano não tem substituto. E o que antes ficava pela metade começa a chegar até o fim.
Quer conversar sobre Design Experience, IA e produtos reais?
Estou em reposicionamento e procurando onde aplicar essa combinação. Se você acredita que contexto humano e ferramenta certa criam produtos que funcionam de verdade, me chame.