Planton Academy: da estratégia comercial ao produto em produção

2026 · Estudo de caso · 5 min de leitura · Ler em inglês

Fui responsável por transformar a ideia do Planton Academy em um produto digital completo. Atuei desde a definição da experiência até a implementação do front-end em React, trabalhando lado a lado com a engenharia. A interface do vídeo abaixo é o produto real em funcionamento, não um protótipo separado da entrega.

O Academy é a plataforma de educação corporativa da Planton, uma climate tech brasileira. Ele ajuda empresas a treinar suas equipes em ESG: inventário de emissões, GHG Protocol, mercado de carbono e relatórios de sustentabilidade. Meu desafio era transformar uma estratégia comercial em uma plataforma que realmente funcionasse para alunos, gestores e administradores, do primeiro fluxo ao código em produção.

3 perfis de usuário sobre uma mesma base de dados · onboarding B2B com 12 estados · certificação por quiz · tutor de IA com apoio humano · entregue como código React funcional

O Produto

O Academy é B2B e atende clientes enterprise reais. A Faber-Castell, cliente que a Planton divulga publicamente, usa a plataforma para treinar sua cadeia de valor. Não existe cadastro avulso: a empresa contrata o acesso, e qualquer pessoa com e-mail corporativo de um domínio autorizado consegue entrar. Essa regra comercial virou o ponto de partida de toda a experiência.

Aluno, gestor e admin trabalham sobre os mesmos dados, mas cada perfil precisa resolver um problema diferente. O aluno segue trilhas, passa por quizzes e conquista certificados verificáveis. O gestor da empresa acompanha o engajamento e comprova internamente o valor do treinamento. O admin da Planton opera todos os clientes, o catálogo de conteúdo e os vouchers de acesso. O gestor enxerga uma visão específica dos mesmos dados utilizados pelo administrador: uma base de dados, três experiências.

Meu Papel

Comecei transformando as regras do negócio em jornadas claras para cada perfil de usuário: onboarding, certificação, ciclo de vida dos planos e arquitetura de permissões. Desenhei todas as telas sobre o Planton UI, o design system baseado em tokens que construí para a marca, e estendi o sistema onde o produto precisava. Depois implementei a plataforma em React, Next.js e TypeScript, então as telas do vídeo acima são a interface real funcionando. Também desenhei a linguagem de movimento, a experiência do tutor de IA e publiquei a landing page de lançamento.

Quatro decisões que moldaram o produto

1. O onboarding começa pelo modelo de negócio

Como o domínio corporativo é a chave de acesso, o fluxo verifica o domínio antes de pedir qualquer senha, então a elegibilidade é resolvida no passo mais barato possível. Cada cenário comercial virou uma tela própria: empresa ativa celebra e avança sozinha; empresa inativa recebe um caminho de voucher com uma saída comercial; domínio desconhecido converte o visitante em lead de vendas. Doze estados, e nenhum deles é um beco sem saída.

2. A certificação virou parte central da experiência

Em vez de tratar o certificado como algo que aparece só no fim do curso, fiz dele parte da jornada desde o começo. Quiz e certificado aparecem como itens numerados na lista de conteúdo da própria trilha, visíveis desde a primeira aula. Cada etapa bloqueada explica exatamente o que precisa acontecer para liberar o próximo passo, e reprovar no quiz sempre leva de volta ao conteúdo. O certificado tem uma URL pública de verificação e um botão de compartilhamento no LinkedIn. É uma credencial que o aluno pode distribuir, e que também apresenta a plataforma para a rede dele.

3. Um tutor de IA que conhece os próprios limites

O tutor foi pensado para ajudar o aluno a avançar na trilha, não para substituir uma conversa aberta. As respostas vêm em blocos estruturados e sempre apontam para o próximo conteúdo do catálogo. Quando o bot chega ao seu limite, um toque transfere a conversa para uma pessoa no WhatsApp, levando um resumo do chat para que o aluno não precise se repetir. Desenhar a saída foi tão importante quanto desenhar as respostas.

4. Gestores renovam contratos, então gestores veem resultados

Na educação B2B, o aluno usa o produto, mas é o gestor quem renova. O dashboard do gestor foi construído para prestação de contas interna: vigência do contrato como linha do tempo, horas de engajamento, certificados conquistados e drill-down por colaborador. São os mesmos dados da visão administrativa, reorganizados em torno de outra decisão: provar que o treinamento está gerando valor.

Desenhado em código

Todos os fluxos acima existem como código React tipado. O onboarding é uma máquina de estados em TypeScript; o quiz e o ciclo de vida dos vouchers também. Os menus do admin só oferecem ações válidas para o estado atual de cada item, então a interface aplica as regras de negócio em vez de apenas documentá-las.

Trabalhar diretamente no código mudou a forma como as decisões de design chegavam ao produto. Quando um componente amadurecia dentro de uma tela, ele passava a fazer parte oficialmente do design system, com exemplos vivos e o caminho real do arquivo-fonte. Assim, um desenvolvedor conseguia sair da documentação e chegar à implementação em um clique. Revisando os pull requests com os engenheiros, eu conseguia pegar um problema de espaçamento ou de estado no próprio diff, em vez de depender de uma sequência de comentários.

Agentes de IA tinham uma função específica em cada etapa do processo. Na exploração, eu conseguia levantar três ou quatro variações funcionais de um fluxo em uma tarde e compará-las no navegador, em vez de debater mockups estáticos. Na implementação, os agentes montavam a base dos componentes sobre os tokens do design system enquanto eu focava nos detalhes de interação e nos casos extremos. Na documentação, cada componente incorporado ao sistema ganhava uma documentação inicial gerada a partir do próprio código. E na validação, uma decisão tomada de manhã podia ser testada contra estados reais de dados no mesmo dia.

Como o design system foi construído → leia o case complementar

Resultados

Uma experiência coerente em toda a plataforma

As áreas de aluno, gestor e admin compartilham tokens, primitivos e padrões, incluindo dark mode completo e sem código de tema por tela.

Um design system que sobreviveu ao projeto

O Planton UI hoje atende outros produtos da Planton, com releases versionados e documentação viva.

Menos atrito entre design e engenharia

Como o design já nasce perto da implementação, há menos retrabalho e menos diferença entre o que foi pensado, documentado e entregue no produto.

A ressalva honesta: a plataforma roda sobre dados estruturados de exemplo, e a acessibilidade está coberta onde os primitivos do sistema cobrem, com um backlog priorizado para as partes customizadas. Instrumentar o uso real e fechar esse backlog seria meu primeiro movimento depois do lançamento.

Por que este projeto importou

O Planton Academy foi o projeto em que consegui reunir várias competências que desenvolvi ao longo da carreira: UX, produto, design system, motion, front-end e IA. Durante boa parte dessa trajetória, essas frentes apareciam em momentos separados, sob responsabilidade de pessoas diferentes. Pela primeira vez, tive a oportunidade de conduzir todas essas etapas dentro do mesmo projeto.

O que tornou o projeto importante para mim foi poder acompanhar cada decisão até ela aparecer no produto. Quando eu definia um fluxo, também conseguia implementá-lo, testá-lo em estados reais da aplicação e ajustá-lo junto com a engenharia. Isso reduziu a distância entre o que eu desenhava e o que as pessoas encontravam na plataforma. É esse tipo de trabalho que quero continuar fazendo.