Mesha Tecnologia
Landing page educacional de alta conversão
- Meu papel
- Programador Full Stack · Designer UX/UI
- Ano
- 2023
Mesha TecnologiaContexto
Empresa de tecnologia educacional lançando o programa Missão Next Level: formação intensiva para desenvolvedores e analistas buscando recolocação ou aceleração de carreira. Captação via tráfego pago.
Problema
Sem landing page dedicada, o tráfego de campanhas ia para páginas genéricas do site, diluindo a mensagem, aumentando o custo por inscrição e impossibilitando a mensuração por canal de aquisição.
A landing page, dobra a dobra
A página na ordem em que o visitante decide se inscrever.
- 01 / 05
Topo com inscrição
Faixa de contagem regressiva para o início do programa, o logo Missão Next Level com a promessa (“Aprenda a desenvolver soluções e experiências que transformam negócios!”), a foto do aluno e, ao lado, o formulário de inscrição já na primeira dobra: nome, e-mail, telefone e o botão “Quero me inscrever”, com a data e o selo de treinamento 100% online e gratuito.
- 02 / 05
As quatro aulas
“Em uma semana, você conhecerá o caminho mais rápido e prático para dominar o desenvolvimento”: as quatro aulas em cards com um emoji 3D cada, dando personalidade a um conteúdo técnico, e o botão “Quero me matricular agora” logo abaixo.
- 03 / 05
Por que fazer
A Mesha se apresenta em uma frase (“Conectamos experiências, tecnologias e negócios”) e três benefícios com ícone: liderar squads, entender a área de TI e desenvolver o primeiro software antes de terminar o curso.
- 04 / 05
Prova social
“Aprender a desenvolver não é uma missão impossível!”: a foto de um aluno comemorando dentro da forma do logo e quatro depoimentos curtos com nota, focados em resultado (renda, promoção, trabalho remoto), seguidos de nova chamada para a matrícula.
- 05 / 05
Fechamento
Uma imagem de impacto em roxo com “Desenvolvendo talentos para vida!” e o rodapé com a marca Mesha e os links de privacidade e termos.
Solução
Landing page completa com design e desenvolvimento integrados: proposta de valor clara acima da dobra, estrutura do programa, depoimentos e formulário de inscrição com CTA direto. Sem distrações que competissem com a conversão.
↑ Inscrições
vs. fluxo anterior pelo site
1 página
foco total, sem distração
Full Stack
design + código entregues
Sistema Visual
Página clara com o roxo e o magenta da marca em degradê: o roxo nos títulos, botões e cards, o magenta para dar energia aos destaques. A forma do “M” do logo vira moldura para as fotos dos alunos, e os emojis 3D deixam o conteúdo técnico mais próximo e leve.
Paleta
Roxo Mesha
#6C14CF
Títulos, botões e cards das aulas
Violeta
#9119B5
Meio do degradê da marca
Magenta
#BF1E96
Fim do degradê e destaques
Lilás
#F7DDFF
Faixa do topo e fundos suaves
Branco
#FFFFFF
Fundo da página e formulário
Tipografia
Titillium Web
400 / 600 / 700 / 900
Fonte única da página: títulos em bold e black, textos e formulário em regular e semibold
Aprendizado
Landing pages de programas educacionais precisam responder a principal objeção antes de apresentar o conteúdo: "vai valer o meu tempo?". Só depois o usuário quer saber o que vai aprender.
