Design de produto que une sistema, pesquisa e dadosProduct design that brings systems, research and data together
Sou Pedro Alexandre, Product Designer Sênior. São mais de 15 anos em design, os últimos 4 em produtos B2B para grandes clientes, com IA no dia a dia.I'm Pedro Alexandre, a Senior Product Designer with 15+ years in design, the last 4 building B2B products for large clients, with AI in my day-to-day work.
Escolha um casePick a case
O melhor app de captura era o que já estava abertoThe best capture app was the one already open
Como uma pesquisa com usuários derrubou a premissa de um produto do agro e levou o registro de campo para dentro do WhatsApp.How user research overturned the premise of an agtech product and moved field data capture into WhatsApp.
- Confere
- Corrigir
- Correct
- Fix it
Conversation translated from Portuguese.
Resumo em 30 segundosThe 30-second version
A plataforma foi desenhada para o usuário registrar tudo no app, dentro da plantação. 📱 A pesquisa mostrou que isso não acontece: ele anota no WhatsApp, em fotos e no papel, e só lança no sistema à noite, às vezes dias depois. 🌙The platform was designed for users to log everything in the app, right in the crop field. 📱 Research showed that doesn't happen: they take notes on WhatsApp, in photos and on paper, and only enter them into the system at night, sometimes days later. 🌙
Em vez de criar mais um app para competir com o WhatsApp, desenhamos um assistente que mora dentro dele. 🎙️ Quando tem o mínimo, ele grava direto. Quando falta algo, deixa um rascunho para completar na web.Instead of building yet another app to compete with WhatsApp, we designed an assistant that lives inside it. 🎙️ When it has the minimum, it saves the record directly. When something is missing, it leaves a draft to finish on the web.
A web deixou de ser secundáriaThe web stopped being secondary
A pesquisa reposicionou a versão web como o lugar do lançamento feito à mesa. Os testes do protótipo de Relatórios orientaram a exportação em PDF e PPT.Research repositioned the web version as the place for desk-based data entry. Usability tests of the Reports prototype shaped PDF and PPT export.
A captura foi para o WhatsAppCapture moved to WhatsApp
O Assistente de Campo, um bot com IA, grava a visita direto quando tem o mínimo e deixa na web só o que faltou.The Assistente de Campo, an AI bot, saves the visit directly when it has the minimum and leaves on the web only what's missing.
O discovery virou práticaDiscovery became practice
O mesmo roteiro, de hipótese a go/no-go com o negócio, passou a guiar as frentes seguintes do produto.The same playbook, from hypothesis to go/no-go with the business, now guides the product's next fronts.
Ficha do projetoProject facts
- PapelRole
- Product Designer Sênior · Levva (consultoria), alocado na Corteva AgriscienceSenior Product Designer · Levva (consultancy), embedded at Corteva Agriscience
- ProdutoProduct
- Plataforma de gestão de campos demonstrativos: versão web, app mobile e bot no WhatsAppA platform for managing demonstration fields: web version, mobile app and a WhatsApp bot
- PeríodoTimeline
- mar/2026 – atualMar 2026 – present
- TimeTeam
- PM, líder de squad, devs de back-end/IA e front-end, QA, pesquisadora parceira e áreas de negócioPM, squad lead, back-end/AI and front-end engineers, QA, a research partner and business areas
- MétodosMethods
- Discovery, entrevistas, testes de usabilidade moderados, baselines de uso, prototipação, especificação de conversa, PRDs, go/no-goDiscovery, interviews, moderated usability tests, usage baselines, prototyping, conversation specs, PRDs, go/no-go
- FerramentasTools
- Figma, FigJam, Mixpanel, Azure DevOps, Claude Code, Figma MCP
ContextoContext
Campos demonstrativos são áreas de teste dentro de fazendas de produtores rurais. Em um pedaço da plantação, a empresa usa seus produtos; no pedaço ao lado, não usa, para comparar o resultado.Demonstration fields are test plots on farmers' land. In one part of the crop, the company uses its products; in the part next to it, it doesn't, so the results can be compared.
O representante de vendas, que neste case chamo simplesmente de usuário, monta o teste, registra cada uso do produto e cada visita de avaliação, anota quanto foi colhido e entrega ao produtor um relatório com o resultado.The sales rep, whom I'll simply call the user, sets up the test, logs each product application and each evaluation visit, records the harvest and hands the farmer a report with the results.
O relatório é a ferramenta de venda: é ele que transforma o teste em pedido.The report is the sales tool: it's what turns a test into an order.
de campos demonstrativos por safra, em várias regiões do paísof demonstration fields per crop cycle, across many regions of the country
campos acompanhados ao mesmo tempo por cada usuáriofields each user follows at the same time
é a rotina: o usuário passa o dia entre fazendas e já trabalha pelo WhatsAppis routine: users spend the day between farms and already work over WhatsApp
A pesquisa que reposicionou a webThe research that repositioned the web
Com uma pesquisadora parceira, conduzi 16 sessões moderadas com 15 usuários (abr–mai/2026), com uso real, gravação e transcrição. Cada achado ganhou código, frequência e citação, e foi ligado à pergunta do produto que ele respondia.With a research partner, I ran 16 moderated sessions with 15 users (Apr–May 2026), with real use, recording and transcription. Each finding got a code, a frequency and a quote, and was linked to the product question it answered.
Os usuários não lançam dados em campo.Users don't enter data in the field.
Eles capturam por WhatsApp, foto e papel e transferem tudo para o sistema em casa ou no hotel, às vezes dias depois. O app tinha sido desenhado para um momento que não existia.They capture on WhatsApp, in photos and on paper, and move everything into the system at home or at the hotel, sometimes days later. The app had been designed for a moment that didn't exist.
O que isso explicavaWhat it explained
“Coloco um ponto ou um asterisco só pra passar.”“I put a period or an asterisk just to get past it.”
“O app é mais pra necessidade da empresa do que pra nossa no campo.”“The app is more for the company's needs than for ours in the field.”
Quotes translated from Portuguese.
O problema não era uma tela. Era o imposto de transferência: o tempo e a qualidade que se perdem entre a visita e o registro.The problem wasn't a screen. It was the transfer tax: the time and quality lost between the visit and the record.
Relatórios: o produto final do usuárioReports: the user's final product
Como o relatório é o que o usuário entrega ao produtor, moderei testes de usabilidade do protótipo de Relatórios na web, em junho de 2026. Os testes devolveram requisitos que nenhuma reunião teria produzido:Since the report is what the user hands to the farmer, I moderated usability tests of the web Reports prototype in June 2026. The tests surfaced requirements no meeting would have produced:
- Imagem grande é o que decide o relatório.Large images are what make the report.
- Poder editar e reordenar é “tudo”.Being able to edit and reorder is “everything”.
- Exportar sem desconfigurar era a dor central. Muitos usuários tiravam print do PDF para colar no PPT.Exporting without breaking the layout was the core pain. Many users screenshotted the PDF to paste it into PPT.
- O ROI precisa poder sair do relatório. Quando o objetivo é conquistar um cliente novo, o usuário mostra primeiro o resultado e só depois fala de preço.ROI must be removable from the report. When winning a new client, the user shows the result first and only later talks price.
“Se tivesse a opção de eu não colocar ele [o ROI] no relatório, ia ajudar.”“If I had the option to leave it [the ROI] out of the report, that would help.”
O que o Ato 1 mudouWhat Act 1 changed
- A versão web passou a ser tratada como o lugar do lançamento feito à mesa e foi lançada em jul/2026.The web version became the place for desk-based entry and launched in Jul 2026.
- Campos obrigatórios que pediam dados inexistentes no momento do cadastro foram revistos.Mandatory fields that asked for data unavailable at setup were revised.
- Relatórios na web saíram com exportação em PDF e PPT e com paridade com o app.Web Reports shipped with PDF and PPT export, on par with the app.
Nas conversas no escritório, usuários relatam que lançar pela web é mais rápido. Esse ganho ainda não tem medição formal.In office conversations, users say entering data on the web is faster. That gain hasn't been formally measured yet.
Assistente de Campo: levar a captura para o WhatsAppAssistente de Campo: bringing capture into WhatsApp
A web melhorou o trabalho de mesa, mas não mudou o hábito: o celular continuou sendo o canal mais usado para cadastrar campos. A resposta não era empurrar o usuário para a mesa, e sim encontrá-lo onde ele já estava.The web improved desk work but didn't change the habit: mobile remained the most used channel for adding fields. The answer wasn't to push users to the desk, but to meet them where they already were.
Uma captura de ~30 segundos no celular, simples a ponto de competir com o WhatsApp, pré-preenche um rascunho na web. A sessão de 30 minutos à noite vira uma revisão de 5.A ~30-second capture on the phone, simple enough to compete with WhatsApp, pre-fills a draft on the web. The 30-minute session at night becomes a 5-minute review.
O risco que derrubaria a aposta: se a maior parte do formulário depende de consulta (dose exata, data que só quem aplicou o produto sabe), a captura reduz o trabalho de mesa, mas não o elimina.The risk that would sink the bet: if most of the form depends on lookups (exact rate, a date only the applicator knows), capture reduces desk work but doesn't eliminate it.
Decidir antes de coletarDecide before collecting
Quebrei a incerteza em três estudos, cada um com uma pergunta só.I split the uncertainty into three studies, each with a single question.
Diário de capturaCapture diary
O que o usuário registra em campo, e o que se perde até chegar ao sistema?What does the user record in the field, and what's lost before it reaches the system?
Diário no próprio WhatsApp · 5–6 usuários · 2 semanasDiary in WhatsApp itself · 5–6 users · 2 weeks
Pulso de conectividadeConnectivity pulse
Tem sinal de celular no campo? Quanto tempo passa até o lançamento?Is there phone signal in the field? How long until data entry?
4 perguntas para os 15 participantes4 questions to the 15 participants
Validação de conceitoConcept validation
O usuário trocaria o WhatsApp por isso?Would the user swap WhatsApp for this?
Storyboard e entrevista, com as barreiras perguntadas antes da adoçãoStoryboard and interview, asking about barriers before adoption
Cada resultado possível já tinha uma decisão de go/no-go escrita antes do dado:Every possible result already had a go/no-go decision written before the data:
O conceito v0 e o pivôThe v0 concept and the pivot
O conceito v0The v0 concept
Captura dentro do app em cinco telas: início, localização por GPS, registro, rascunho e confirmação. Textos escritos para o primeiro uso: orientar, tranquilizar sobre sinal e salvamento, explicar por que pedir GPS e mostrar o próximo passo.In-app capture across five screens: home, GPS location, capture, draft and confirmation. Copy written for first use: guide, reassure about signal and saving, explain why GPS is needed and show the next step.
Atacar a própria ideiaAttacking my own idea
Uma revisão adversarial mostrou que o formulário de recrutamento media conectividade, uma pergunta que só importa depois de saber se vale construir. Ele foi trocado por 4 perguntas de necessidade, enviadas a toda a base de usuários.An adversarial review showed the recruitment form measured connectivity, a question that only matters after knowing whether it's worth building. It was replaced by 4 need questions sent to the whole user base.
O pivôThe pivot
Em vez de substituir o WhatsApp, entrar nele.Instead of replacing WhatsApp, move into it. O WhatsApp já resolvia o que o app teria de construir: está sempre aberto, aceita áudio e foto e guarda a mensagem quando não há sinal.WhatsApp already solved what the app would have to build: it's always open, takes audio and photos, and holds messages when there's no signal.
Um serviço em dois canaisOne service, two channels
O bot grava direto quando tem o mínimo, e a web só cuida da exceção. O usuário não deveria abrir a web para o que deu certo, só para o que faltou.The bot saves directly when it has the minimum; the web only handles the exceptions. Users shouldn't open the web for what went right, only for what's missing.
IdentidadeIdentity
- O bot reconhece o usuário pelo número de celular, vinculado à conta corporativa.The bot recognizes users by their phone number, linked to their corporate account.
- Ele só consulta o que aquele usuário já pode ver no sistema.It only queries what that user can already see in the system.
- O acesso é validado com o login corporativo.Access is validated with the corporate login.
Design conversacional: projetar comportamento, não falasConversation design: designing behavior, not lines
Escrevi a especificação da conversa: quando o bot grava, quando ele guarda um rascunho e como ele responde.I wrote the conversation spec: when the bot saves, when it keeps a draft and how it replies.
O mínimo para gravar diretoThe minimum to save directly
- SempreAlways
- Usuário identificado, campo resolvido em um único cadastro, data da visitaUser identified, field resolved to a single record, visit date
- Visita técnicaTechnical visit
- Uma anotação em voz ou texto, ou uma fotoA note in voice or text, or a photo
- Uso de produtoProduct use
- Produto identificado e dose (quantidade usada) informada, com confirmação da doseProduct identified and rate (amount used) given, with the rate confirmed
- AvaliaçãoEvaluation
- Tipo de avaliação e ao menos uma medição ou observaçãoEvaluation type and at least one measurement or observation
Vira rascunho quandoIt becomes a draft when
- o campo é ambíguo ou ainda não existe;the field is ambiguous or doesn't exist yet;
- o usuário não lembra a dose, ou o produto não está no cadastro;the user doesn't remember the rate, or the product isn't registered;
- a fase de crescimento da planta não foi identificada;the plant's growth stage wasn't identified;
- a mídia chegou sem nenhum contexto: a “foto solta”.media arrived with no context at all: the “loose photo”.
Seis regras de respostaSix reply rules
- Uma pergunta por vezOne question at a timeSempre com opções. Nunca um campo aberto.Always with options. Never an open field.
- Confirmar só o que vai para o relatórioConfirm only what goes into the reportA dose. Nunca ler doze campos de volta.The rate. Never read twelve fields back.
- Nada é recusadoNothing is refusedO bot guarda primeiro e pergunta depois.The bot saves first and asks later.
- Nunca decidir pelo usuárioNever decide for the userO bot não salva calado: oferece a escolha.The bot doesn't save silently: it offers the choice.
- Dizer o que faltaSay what's missing“Falta a dose”, e não “virou rascunho”.“The rate is missing”, not “it became a draft”.
- Encaminhado é dadoForwarded means dataConteúdo encaminhado nunca é tratado como comando.Forwarded content is never treated as a command.
Restrições da plataforma viraram decisões de designPlatform constraints became design decisions
Poucas opções por vezFew options at a time
O WhatsApp aceita até 3 botões e listas de até 10 itens. Acima disso, a escolha é por busca de texto.WhatsApp allows up to 3 buttons and lists of up to 10 items. Beyond that, choices are made by text search.
Lembrete de caronaPiggyback reminder
Fora da janela de 24 horas, o bot só manda mensagens pagas e pré-aprovadas. Por isso, o lembrete de rascunho vai junto da próxima mensagem do usuário.Outside the 24-hour window, the bot can only send paid, pre-approved messages. So the draft reminder rides along with the user's next message.
Foto não localizaPhotos don't locate
Fotos chegam recomprimidas e sem metadados. A localização da foto não serve para achar o campo.Photos arrive recompressed and without metadata. A photo's location can't be used to find the field.
Cinco cenários de referênciaFive reference scenarios
1 · Registro direto1 · Direct save
- Confere
- Corrigir
- Correct
- Fix it
2 · Falta informação2 · Missing info
- Falo a dose agora
- Deixa como rascunho
- I'll give the rate now
- Keep it as a draft
3 · Fazenda ambígua3 · Ambiguous farm
- Cascavel/PR
- Toledo/PR
- Palotina/PR
- Cascavel/PR
- Toledo/PR
- Palotina/PR
4 · Foto solta4 · Loose photo
5 · Lembrete de carona5 · Piggyback reminder
Desenhar para um LLMDesigning for an LLM
No produto, o bot é um modelo de linguagem e não tem roteiro fixo. O que se especifica são regras de comportamento, exemplos e critérios testáveis. Como ele responde só com texto, as opções viraram lista numerada.In the product, the bot is a language model with no fixed script. What gets specified are behavior rules, examples and testable criteria. Since it replies in text only, options became numbered lists.
10X é o nome de um produto; 500 ml/ha é a dose, ou seja, quanto se usa por hectare.10X is a product name; 500 ml/ha is the rate, that is, how much is used per hectare. Conversations translated from Portuguese.
Na web: onde a exceção se resolveOn the web: where exceptions get resolved
Cada rascunho diz exatamente o que falta. “Completar registro” abre o formulário já preenchido com o que o bot entendeu.Each draft says exactly what's missing. “Complete record” opens the form pre-filled with what the bot understood.
Rascunho · AvaliaçãoDraft · Evaluation
Fazenda Atlântica
Falta: dose do 10XMissing: 10X rate
Completar registroComplete recordRascunhos por tipoDrafts by type
Avaliações e depoimentos em seções separadas, com a linha “Falta:” em cada card. Fotos sem vínculo ficam numa galeria para usar depois.Evaluations and testimonials in separate sections, with a “Missing:” line on each card. Unlinked photos go to a gallery for later use.
Estado vazio como recompensaEmpty state as a reward
A biblioteca só tinha ilustrações de erro e de “não encontrado”. Adaptei uma delas para o “Tudo em dia”.The library only had error and “not found” illustrations. I adapted one of them into “All caught up”.
Caminhos infelizesUnhappy paths
- Campo já finalizado: um estado de página em vez de um modal. O modal não tem link, não sobrevive a um refresh e prende o usuário sobre um formulário que ele nunca vai conseguir enviar.Field already closed: a page state instead of a modal. A modal has no link, doesn't survive a refresh and traps the user over a form they'll never be able to submit.
- Sair do rascunho: o build usava um “Cancelar avaliação?” que avisava que tudo seria perdido. Propus “Salvar rascunho e sair?”, uma alternativa para quando o back-end não salva parcialmente, e uma regra: sem alteração, sem modal.Leaving a draft: the build used a “Cancel evaluation?” modal warning that everything would be lost. I proposed “Save draft and leave?”, an alternative for when the back end can't save partially, and a rule: no changes, no modal.
Depoimentos e consentimento de imagemTestimonials and image consent
Depoimentos de produtores (vídeo, foto e texto) viram material de comunicação. Eles só podem ser publicados com a autorização de uso de imagem de cada pessoa que aparece.Farmer testimonials (video, photo and text) become communication material. They can only be published with an image-use authorization from every person who appears.
O que estava quebradoWhat was broken
A autorização ficava presa ao campo. Depois do fechamento, não havia como registrar o depoimento.Authorization was tied to the field. After closing, there was no way to record the testimonial.
Chegavam provas inválidas: prints de tela no lugar do PDF assinado.Invalid proofs came in: screenshots instead of the signed PDF.
Todo PDF assinado caía na nuvem com o mesmo nome, e alguém os renomeava à mão a cada ~15 dias.Every signed PDF landed in the cloud with the same name, and someone renamed them by hand every ~15 days.
Restrições fixasFixed constraints
Como decidimos. Facilitei uma sessão de decisão ponto a ponto com o time. Ela gerou 9 decisões numeradas, depois corrigidas a partir da transcrição da reunião com o aprovador da área de comunicação. O fluxograma passou por três versões e os wireframes por duas.How we decided. I facilitated a point-by-point decision session with the team. It produced 9 numbered decisions, later corrected from the transcript of the meeting with the communications approver. The flowchart went through three versions and the wireframes through two.
O modelo finalThe final model
- A autorização é por pessoa, vinculada à fazenda e reaproveitada em todos os campos dela. Vale até a pessoa pedir a revogação.Authorization is per person, linked to the farm and reused across all its fields. It's valid until the person asks to revoke it.
- Quem dá o depoimento precisa de autorização mesmo que não apareça.Whoever gives the testimonial needs an authorization even if they don't appear.
- O depoimento só chega à aprovação quando todos estão autorizados. Antes disso, fica como “Sem autorização”, visível só para quem o registrou.A testimonial only reaches approval when everyone is authorized. Until then it stays as “No authorization”, visible only to whoever recorded it.
- O bot mostra quem já assinou naquela fazenda e pede só o que falta. Ele salva um arquivo por pessoa, com nome padronizado (fazenda · pessoa · data), o que acaba com a renomeação manual.The bot shows who has already signed at that farm and asks only for what's missing. It saves one file per person with a standard name (farm · person · date), which ends the manual renaming.
- O vídeo é enviado pela web, porque o WhatsApp comprime. Para vídeo, o bot não pede texto: as palavras do produtor já estão na gravação.Video is sent on the web, because WhatsApp compresses it. For video, the bot doesn't ask for text: the farmer's words are already in the recording.
Back-office: o que o admin não pode fazerBack office: what the admin can't do
A tela em que o admin gerencia usuários e o número de WhatsApp que o bot reconhece. O que fica de fora também é especificação.The screen where admins manage users and the WhatsApp number the bot recognizes. What's left out is part of the spec too.
A conta perde o acesso e o bot para de responder. O histórico e os rascunhos são mantidos.The account loses access and the bot stops replying. History and drafts are kept.
Digite o nome completo para confirmarType the full name to confirm- Não existe excluir usuário. A ação mais forte é inativar, e ela é reversível.There's no delete user. The strongest action is deactivate, and it's reversible.
- Remover o número não apaga a conta: só desvincula o celular.Removing the number doesn't delete the account: it only unlinks the phone.
- Inativar pede confirmação reforçada: o admin digita o nome completo da pessoa.Deactivating requires a stronger confirmation: the admin types the person's full name.
- Adicionei “Reativar” para fechar o ciclo e marquei para validação.I added “Reactivate” to close the loop and flagged it for validation.
- Ficaram em aberto quem pode inativar e se o sistema guarda um log de auditoria.Still open: who can deactivate, and whether the system keeps an audit log.
Design system: tratar o produto como sistemaDesign system: treating the product as a system
No portal de RH do outro case, eu construí e mantive o design system. Aqui, o desafio foi o inverso: projetar sobre uma biblioteca que não é minha, sem quebrá-la, e deixá-la maior a cada fluxo.On the HR portal in the other case, I built and maintained the design system. Here, the challenge was the opposite: designing on a library that isn't mine, without breaking it, and making it richer with each flow.
Padrões reaproveitadosReused patterns
- Card de rascunho: a mesma anatomia para avaliações e depoimentos, com progresso em variantes.Draft card: the same anatomy for evaluations and testimonials, with progress as variants.
- Sair de um rascunho: um modal único, com ícone e botões que mudam conforme a intenção.Leaving a draft: a single modal, with icon and buttons that change with intent.
- Bloqueio por regra: estado de página, na anatomia das páginas de erro.Rule-based block: a page state, using the anatomy of the error pages.
- Balões de WhatsApp em variantes, para desenhar conversas com a precisão das telas.WhatsApp bubbles as variants, to design conversations as precisely as screens.
Lacunas e propostasGaps and proposals
- Sem modal, toast nem alerta na biblioteca: montei a partir de primitivos e registrei a lacuna.No modal, toast or alert in the library: I built them from primitives and logged the gap.
- Propus uma variante “Depoimento” no componente de status e a publicação da ilustração “Tudo em dia”.I proposed a “Testimonial” variant in the status component and publishing the “All caught up” illustration.
Disciplina de sistemaSystem discipline
- Tokens de cor, tipografia, espaçamento e estados extraídos para texto logo no início.Color, type, spacing and state tokens extracted to text at the start.
- Tela já construída entra no fluxo como cópia exata. Mudança vira pedido anotado, não redesenho.Screens already built go into flows as exact copies. Changes become annotated requests, not redesigns.
- Fluxos anotados no canvas com cartões de Regra, Dúvida, Componente e Evento.Flows annotated on the canvas with Rule, Question, Component and Event cards.
Discovery de ponta a ponta, com go/no-goEnd-to-end discovery, with go/no-go
O roteiro do Assistente virou prática do produto.The Assistente's playbook became product practice.
- Pergunta de negócioBusiness question
- Baseline de usoUsage baseline
- HipótesesHypotheses
- EntrevistasInterviews
- Go/no-go com o negócioGo/no-go with the business
- PRD e cards no boardPRD and board cards
Histórico da fazendaFarm history
Baseline de uso e protótipo com 4 cenários, inclusive fazenda sem campos e sem ROI ainda.Usage baseline and a prototype with 4 scenarios, including a farm with no fields and no ROI yet.
Decisão: v1 só na web, como uma aba na página da fazenda, com métricas de sucesso definidas no PRD.Decision: v1 web-only, as a tab on the farm page, with success metrics defined in the PRD.
Avaliações climáticasClimate evaluations
Muita gente abriu o clima ao menos uma vez em 2026, mas pouca gente voltou nos meses seguintes.Many people opened the climate view at least once in 2026, but few came back in the following months. A auditoria das telas achou números que não fecham.The screen audit found numbers that didn't add up.
Decisão: antes de adicionar métricas, recuperar a confiança nas que já existem.Decision: before adding metrics, restore trust in the existing ones.
Outras culturasOther crops
No café, o ganho médio aparecia dezenas de vezes maior que o real:For coffee, the average gain showed up dozens of times higher than the real one: os usuários digitavam quilos onde o sistema pedia sacas.users typed kilos where the system asked for bags.
Decisão: unidade de medida certa para cada cultura e uma classificação da plantação (produzindo, em formação ou em recuperação).Decision: the right unit for each crop and a crop-status classification (producing, establishing or recovering).
Nenhuma decisão de produto nasce de opinião. Sem go/no-go escrito, não começa design nem construção.No product decision comes from opinion. Without a written go/no-go, neither design nor build starts.
Desse programa saiu o Método SAFRA, um framework de discovery em cinco fases: Situar, Apurar, Formular, Refutar e Ativar.This program produced the SAFRA Method (Portuguese for “harvest”), a five-phase discovery framework: situate, verify, formulate, refute and activate.
Dados: baselines de uso e métricas de sucessoData: usage baselines and success metrics
Baseline antes da soluçãoBaseline before the solution
Cada discovery começa pelo uso real no Mixpanel: quem usa, com que frequência e quem parou. A lista de entrevistados sai daí.Every discovery starts from real usage in Mixpanel: who uses it, how often and who stopped. The interview list comes from there.
Métricas de sucesso no PRDSuccess metrics in the PRD
Toda funcionalidade nova sai com os eventos que dizem se ela funcionou: início, sucesso, falha e as interações principais.Every new feature ships with the events that tell whether it worked: start, success, failure and key interactions.
Auditoria da instrumentaçãoInstrumentation audit
O catálogo de eventos não mostrava tudo o que o produto registrava. Cada evento passou a ser validado contra os dados brutos.The event catalog didn't show everything the product tracked. Each event is now validated against the raw data.
IA no dia a diaAI in day-to-day work
Uso Claude Code e Figma MCP como par de trabalho, com agentes de papéis definidos (analista, UX, desenvolvedor) sobre uma base versionada do produto. A decisão continua sendo minha e do time: o agente rascunha e contesta.I use Claude Code and Figma MCP as a working partner, with agents in defined roles (analyst, UX, developer) on a versioned product knowledge base. Decisions stay with me and the team: the agent drafts and challenges.
ProtótiposPrototypes
Fluxos montados direto no Figma via Figma MCP, com componentes da biblioteca e interações de protótipo.Flows built directly in Figma via Figma MCP, with library components and prototype interactions. Protótipos em HTML para testes.HTML prototypes for testing.
EspecificaçõesSpecs
PRDs de funcionalidade abertos como pull request no repositório do time, especificação da conversa do bot e cards no Azure DevOps.Feature PRDs opened as pull requests in the team repository, the bot's conversation spec and Azure DevOps cards.
AuditoriasAudits
Telas do Figma e extração de tokens, telas de clima em homologação, revisão de PRDs e instrumentação do Mixpanel.Figma screens and token extraction, climate screens in staging, PRD reviews and Mixpanel instrumentation.
Ferramentas internasInternal tools
Dashboard de produto,Product dashboard, boards de discovery no FigJam e consultas recorrentes ao Mixpanel.discovery boards in FigJam and recurring Mixpanel queries.
Resultados e statusResults and status
- Pesquisa e reposicionamento da webResearch and web repositioningConcluídoDone
- Relatórios na web, com PDF e PPTWeb Reports, with PDF and PPTLançadoLaunched
- Consentimento de imagemImage consentValidado com a comunicaçãoValidated with communications
- Gestão de usuáriosUser managementDesenhado e especificadoDesigned and specified
- Bot: avaliaçõesBot: evaluationsEm desenvolvimento e homologaçãoIn development and staging
- Bot: depoimentosBot: testimonialsDesenvolvido, em homologaçãoBuilt, in staging
Impacto até aquiImpact so far
- O time evitou construir, com capricho, um app de captura para competir com o WhatsApp.The team avoided carefully building a capture app to compete with WhatsApp.
- A pesquisa virou requisito: a web passou a ser o lugar da mesa e campos obrigatórios foram revistos.Research became requirements: the web became the desk's place and mandatory fields were revised.
O que vamos medir no AssistenteWhat we'll measure in the Assistente
- Registros gravados direto × rascunhosRecords saved directly × drafts
- Conclusão dos rascunhos e tempo até concluirDraft completion and time to complete
- Tempo entre a visita e o registroTime between visit and record
- Campos com relatório geradoFields with a generated report
- Depoimentos aprovados sem retrabalho de autorizaçãoTestimonials approved without authorization rework
O que aprendiWhat I learned
O momento importa mais que a telaThe moment matters more than the screen
Nenhum ajuste de interface resolveria um produto desenhado para o momento errado.No interface tweak would fix a product designed for the wrong moment.
A decisão vem antes do dadoThe decision comes before the data
Com o go/no-go escrito antes, o pivô deixou de ser derrota e virou um desfecho previsto.With go/no-go written in advance, the pivot stopped being a defeat and became an expected outcome.
Bot com LLM é regra, não roteiroAn LLM bot is rules, not a script
Especifica-se comportamento, exemplos e testes, não falas.You specify behavior, examples and tests, not lines.
Restrição é material de designConstraints are design material
A janela de 24 horas do WhatsApp virou o lembrete de carona.WhatsApp's 24-hour window became the piggyback reminder.
Design system em biblioteca alheiaDesign systems in someone else's library
Padrão reaproveitado e lacuna documentada valem tanto quanto componente novo.A reused pattern and a documented gap are worth as much as a new component.
Consentimento é design de serviçoConsent is service design
Jurídico, comunicação, campo e sistema precisaram sentar à mesma mesa.Legal, communications, field and system had to sit at the same table.
O que este case mostraWhat this case shows
Design systems
Padrões reaproveitados, componentes com variantes, tokens em texto, lacunas e propostas à biblioteca.Reused patterns, components with variants, tokens in text, gaps and proposals to the library.
Produto e pesquisaProduct and research
16 sessões moderadas, testes de Relatórios, gatilhos de go/no-go, protótipos e PRDs.16 moderated sessions, Reports tests, go/no-go triggers, prototypes and PRDs.
DadosData
Baselines antes de cada discovery, métricas de sucesso no PRD, auditoria da instrumentação.Baselines before every discovery, success metrics in the PRD, instrumentation audit.
Design conversacionalConversation design
Regras de comportamento para um bot com LLM, cenários e restrições da plataforma.Behavior rules for an LLM bot, scenarios and platform constraints.
IA no processoAI in the process
Claude Code e Figma MCP para protótipos, especificações, auditorias e ferramentas internas.Claude Code and Figma MCP for prototypes, specs, audits and internal tools.
FacilitaçãoFacilitation
Sessões de decisão com registro numerado, do jurídico ao campo.Decision sessions with numbered records, from legal to the field.
Construindo o design system por trás de um novo portal de RHBuilding the design system behind a new HR portal
Product Designer num time de design system com 2 a 3 designers e, depois, responsável pelo sistema.Product Designer on a 2–3 designer design system team, later the system's owner.
Componentes recriados a partir dos tokens, das camadas e da anatomia reais do design system, sem a identidade visual da marca e com dados fictícios, para respeitar a confidencialidade do cliente.Components recreated from the design system's real tokens, layers and anatomy, without the brand's visual identity and with fictional data, to respect client confidentiality.
Um portal, cinco squads, duas plataformasOne portal, five squads, two platforms
A empresa estava reconstruindo o portal de RH, a plataforma B2B em que empresas clientes fazem pedidos e gerenciam os benefícios dos colaboradores. Cinco squads iam construí-lo em paralelo, na web e no mobile.The company was rebuilding its HR portal, the B2B platform where client companies order and manage employee benefits. Five squads would build it in parallel, on web and mobile.
Sem uma base comum, cada squad resolveria os mesmos problemas de interface do seu jeito. Por isso o design system veio primeiro, e o MVP do portal foi lançado sobre ele em agosto de 2023.Without a shared foundation, each squad would solve the same UI problems in its own way. So the design system came first, and the portal MVP launched on top of it in August 2023.
“Design system não é um projeto, e sim um produto usado por outros produtos.”“A design system isn't a project. It's a product used by other products.”
Da construção da base à responsabilidade pelo sistemaFrom building the foundations to owning the system
Construir a base e os componentes do MVPBuild the foundations and the MVP components
Responsável pela manutenção e evolução do sistemaOwn maintenance and evolution
- Um dos 2 a 3 product designers do time de design system, lado a lado com engenheiros de front-end.One of 2–3 product designers on the design system team, working side by side with front-end engineers.
- Fase 1: fundamentos, tokens e componentes para o MVP do portal.Phase 1: foundations, tokens and components for the portal MVP.
- Fase 2: responsável pela manutenção e evolução do sistema, apoiando as squads que o usavam.Phase 2: owner of the system's maintenance and evolution, supporting the squads that used it.
- Apresentei com outro designer do time de produtos a palestra interna “Design System na visão do Designer”, compartilhando o processo com designers e engenheiros.Co-presented the internal talk “Design System through the designer's lens” with another designer from the product team, sharing the process with designers and engineers.
Atomic Design, seis fases, sem linha de chegadaAtomic Design, six phases, no finish line
- ObjetivosObjectives
- PesquisaResearch
- Estilos visuaisVisual styles
- ComponentesComponents
- Documentação e testesDocumentation & testing
- Implementação e manutenção ∞Implementation & maintenance ∞
SubatômicoSub-atomic
Cor, tipografia, espaçamento: o que vira token.Color, type, spacing: what becomes a token.
ÁtomosAtoms
Botão, campo de texto, label.Button, text field, label.
MoléculasMolecules
Label “E-mail” + campo de texto.“Email” label + text field.
OrganismosOrganisms
Formulário de login.Login form.
Templates
Estrutura de uma tela de formulário.Structure of a form screen.
PáginasPages
Tela de login com conteúdo real.Login screen with real content.
8 etapas e 4 checkpoints com a engenharia8 steps and 4 checkpoints with engineering
- 1Proposta de designDesign proposal
- 2Componente base e variaçõesBase component and variants
- ✓Refinamento UI + DevRefinement UI + Dev
- 3Tokens Sys e CompSys and Comp tokens
- 4Tokens Studio, aplicado no FigmaTokens Studio, applied in Figma
- 5Motion
- ✓Refinamento UI + DevRefinement UI + Dev
- 6Documentação dos tokensToken documentation
- 7Documentação do componenteComponent documentation
- ✓Revisão UX/UIUX/UI review
- 8Planilha de documentaçãoDocumentation sheet
- ✓Revisão DevDev review
- PUBLICADOPUBLISHEDStorybook
A engenharia participou desde a primeira proposta, não só no handoff.Engineers were in the loop from the first proposal, not only at handoff.
Mude uma decisão uma vez, ou mude só um componenteChange a decision once, or change one component only
Um valor estático: hex, família de fonte, peso.A static value: hex, font family, weight.
ds-colors-ref-semantic-error-40Aponta para um Ref conforme o contexto, como o tema.Points to a Ref by context, like the theme.
ds-colors-sys-alert-errorValores de um componente: container, texto, ícone, estados.Values for one component: container, text, icon, states.
ds-colors-comp-alert-errorMudar um token Ref ou Sys atualiza o sistema inteiro. Mudar um token Comp afeta um único componente. É o mesmo modelo do Material Design 3 (md.ref · md.sys · md.comp).Changing a Ref or Sys token updates the whole system. Changing a Comp token touches a single component. Same model as Material Design 3 (md.ref · md.sys · md.comp).
Uma gramática para todos os tokensOne grammar for every token
{prefix}-{themeKey}-{scope}-{name}-{variant}-{state}-{element}
dyprefix-
colorsthemeKey-
sysscope-
inputname-
textvariant-
hovered-highlightstate-
bgelement
Partes que não se aplicam ficam de fora:Parts that don't apply are left out:
No sys, o papel é cta (chamada para ação); no comp, o componente é btn. O papel no sistema não depende de qual componente o usa.In sys, the role is cta (call to action); in comp, the component is btn. The system role doesn't depend on which component uses it.
O número no nome é uma posição na escala, não o valor em pixels. Passos intermediários, como o 35, cabem sem renomear os outros.The number in the name is a position on the scale, not the pixel value. In-between steps, like 35, fit without renaming the others.
Paletas e escalas da camada RefRef-layer palettes and scales
Cada cor semântica tem tons de texto (20), destaque (30/40) e fundo (80/90). A paleta da marca fica de fora desta página.Each semantic color has text (20), accent (30/40) and background (80/90) tones. The brand palette is left out of this page.
base#1473E6
20#0C2D55
30#124482
80#D9E8FB
90#CEE1F8
base#34BC6E
20#0C552C
30#128242
80#DEF4E8
90#CEF8E0
base#FF832B
20#663D00
40#CC7A00
80#FFEBDD
90#FFEBCC
base#DA1E28
20#550C10
40#AF1820
80#F9DBDC
90#F8CED0
0#000000
5#2E3238
10#444B55
20#5B6371
30#6D7787
35#737C8B
40#8E96A4
50#AAB1BB
60#B9BEC5
70#CFD3D8
80#DBDDE1
90#F0F1F3
95#F8F8F9
100#FFFFFF
TipografiaTypography
Benefícios para 132 colaboradoresBenefits for 132 employees
Os créditos chegam em até 24 horas.Credits arrive within 24 hours.
Títulos usam a fonte proprietária da marca, substituída aqui; o texto usa Ubuntu.Titles use the brand's proprietary typeface, replaced here; body text uses Ubuntu.
fontSizes-ref-30Aa12pxfontSizes-ref-35Aa14pxfontSizes-ref-40Aa16pxfontSizes-ref-45Aa18pxfontSizes-ref-60Aa24pxfontSizes-ref-80Aa32pxfontSizes-ref-120Aa48px
EspaçamentoSpacing
space-ref-104pxspace-ref-208pxspace-ref-3012pxspace-ref-4016pxspace-ref-6024pxspace-ref-8032pxspace-ref-12048pxspace-ref-16064pxspace-ref-20080px
Base de 4px, de 2px a 200px.4px base, from 2px to 200px.
Raios e sombrasRadii and shadows
shadows-ref-1shadows-ref-2shadows-ref-3Botões e campos usam o raio ribbon (pílula); alertas, o ref-40.Buttons and fields use the ribbon radius (pill); alerts use ref-40.
Tokens Studio → JSON → Storybook
- Sets
- colors
- theme
- components
- Themes
- light
- dark
{
"ds-colors-ref-semantic-error-40": {
"value": "#AF1820", "type": "color" },
"ds-colors-sys-alert-error": {
"value": "{ds-colors-ref-semantic-error-40}" },
"ds-colors-comp-alert-error": {
"value": "{ds-colors-sys-alert-error}" }
}
Tokens referenciam outros tokens, e é isso que faz Ref → Sys → Comp funcionar.Tokens reference other tokens, which is what makes Ref → Sys → Comp work.
Style Dictionary transforma o JSON em variáveis CSS. Componentes em React com Stitches, Radix UI e React Aria, publicados no Storybook com a seção Design Tokens: Refs, Sys, Comp.Style Dictionary turns the JSON into CSS variables. React components built with Stitches, Radix UI and React Aria, published in Storybook with a Design Tokens section: Refs, Sys, Comp.
O mesmo JSON como fonte da verdade.Same JSON as the source of truth.
Uma fonte da verdade para as duas stacks. Os componentes desta página usam essas mesmas variáveis, nas três camadas.One source of truth for both stacks. The components on this page use these same variables, in all three layers.
O mesmo nome no Figma, nos tokens e no códigoSame name in Figma, tokens and code
Barra de destaque, título, descrição e fechar. A barra e o ícone de fechar usam o tom de destaque; o texto, o tom 20; o fundo, o 90.Accent bar, title, description and close. The bar and close icon use the accent tone; text uses 20; the background uses 90.
As props no Storybook espelham o FigmaProps in Storybook mirror Figma
A variante opacity no código corresponde aos tokens …-bg-opacity no design: um vocabulário só, de ponta a ponta.The opacity variant in code maps to the …-bg-opacity tokens in design: one vocabulary end to end.
| Prop | Comp | Sys | Ref |
|---|---|---|---|
| colors | ds-colors-comp-alert-error | ds-colors-sys-alert-error | ds-colors-ref-semantic-error-40 |
| colors | ds-colors-comp-alert-error-text | ds-colors-sys-alert-error-text | ds-colors-ref-semantic-error-20 |
| colors | ds-colors-comp-alert-error-bg-opacity | ds-colors-sys-alert-error-bg-opacity | ds-colors-ref-semantic-error-90 |
| colors | ds-colors-comp-alert-error-filled | ds-colors-sys-alert-error-filled | ds-colors-ref-semantic-error |
Tudo o que a engenharia precisa para construir sem adivinharEverything an engineer needs to build it without guessing
EstadosStates
AnatomiaAnatomy
- Label, fora do campo · 12pxLabel, outside the field · 12px
- Container em pílulaPill container
- Valor · 16pxValue · 16px
- Ícone de visibilidade (viewOn / viewOff)Visibility icon (viewOn / viewOff)
- Mensagem de apoio: assistive, error ou successHelper message: assistive, error or success
Specs
| Comp | Sys | Ref |
|---|---|---|
ds-colors-comp-pwd-enabled-border | ds-colors-sys-input-enabled-border | neutral-50 |
ds-colors-comp-pwd-focused-border | ds-colors-sys-input-focused-border | neutral-5 |
ds-colors-comp-pwd-error-border | ds-colors-sys-input-error-border | semantic-error |
ds-radii-comp-pwd-default | ds-radii-sys-input-default | ribbon |
A mensagem de apoio usa os tokens alert-input: o mesmo vocabulário de feedback do Alert, aplicado ao campo.The helper message uses the alert-input tokens: the Alert's feedback vocabulary, applied to the field.
Um botão, dois estilos, todos os estadosOne button, two styles, every state
Pílula de 48px, texto de 18px, padding 8 × 24. No sistema real a cor de ação é a da marca; aqui ela foi trocada por um neutro do próprio sistema.48px pill, 18px label, 8 × 24 padding. In the real system the action color is the brand color; here it's swapped for one of the system's own neutrals.
Props
| Comp | Sys | Ref |
|---|---|---|
ds-colors-comp-btn-enabled | ds-colors-sys-cta-enabled | cor da marca*brand color* |
ds-colors-comp-btn-disabled | ds-colors-sys-cta-disabled | neutral-80 |
ds-colors-comp-btn-disabled-content | ds-colors-sys-cta-disabled-content | neutral-35 |
ds-radii-comp-btn-default | ds-radii-sys-cta-default | ribbon |
* Nesta página, neutral-5, com neutral-10 no hover e neutral-0 no pressionado.* On this page, neutral-5, with neutral-10 on hover and neutral-0 when pressed.
Onde designers, engenheiros e negócio encontram tudoWhere designers, engineers and stakeholders can all find it
Figma
Um arquivo por componente, mais uma tabela de tokens para cada.One file per component, plus a token table for each.
Planilha de documentaçãoDocumentation sheet
Um registro central de cada componente e do seu status.One central record of every component and its status.
| ComponenteComponent | Docs | Storybook |
|---|---|---|
| AlertFeedback | ProntoDone | PublicadoPublished |
| InputPassword | ProntoDone | PublicadoPublished |
| Button | ProntoDone | PublicadoPublished |
| Checkbox | ProntoDone | Em revisãoIn review |
Storybook
O sistema vivo, organizado em três grupos.The living system, organized in three groups.
- Docs
- Design tokens
- Refs
- Sys
- Comp
- Components
- Surfaces
- Typography
- Feedback › AlertFeedback
- Data Display
- Forms
- Layout
- Navigation
O design system é a ponte entre design e códigoThe design system is the bridge between design and code
- Entender como o outro lado trabalha antes de trabalhar junto.Know how the other side works before working together.
- Compartilhar as regras de negócio do produto, para que as habilidades se somem.Share the product's business rules, so skills add up.
- Desenhar cada componente pensando em como a engenharia vai recebê-lo.Design each component thinking about how engineering will receive it.
- Conversar durante a execução, não só no handoff.Talk during execution, not only at handoff.
- Cocriar: resolver juntos limites técnicos e comportamento leva a respostas melhores.Co-create: solving technical limits and behavior together leads to better answers.
Checklist de componente novoNew component checklist
- Proposta de design aprovadaDesign proposal approved
- Componente base com todas as variantes e estadosBase component with all variants and states
- Refinamento com a engenhariaRefinement with engineering
- Tokens Sys e Comp na convenção ds-, apontando para Refs existentesSys and Comp tokens in the ds- convention, pointing to existing Refs
- Tokens no Tokens Studio e aplicados: nenhum valor soltoTokens in Tokens Studio and applied: no loose values
- Motion definidoMotion defined
- Segundo refinamento com a engenhariaSecond refinement with engineering
- Tabela de tokens preenchida: Prop / Comp / Sys / RefToken table filled: Prop / Comp / Sys / Ref
- Documentação do componente: estados, anatomia, specsComponent docs: states, anatomy, specs
- Revisão UX/UIUX/UI review
- Planilha de documentação atualizadaDocumentation sheet updated
- Revisão da engenharia e publicação no StorybookEngineering review, then Storybook
Uma base sobre a qual o portal pôde ser lançadoA foundation the portal could ship on
O MVP do portal foi lançado sobre o sistema.The portal MVP launched on top of the system.
Os mesmos nomes no Figma, nos tokens e no código.Shared names across Figma, tokens and code.
Construindo sobre os mesmos componentes, em vez de refazê-los.Building on the same components instead of rebuilding them.
Um sistema mantido vivo, com manutenção e evolução contínuas.A system kept alive with ongoing maintenance and evolution.
Transformar o checklist em fluxos repetíveisTurning the checklist into repeatable workflows
Auditar o uso de tokensAudit token usage
Encontrar valores fixos que escaparam dos tokens: a regra “nenhum valor solto” do checklist, automatizada.Find hard-coded values that skipped tokens: the “no loose values” rule of the checklist, automated.
Gerar a tabela de tokensGenerate the token table
Montar a documentação Prop / Comp / Sys / Ref direto do JSON, em vez de à mão.Build the Prop / Comp / Sys / Ref documentation straight from the JSON, instead of by hand.
Manter Figma e código ligadosKeep Figma and code linked
Ligar cada componente do Figma à sua versão codada, para specs e Storybook ficarem em sincronia.Map each Figma component to its coded version, so specs and Storybook stay in sync.
Rascunhar a documentação mais rápidoDraft docs faster
Primeiras versões de estados, anatomia e notas de uso, sempre revisadas por designers e engenheiros.First versions of states, anatomy and usage notes, always reviewed by designers and engineers.
Três coisas que eu levaria para qualquer design systemThree things I'd bring to any design system
- 01
Tratar o design system como produto, com usuários, roadmap e manutenção.Treat the design system as a product, with users, a roadmap and maintenance.
- 02
Trazer a engenharia na proposta, não no handoff.Bring engineering in at the proposal, not at handoff.
- 03
Dar nome às coisas uma vez só e usar o mesmo nome no Figma, nos tokens e no código.Name things once, and use the same name in Figma, tokens and code.
Componentes recriados a partir dos tokens, das camadas e da anatomia reais do design system, sem a identidade visual da marca e com dados fictícios, para respeitar a confidencialidade do cliente.Components recreated from the design system's real tokens, layers and anatomy, without the brand's visual identity and with fictional data, to respect client confidentiality.
De formulário comum a produto no arFrom a plain form to a live product
Como concebi, desenhei e construí, com IA, uma cotação de plano de saúde empresarial em 3 passos, com valor na tela e um atendente no WhatsApp.How I conceived, designed and built, with AI, a 3-step business health plan quote, with prices on screen and an assistant on WhatsApp.
Produto em uso real: ao enviar, a cotação chega à corretora.Live product: if you submit it, the quote reaches the brokerage.
Recebemos, Paula.Got it, Paula.
- Operadora ACarrier Aa partir de R$ 2.150/mêsfrom R$ 2,150/monthVer valoresSee prices
- Operadora BCarrier Ba partir de R$ 2.390/mêsfrom R$ 2,390/monthVer valoresSee prices
- Operadora CCarrier CValores com o consultorPrices with the consultantVer valoresSee prices
- Operadora DCarrier DValores com o consultorPrices with the consultantVer valoresSee prices
Tela recriada com operadoras, preços e pessoas fictícios.Screen recreated with fictional carriers, prices and people, translated from Portuguese.
Resumo em 30 segundosThe 30-second version
A cotação do site era um formulário comum: pedia dados, prometia retorno e não devolvia nada na hora. Troquei por um app de 3 passos, sem CPF nem dado de saúde, que calcula um valor de referência na tela.The site's quote was a plain form: it asked for data, promised a reply and gave nothing back right away. I replaced it with a 3-step app, with no personal ID or health data, that calculates a reference price on screen.
Quem quer continuar segue para o WhatsApp, onde um atendente com IA tira dúvidas, levanta os dados que faltam e passa a conversa para o consultor. 💬 Do app no ar ao atendente aberto a todos, foram 4 semanas.Whoever wants to continue moves to WhatsApp, where an AI assistant answers questions, collects the missing details and hands the conversation to the consultant. 💬 From the app going live to the assistant opening to everyone took 4 weeks.
De formulário a appFrom form to app
Três passos em tela de foco, idades por faixa, empresa preenchida pelo CNPJ e progresso guardado.Three steps in a focused screen, ages by bracket, company filled in from its tax ID and saved progress.
Do preço borrado ao valor realFrom blurred price to real price
O plano era esconder o preço. Virou valor real, com tabelas próprias que saem da tela quando vencem.The plan was to hide the price. It became a real price, with in-house tables that leave the screen when they expire.
Do site para o WhatsAppFrom the site to WhatsApp
A cotação abre a conversa. A IA responde, levanta os dados e sabe a hora de sair.The quote opens the conversation. The AI answers, collects the details and knows when to step out.
Ficha do projetoProject facts
- PapelRole
- Concepção, product design, conteúdo e construçãoConcept, product design, content and build
- ProdutoProduct
- Cotação on-line de planos de saúde para empresas, no site e no WhatsAppOnline health plan quotes for businesses, on the site and on WhatsApp
- PeríodoTimeline
- jul/2026 – atual · no ar desde set/2026Jul 2026 – present · live since Sep 2026
- TimeTeam
- Projeto individual, com Claude Code como par de trabalhoSolo project, with Claude Code as a working partner
- MétodosMethods
- PRD, protótipo clicável, especificação de conversa, testes em produção, funil por eventos, testes automatizadosPRD, clickable prototype, conversation spec, production tests, event funnel, automated tests
- FerramentasTools
- Claude Code, Claude API, WhatsApp Cloud API, WordPress, PHP, GA4, Brevo
ContextoContext
Plano de saúde empresarial é difícil de cotar sozinho. O preço muda por operadora, cidade, número de pessoas, faixa de idade e tipo de empresa, e as tabelas vencem.Business health plans are hard to quote on your own. The price changes by carrier, city, number of people, age bracket and company type, and the tables expire.
Por isso, o caminho comum é preencher um formulário e esperar alguém responder. A cotação do site funcionava assim e, no celular, ainda escondia o campo de CNPJ.So the usual path is to fill in a form and wait for someone to reply. The site's quote worked that way and, on mobile, it even hid the company tax ID field.
A pergunta do produto: como dar uma resposta útil em uns 2 minutos, pedindo só o que muda o preço?The product question: how do you give a useful answer in about 2 minutes, asking only for what changes the price?
faixas de idade definidas pela ANS, a agência reguladora: é por elas que o preço é calculadoage brackets set by ANS, the Brazilian regulator: they are what the price is calculated from
operadoras na tela, 3 delas com valor calculado na hora no estado de SPcarriers on screen, 3 of them with prices calculated instantly in São Paulo state
vidas é o público do app. Fora disso, ele leva a pessoa direto ao consultorpeople is the app's audience. Outside that range, it takes the person straight to the consultant
De formulário comum a appFrom a plain form to an app
Decidi aprender com protótipo e com o produto no ar.I chose to learn from a prototype and from the live product.
Estava com cara de formulário comum.It looked like any other form.
Foi minha reação à primeira versão. Funcionava, mas se a tela parece burocracia, ela é tratada como burocracia.That was my reaction to the first version. It worked, but if a screen looks like paperwork, it gets treated like paperwork.
Pedir só o que muda o preçoAsk only for what changes the price
Idades por faixa, com botões de − e +. Sem nome de funcionário, CPF ou dado de saúde.Ages by bracket, with − and + buttons. No employee names, personal ID or health data.
CNPJ que trabalha pela pessoaA tax ID that does the work
Com o CNPJ, o app busca os dados públicos, mostra a empresa e pergunta se o plano será usado naquela cidade.With the tax ID, the app fetches public data, shows the company and asks whether the plan will be used in that city.
Tela só para a tarefaA screen just for the task
Ao começar, o resto do site some. No celular, tela cheia. No computador, um cartão que cabe na tela sem rolar.Once started, the rest of the site disappears. On mobile, full screen. On desktop, a card that fits without scrolling.
Sair não perde nadaLeaving loses nothing
X, Esc ou o voltar do navegador guardam o progresso, e a página oferece continuar a cotação.X, Esc or the browser's back button keep the progress, and the page offers to continue the quote.
Caminho para quem foge do padrãoA path for the exceptions
Uma pessoa só pula a etapa da empresa, quem não tem CNPJ segue sem ele e 100 vidas ou mais vão para um estudo dedicado.A single person skips the company step, those without a tax ID continue without it, and 100+ people go to a dedicated study.
Contato só no passo 3Contact only at step 3
O WhatsApp é pedido no fim, junto da promessa: usado só para esta cotação, sem propaganda.WhatsApp is asked for at the end, with a promise: used only for this quote, no advertising.
Do preço borrado ao valor realFrom blurred price to real price
O PRD previa um “a partir de” e o resto borrado, para levar a pessoa a falar com a equipe. Os preços viriam da API de um sistema de multicálculo. As duas ideias caíram.The PRD planned a “from” price with the rest blurred, to push people to talk to the team. Prices would come from a multi-quote system's API. Both ideas fell apart.
A decisão de produtoThe product decision
Preço escondido é um truque que a pessoa percebe.A hidden price is a trick people notice. Decidi mostrar valor real na hora e deixar para o consultor o estudo completo, que compara planos e rede.I chose to show a real price right away and leave the full study, comparing plans and networks, to the consultant.
A restrição técnicaThe technical constraint
O fornecedor confirmou que não havia API de cotação.The vendor confirmed there was no quoting API. Então as tabelas viraram parte do produto, cada uma com a data de conferência e a data para sair da tela.So the tables became part of the product, each with a checked date and a date to leave the screen.
O resultado tem mais estados do que pareceThe result has more states than it seems
Tem tabelaTable available
O “a partir de” no topo e as operadoras com valor primeiro, da mais barata para a mais cara.The “from” price on top, and carriers with prices first, from cheapest to most expensive.
Sem tabelaNo table
A operadora continua na lista, com “Valores com o consultor”. Ninguém fica sem caminho.The carrier stays on the list, with “Prices with the consultant”. Nobody is left without a path.
Tabela vencidaExpired table
Passou da data, o valor sai da tela sozinho, sem depender de alguém lembrar.Past its date, the price leaves the screen on its own, without anyone having to remember.
CNPJ de outra cidadeCompany in another city
O preço segue a cidade do CNPJ. Se a cidade de uso não divide a mesma tabela, a tela não mostra valor e explica por quê.The price follows the company's city. If the city of use doesn't share the same table, the screen shows no price and explains why.
MEI
A tabela muda quando a empresa é MEI, o microempreendedor individual. O CNPJ responde isso sem perguntar nada à pessoa.The table changes for MEI, Brazil's sole-proprietor status. The tax ID answers that without asking the person anything.
Condição especialSpecial condition
Quando a tabela exige entrada de todo o grupo, o valor ganha um * e a condição aparece na nota.When a table requires the whole group to join, the price gets an * and the condition appears in the note.
Validade de tabela virou estado de interface: preço vencido não chega à tela.Table validity became an interface state: an expired price never reaches the screen.
Um cartão por operadoraOne card per carrier
Testei o resultado com um cartão por plano e troquei por um cartão por operadora, com o “a partir de” e um botão que abre o WhatsApp com a cotação pronta. Os preços por plano ficaram com o consultor, no CRM e no e-mail de aviso.I tested the result with one card per plan and switched to one card per carrier, with the “from” price and a button that opens WhatsApp with the quote ready. Per-plan prices stayed with the consultant, in the CRM and in the alert email. Menos números deixam a escolha mais simples e dão um motivo para a conversa.Fewer numbers make the choice simpler and give a reason to talk.
Do site para o WhatsApp, com IAFrom the site to WhatsApp, with AI
A cotação abre a conversa: a pessoa recebe uma mensagem com o código dela. Um atendente feito com Claude tira dúvidas sobre rede, carência e coparticipação, levanta os dados que faltam e passa a conversa para o consultor.The quote opens the conversation: the person receives a message with their code. An assistant built with Claude answers questions about network, waiting periods and co-payment, collects the missing details and hands the conversation to the consultant.
O que ele fazWhat it does
- Responde pela base da corretora, com as regras das operadoras.Answers from the broker's knowledge base, with the carriers' rules.
- Levanta 7 dados, um por vez, sem repetir o que a cotação já trouxe.Collects 7 details, one at a time, without repeating what the quote already brought.
- Passa a conversa com um resumo estruturado, que chega por e-mail ao consultor.Hands over with a structured summary, which reaches the consultant by email.
O que ele não fazWhat it doesn't do
- Não fala de valores em reais: isso é do consultor.It doesn't discuss prices: that belongs to the consultant.
- Não finge ser pessoa e não insiste em dado que a pessoa não quer dar.It doesn't pretend to be a person or push for details someone doesn't want to give.
- Não guarda o texto de conversas pessoais no mesmo número.It doesn't store the text of personal conversations on the same number.
Conversa de exemplo, com dados fictícios.Sample conversation with fictional data, translated from Portuguese.
Regras que nasceram de conversas que deram erradoRules born from conversations that went wrong
O mais difícil num bot não é responder. É saber quando parar.The hardest part of a bot isn't answering. It's knowing when to stop.
A base também é designThe knowledge base is design too
O atendente lê mais de 6 mil palavras de regras e conhecimento, tiradas dos manuais das operadoras, da rede de hospitais e dos artigos do blog. Reescrevi essa base em frases curtas, com um fato por frase, para que a IA tenha menos espaço para interpretar.The assistant reads over 6,000 words of rules and knowledge, drawn from carrier manuals, the hospital network and blog articles. I rewrote this base in short sentences, one fact per sentence, to leave the AI less room to interpret. Montei roteiros de teste com personas, como um MEI com pressa que desconfia de robô.I built test scripts with personas, like a hurried sole proprietor who distrusts bots.
Dados: medir desde o primeiro diaData: measuring from day one
Funil por eventoEvent funnel
Cada passo gera um evento no GA4: início, as 3 etapas, envio e lead. O clique em cada operadora também é medido.Each step fires a GA4 event: start, the 3 steps, submit and lead. Clicks on each carrier are measured too.
Origem junto da cotaçãoSource stored with the quote
A campanha fica gravada com a cotação e chega ao CRM. A atribuição não depende de deduzir por horário.The campaign is stored with the quote and reaches the CRM. Attribution doesn't depend on guessing from timestamps.
Cidade declarada, não IPDeclared city, not IP
O GA4 diz onde a pessoa estava. A cidade informada no app diz onde o plano será usado, e é ela que decide o atendimento.GA4 says where the person was. The city given in the app says where the plan will be used, and that's what decides service.
A primeira campanha por e-mail trouxe um achado que eu não esperava: as cotações vieram de fora de SP, onde o app ainda não mostra valor.The first email campaign brought a finding I didn't expect: quotes came from outside São Paulo state, where the app doesn't show prices yet. A hipótese do valor na hora ainda precisa ser testada com quem pode vê-lo.The instant-price hypothesis still has to be tested with people who can see it.
Como construí, com IAHow I built it, with AI
Com Claude Code como par de trabalho, levei o produto do protótipo à produção. A IA escreve e testa. Quem define a regra, revisa o texto e testa de verdade sou eu.With Claude Code as a working partner, I took the product from prototype to production. The AI writes and tests. I define the rules, review the copy and do the real testing.
Protótipo que mostra os bastidoresA prototype that shows the backstage
Ao lado do celular, um painel “Por trás da tela” mostrava ao vivo a sessão, o lead, o que iria ao CRM e os eventos do GA4.Next to the phone, a “Behind the screen” panel showed the session, the lead, what would go to the CRM and the GA4 events, live.
Versões pequenasSmall releases
Código versionado e um pacote por versão: da 1.0 à 1.9 em 5 semanas, com cada mudança testada em produção.Versioned code and one package per release: from 1.0 to 1.9 in 5 weeks, with each change tested in production.
Testes automáticosAutomated tests
728 conferências automáticas, 243 delas num navegador de verdade, percorrendo os fluxos no celular e no computador.728 automated checks, 243 of them in a real browser, going through the flows on mobile and desktop.
Privacidade no fluxoPrivacy in the flow
“Como usamos seus dados” abre na própria tela. A retenção é de 12 meses, e a política cobre o uso de IA.“How we use your data” opens on the screen itself. Retention is 12 months, and the policy covers AI use.
Resultados e statusResults and status
- App de cotação nas 6 páginas do siteQuote app on the site's 6 pagesNo ar desde set/2026Live since Sep 2026
- Valores na tela, com 3 operadoras em SPPrices on screen, 3 carriers in São Paulo stateNo arLive
- CRM, aviso por e-mail e funil no GA4CRM, email alert and GA4 funnelNo arLive
- Atendente com IA no WhatsAppAI assistant on WhatsAppAberto a todos desde out/2026Open to everyone since Oct 2026
- Valores em mais operadoras e cidadesPrices for more carriers and citiesPróximo passoNext step
Impacto até aquiImpact so far
- O site deixou de ter formulário de cotação: a jornada inteira virou um produto só.The site no longer has a quote form: the whole journey became a single product.
- O consultor recebe a cotação e os dados levantados, em vez de começar do zero.The consultant receives the quote and the collected details instead of starting from scratch.
- Ainda não tenho volume para falar em conversão.I don't have enough volume yet to talk about conversion.
O que vou medirWhat I'll measure
- Conclusão de cada passo do appCompletion of each app step
- Cotações que viram conversa no WhatsAppQuotes that become WhatsApp conversations
- Conversas que chegam ao consultor com os 7 dadosConversations reaching the consultant with all 7 details
- Tempo até o primeiro contatoTime to first contact
- Cotações que viram vendaQuotes that become sales
O que aprendiWhat I learned
Parecer formulário já é um problemaLooking like a form is already a problem
Foco, progresso e uma resposta no fim mudam a relação da pessoa com a tela.Focus, progress and an answer at the end change how people relate to the screen.
Restrição pode melhorar o produtoConstraints can improve the product
Sem API, as tabelas viraram parte do design, com fonte e validade.Without an API, tables became part of the design, with source and validity.
Validade é estado de interfaceValidity is an interface state
Dado que vence precisa de um comportamento desenhado, não de um lembrete.Data that expires needs designed behavior, not a reminder.
Bot se desenha pela saídaDesign a bot from its exit
A passagem para a pessoa é a parte mais delicada da conversa.The handover to a person is the most delicate part of the conversation.
Conversa real ensina mais que cenárioReal conversations teach more than scenarios
As melhores regras do atendente nasceram de testes que deram errado.The assistant's best rules came from tests that went wrong.
IA acelera a construção, não a decisãoAI speeds up building, not deciding
Ela encurta o caminho até o produto no ar. O que o produto deve fazer continua sendo decisão de design.It shortens the path to a live product. What the product should do is still a design decision.
O que este case mostraWhat this case shows
Produto de ponta a pontaEnd-to-end product
Do PRD ao ar, com decisões de negócio, regras e operação.From PRD to launch, with business decisions, rules and operations.
UX e conteúdoUX and content
Fluxo mobile-first, estados de resultado e textos de cada tela.Mobile-first flow, result states and the copy on every screen.
Design conversacionalConversation design
Regras de comportamento, base de conhecimento e passagem para a pessoa.Behavior rules, knowledge base and handover to a person.
DadosData
Funil por evento, atribuição gravada na cotação e leitura honesta do resultado.Event funnel, attribution stored with the quote and an honest reading of results.
IA no produto e no processoAI in the product and the process
Claude dentro do produto e Claude Code na construção, com testes automáticos.Claude inside the product and Claude Code for building, with automated tests.
PrivacidadePrivacy
Pedir o mínimo, explicar o uso do dado e limitar o que fica guardado.Asking for the minimum, explaining data use and limiting what gets stored.
Vamos conversar?Let's talk
Product Designer Sênior · Design Systems · Campinas, BrasilSenior Product Designer · Design Systems · Campinas, Brazil