Mapew — Landing Page

Um app na loja precisa de uma porta de entrada. A landing do Mapew é onde quem descobre o produto (por vídeo, busca ou indicação) entende o valor em segundos e decide baixar. É também a vitrine de credibilidade — o que aparece quando alguém pesquisa "Mapew".

O Mapew é um produto que se entende usando: você aponta a câmera, vê o total subir, confere o cupom. O desafio da landing era traduzir isso numa página que se entende lendo — sem fricção, sem jargão, e leve pra carregar rápido no 4G de quem está com pressa.

Desenhei a página com um critério fixo: em cada bloco, "isso faz o visitante pensar sem necessidade?". A meta era responder quatro perguntas na ordem certa — o que é (5s), como funciona (10s), por que é útil (15s), como começar (20s). Compreensão vem antes de estética: se uma decisão bonita competisse com o entendimento, ela caía. A narrativa foi montada em blocos que respondem exatamente essas perguntas: gancho → conceito → como funciona → prova de valor → grátis → download.

A primeira versão do hero vendia o conceito "o gêmeo digital da compra física". Bonito, mas obriga o visitante a interpretar uma metáfora antes de entender o produto — pensamento desnecessário logo na porta. Troquei por uma frase concreta: "Saiba o total antes do caixa." Diz o que o app faz, sem exigir tradução. O conceito "gêmeo digital" continua no site, mas mais adiante, sustentando a narrativa — não bloqueando a entrada.

A identidade fugiu do "SaaS genérico" (creme + verde + cards arredondados) para uma direção mais marcante: off-white limpo, verde profundo como cor de marca e âmbar como acento de atenção. Tipografia display nos títulos pra dar peso e personalidade. Cada cor tem função: o verde carrega a marca; o âmbar aparece só onde vale um alerta — no gancho da cobrança errada, âmbar = atenção, dinheiro. Nada de cor decorativa.

O maior diferencial do Mapew — pegar a cobrança errada no caixa — ganhou o único bloco de cor cheia da página: verde profundo, ocupando a tela inteira, com o mockup real da conferência mostrando a diferença "+R$ 4,20" em destaque. É o momento emocional da página (a injustiça que o app resolve), então recebe o maior contraste visual. Hierarquia a serviço da mensagem: o olho vai direto pro que mais importa.

A landing exercita, numa peça só, a combinação que me define — desenhar e construir: • UX writing e arquitetura de informação — cada seção responde uma pergunta do visitante, na ordem certa (o que é → como funciona → por que → como começar). • Clareza acima de estética — em cada bloco eu pergunto "isso faz o visitante pensar sem necessidade?" e corto o que atrapalha o entendimento. • Design de identidade — paleta (verde profundo + âmbar), tipografia display e sistema visual alinhados ao app, fugindo do template genérico. • Front-end — Next.js, React e TypeScript, com animação em GSAP usada só onde orienta o olho, nunca como enfeite. • SEO técnico — Open Graph, dados estruturados e metadados pra aparecer em buscas. • Acessibilidade (WCAG) — contraste, foco, semântica e prefers-reduced-motion. • Responsividade — hierarquia repensada pro mobile, não o desktop comprimido. • Analytics — Web Analytics medindo a origem de cada visita (UTM) pra saber o que converte em download.

A landing está no ar em mapew.com.br, construída em Next.js, indexada e com Web Analytics ativo. Virou a base da divulgação do produto: todo link de campanha aponta pra lá, e cada visita é rastreada por origem (UTM) pra entender o que converte em download. A página evolui junto com o app — este case reflete a versão atual.