Histórias da Lêda | Plataforma editorial e comercial
Plataforma editorial e comercial para uma historiadora publicar textos, vender livros e construir relação direta com leitores.
Meu papel: Design de Produto · UI Design · Arquitetura de CMS · Desenvolvimento Assistido por IA
Stack: Lovable · React/Vite · Sanity · Brevo · Nuvemshop · GitHub · Vercel
Contexto e problema
Maria Lêda é historiadora, pesquisadora e escritora com produção ligada à história moderna, Brasil colonial e edição de textos históricos. Ela precisava retomar presença pública digital com um espaço que reunisse trajetória, textos, livros e canal de relacionamento com leitores — sem depender de desenvolvedor para manter o conteúdo no dia a dia.
O projeto foi desenhado como um ecossistema porque a cliente tinha necessidades que não cabem em uma única ferramenta: presença editorial, gestão autônoma de conteúdo, relacionamento com leitores e venda de livros.
Estratégia
A decisão central foi separar criação visual de operação cotidiana — a autora não precisa tocar no layout para publicar um texto, cadastrar um livro ou subir um PDF. Cada ferramenta resolve uma responsabilidade específica: o Sanity transforma gestão de conteúdo em formulários compreensíveis; o Brevo organiza newsletter e leads; a Nuvemshop cuida da camada comercial; e GitHub + Vercel sustentam deploy e manutenção.
Usuário
historiasdaleda.com
React / Vite — Lovable + código manual
Sanity CMS
Posts, livros,
arquivos
Schemas
post · book ·
archive
Brevo
Newsletter, leads
Fluxos
Caderno · Contato
· NL
Nuvemshop
Loja, checkout
GitHub + Vercel
Deploy contínuo
Observabilidade
Vercel Analytics
+ Clarity
Eventos de conversão
click_comprar · submit_caderno ·
click_nuvemshop
Decisões que moldaram o projeto
Nuvemshop como camada comercial separada — por restrição de orçamento, não por filosofia de marca.
A integração de uma plataforma de e-commerce diretamente no site exigiria custos que fugiam do orçamento da cliente. A Nuvemshop entrou como solução gratuita viável e eu desenhei a costura entre os dois ambientes para minimizar a fricção: CTAs claros no site direcionam o usuário para o fluxo de compra sem que a transição pareça remendo.
Experiência editorial – Contexto, autoridade e narrativa
Camada comercial- Catálogo, carrinho e checkout
Schemas do Sanity desenhados para quem vai usar, não para quem vai construir.
Modelei os tipos de conteúdo a partir da realidade da cliente: uma autora com pouca familiaridade técnica que precisa publicar textos, cadastrar livros, subir PDFs e atualizar links de compra sem tocar em código. Cada schema virou um formulário com campos nomeados de forma compreensível, organizados na ordem em que faz sentido preencher.
Brevo como camada de relacionamento editorial.
Além de publicar conteúdo, o projeto precisava de um canal direto entre a autora e seus leitores. Por isso, integrei o Brevo como camada de relacionamento: captura de leads, newsletter, formulário de contato e segmentação por origem (Caderno de Arquivos, newsletter, contato, interesse em serviços), permitindo que a autora construa uma base própria de leitores.
Também estendi a identidade visual para o e-mail marketing, criando no Figma um template editorial de newsletter alinhado ao site, com blocos para textos, livros, Caderno de Arquivos e chamadas comerciais — transformando a newsletter em mais um ponto de contato da marca, em vez de um e-mail genérico.
Paleta existia, sistema visual não.
A logo foi criada por Taciana Moraes. A paleta de cores foi definida em conjunto com a cliente. A identidade visual completa está sendo desenvolvida em paralelo. Para não paralisar a entrega do site, trabalhei a partir dos elementos já acordados e fui resolvendo lacunas conforme o projeto avançava: tags em tons de verde, um selo de cera com a letra “L” para o Caderno de Arquivos, e o padrão de cobogó da logo estendido como grid de fundo no site. A consistência entre o site e as demais aplicações será ajustada quando a identidade completa for finalizada.
IA com controle técnico, não substituição.
Usei o Lovable para acelerar a geração inicial da interface, mas mantive o projeto versionado no GitHub e publicado na Vercel. Ao longo do projeto, fiz intervenções diretas no código para coisas que o Lovable não deveria decidir sozinho: organização de variáveis de ambiente, integração do formulário de contato com a API do Brevo, remoção de conteúdo fictício hardcoded da Home, conexão dos previews de posts ao CMS real.
Resultado
Site editorial publicado e funcional, com CMS configurado para posts, livros, Caderno de Arquivos, imprensa e História Portátil. Newsletter e captação de leads integrados ao Brevo. Formulário de contato operacional. Camada comercial via Nuvemshop para venda de livros e produtos. Deploy contínuo via GitHub e Vercel. Observabilidade instalada com eventos mapeados nas conversões reais. A cliente tem autonomia para atualizar conteúdo sem depender de desenvolvedor.
Próximos passos
O projeto está publicado e operacional. As etapas seguintes são de amadurecimento — conteúdo real, operação comercial e acompanhamento de uso.
Observabilidade em implementação. O Vercel Analytics foi ativado e já está coletando dados de tráfego. O Microsoft Clarity será integrado via variável de ambiente, com carregamento condicional em produção e eventos mapeados nas conversões que importam: acesso ao Caderno, clique em comprar livro e saída para o checkout da Nuvemshop. O funil completo — comportamento editorial, conversão e resultado comercial — ficará visível de ponta a ponta quando as duas ferramentas estiverem ativas junto às métricas nativas da Nuvemshop.
Conteúdo e operação. Publicar os primeiros posts reais da autora, cadastrar os livros definitivos na Nuvemshop, subir os PDFs reais no Caderno de Arquivos e conectar o domínio historiasdaleda.com.br.
Relacionamento. Criar as primeiras campanhas no Brevo, acompanhar a origem dos leads e ajustar CTAs com base nos primeiros dados reais de uso.
O que aprendi
IA acelera, mas não decide. O Lovable encurtou semanas de trabalho, mas as decisões de arquitetura, a modelagem do CMS, a escolha das ferramentas e o mapeamento de eventos de conversão foram trabalho de raciocínio, não de prompt. O projeto também me ensinou que restrição de orçamento não é desculpa para entregar menos — é uma restrição de design como qualquer outra, e a solução precisa ser tão cuidadosa quanto seria sem ela.
