Mesha Tecnologia
Landing page educativa de alta conversión
- Mi rol
- Programador Full Stack · Diseñador UX/UI
- Año
- 2023
Mesha TecnologiaContexto
Empresa de tecnología educativa que lanzaba el programa Missão Next Level: formación intensiva para desarrolladores y analistas que buscan reinsertarse o acelerar su carrera. Captación por tráfico pago.
Problema
Sin una landing page dedicada, el tráfico de las campañas iba a páginas genéricas del sitio, diluyendo el mensaje, aumentando el costo por inscripción e impidiendo medir por canal de adquisición.
La landing page, sección por sección
La página en el orden en que el visitante decide inscribirse.
- 01 / 05
Encabezado con inscripción
Franja de cuenta regresiva para el inicio del programa, el logo Missão Next Level con la promesa (“¡Aprende a desarrollar soluciones y experiencias que transforman negocios!”), la foto del alumno y, al lado, el formulario de inscripción ya en la primera sección: nombre, e-mail, teléfono y el botón “Quiero inscribirme”, con la fecha y el sello de capacitación 100% online y gratuita.
- 02 / 05
Las cuatro clases
“En una semana, conocerás el camino más rápido y práctico para dominar el desarrollo”: las cuatro clases en tarjetas con un emoji 3D cada una, que dan personalidad a un contenido técnico, y el botón “Quiero inscribirme ahora” justo debajo.
- 03 / 05
Por qué hacerlo
Mesha se presenta en una frase (“Conectamos experiencias, tecnologías y negocios”) y tres beneficios con ícono: liderar squads, entender el área de TI y desarrollar el primer software antes de terminar el curso.
- 04 / 05
Prueba social
“¡Aprender a programar no es una misión imposible!”: la foto de un alumno festejando dentro de la forma del logo y cuatro testimonios cortos con calificación, enfocados en resultados (ingresos, ascenso, trabajo remoto), seguidos de un nuevo llamado a la inscripción.
- 05 / 05
Cierre
Una imagen de impacto en morado con “¡Desarrollando talentos para la vida!” y el pie de página con la marca Mesha y los enlaces de privacidad y términos.
Solución
Landing page completa con diseño y desarrollo integrados: propuesta de valor clara arriba del pliegue, estructura del programa, testimonios y formulario de inscripción con CTA directo. Sin distracciones que compitieran con la conversión.
↑ Inscripciones
vs. el flujo anterior por el sitio
1 página
foco total, sin distracciones
Full Stack
diseño + código entregados
Sistema Visual
Página clara con el morado y el magenta de la marca en degradé: el morado en los títulos, botones y tarjetas, el magenta para dar energía a los destacados. La forma de la “M” del logo se convierte en marco para las fotos de los alumnos, y los emojis 3D hacen el contenido técnico más cercano y liviano.
Paleta
Morado Mesha
#6C14CF
Títulos, botones y tarjetas de las clases
Violeta
#9119B5
Centro del degradé de la marca
Magenta
#BF1E96
Final del degradé y destacados
Lila
#F7DDFF
Franja del encabezado y fondos suaves
Blanco
#FFFFFF
Fondo de la página y formulario
Tipografía
Titillium Web
400 / 600 / 700 / 900
Fuente única de la página: títulos en bold y black, textos y formulario en regular y semibold
Aprendizaje
Las landing pages de programas educativos tienen que responder a la objeción principal antes de presentar el contenido: "¿va a valer mi tiempo?". Recién después el usuario quiere saber qué va a aprender.


