Diseño de una landing page para Escuela para Padres Motival, el servicio de +Meaning que acompaña a familias y estudiantes en el desarrollo de habilidades socioemocionales para impactar positivamente en el aprendizaje escolar.
Rol
UX/UI Designer
Año
2022
Tipo
Landing Page
Plataforma
Web
A mediados del año 2021 me encontraba ejerciendo como Jefe de Marketing en +Meaning. Organización que tiene como propósito potenciar el rol de los apoderados como agentes activos en el aprendizaje de los estudiantes en etapa escolar. Dentro de la organización existe un servicio llamado Escuela para padres Motival, que está enfocado en el desarrollo de la motivación y de habilidades socioemocionales en los estudiantes, mediante el trabajo con las familias. En palabras simples este servicio es ofertado a distintos colegios a nivel nacional y consiste en que todas las semanas se envían 2 mensajes de forma masiva a todos los apoderados del curso, que semana a semana, impactará positivamente en el alumno, con contenidos y actividades enfocadas en las habilidades socioemocionales. Todos los días viernes se envía un video informativo con propuestas de actividades de trabajo a nivel familiar y cada sábado, tips y reforzamiento del contenido de la semana.
El programa estaba funcionando de maravilla en los colegios, pero con el equipo queríamos aún más alcance de nuestro contenido. Por lo que desarrollamos un libro digital que contuviera las actividades y herramientas más importantes del programa, con la finalidad de poder llegar a familias independiente de que el programa se estuviera implementado en su establecimiento educacional. Por lo que se me entrega la responsabilidad de diseñar tanto el libro digital, como el landing page de venta. Para ser honesto, este fue mi primer acercamiento al diseño web, pero de todas maneras tomé el desafío. Alrededor de un mes después, ya teníamos el libro y la landing page lista para poder comenzar la difusión a través de anuncios gestionados en Facebook Business. Hoy, a varios meses de la creación de esta landing page y estando desvinculado de la organización, me propongo el desafío de rediseñarlo aplicando todos mis conocimientos de UX y UI.
Al momento de ingresar a la URL de la landing page, me encuentro con la lamentable noticia que ha ocurrido un error crítico dentro de la web. Lo más probable, es que sea por falta de mantención en los plugins con los que fue construido. Vuelvo a recordar que estos fueron mis primeros acercamientos al diseño web, que fue mi puerta de entrada al mundo del UX.
La landing se encuentra sin ilustraciones, con todos sus links rotos, no es responsiva, no posee coherencia, es decir, que dejó de ser funcional y por consecuencia genera una experiencia de usuario increíblemente mala.
Se realizó un análisis heurístico basado en los principios de Nielsen para identificar los principales problemas de usabilidad de la landing original.
Esta heurística presenta tres catástrofes de usabilidad. El primero de ellos es la existencia de enlaces rotos dentro de la web; el siguiente problema grave es que no existe un sistema de validación antes de que el usuario ingrese información, además de no destacar campos obligatorios. Para esto sugiero la creación de inputs con formato condicional, dependiendo de la información que se esté requiriendo en el momento.
Al analizar esta heurística me encuentro con que la landing page no cuenta con una sección de ayuda o instrucciones, debido a que este se encontraba vinculado a un link que se encuentra roto. Además de no contar con un sistema de respaldo de la información, generando que, si hay algún error, el usuario tenga que volver a ingresar todos sus datos. Por lo que el nuevo diseño de la landing deberá contar con una sección de instrucciones visible y fácil de encontrar.
Esta es la heurística que presenta mayor cantidad de problemas, debido a que la landing page no posee ningún tipo de feedback en el caso de errores. Esto, sumado a los ya detectados problemas de prevención de errores, genera que esta plataforma sea un lugar donde el error es muy común. Recomiendo incorporar mensajes de errores expresados en lenguaje entendible, que indiquen con precisión el problema y que faciliten la experiencia al momento de corregir un posible error.
"Aveces uno olvida la importancia que tienen los hábitos y la rutina para nuestros niños"
Datos personales
Dolores
Nivel digital
Necesidades
"Los hermanos mayores deberían ser pilares fundamentales a la hora de apoyar la infancia"
Datos personales
Dolores
Nivel digital
Necesidades
"Los abuelos poseemos mucha experiencia para ayudar a nuestros hijos con nuestros nietos, pero los tiempos cambian y la educación también."
Datos personales
Dolores
Nivel digital
Necesidades
Un proceso iterativo centrado en construir confianza, comunicar claridad y guiar al usuario hacia la acción de forma natural.
Definición de la estructura de la página: jerarquía de secciones, flujo narrativo y puntos de conversión para guiar al usuario desde el interés hasta el contacto.
Definición de paleta cromática, tipografía y componentes visuales alineados con los valores de la marca: calidez, propósito y crecimiento personal.
Exploración de disposición de elementos, jerarquía visual y composición de cada sección antes de avanzar al diseño de alta fidelidad.
Diseño final de todas las secciones en Figma: hero, servicios, testimonios, equipo y llamados a la acción, con foco en la conversión y la experiencia del usuario.
Desktop
Mobile
El diseño final comunica la esencia de Motival +Meaning de forma clara y emotiva, guiando al visitante desde la primera impresión hasta el contacto con un coach.
Sección de entrada que comunica el propósito de la marca en segundos, con un mensaje claro y un CTA visible.
Presentación del equipo y metodología de coaching que transmite credibilidad y cercanía con el usuario.
Sección de casos de éxito que valida la propuesta de valor con experiencias reales de clientes anteriores.
Desktop
Mobile
100%
presencia digital desde cero
1
canal propio de conversión
↑
visibilidad y captación orgánica
Esta nueva Landing Page Motival cuenta con todos sus inputs tanto con formato condicional, como el feedback correspondiente al posible error que pueda cometer el usuario dentro de la plataforma. Estas nuevas funcionalidades ayudan directamente a la prevención de errores y generan una ayuda directa y clara sobre cuál es el problema que no permite seguir navegando dentro del flujo.
Correo
La información entregada no corresponde a un correo electrónico válido, por favor revise que esté escrito correctamente para continuar.
Esta nueva Landing Page Motival cuenta con una sección de ayuda y recomendaciones clara y evidentemente visible al final de la plataforma, repercutiendo directamente en la heurística de ayuda y documentación. Esta sección entrega seguridad a los usuarios de que las acciones a realizar son las que ellos quieren realizar, evitando errores o confusiones dentro del flujo.
Esta nueva Landing Page Motival cuenta con una sección de testimonios de clientes anteriores, entregando transparencia y confiabilidad a la plataforma. Los usuarios antes de generar el diagrama de pago ya entienden con seguridad qué es lo que encontrarán en el libro digital, evitando que generen falsas expectativas del contenido que quieren adquirir.
Paulina Poblete
"Lo que más me gustó del ebook fue que te ayudan a plantear que los niños sean autosuficientes y cómo tienen que lidiar los padres con ello."
Dennise Saavedra
"El ebook realmente superó mis expectativas, el mensaje es claro y muy organizado. Lo que más me gustó fue el dinamismo para enseñar, cambia totalmente la forma de enseñanza que se ha traído hasta hoy en día, ya sea en las escuelas y en la casa."
Yovanna Mendez Sánchez
"Sin duda el proceso tiene para mí más significado, veo el esfuerzo y la perseverancia en mis hijos y eso me deja feliz y conforme, la verdad son muy inteligentes."
En una landing page, la claridad del mensaje es más importante que la complejidad visual — cada elemento debe responder la pregunta "¿por qué yo?".
La jerarquía visual y el flujo narrativo son tan importantes como el diseño en sí: el orden de las secciones debe contar una historia que lleve al usuario naturalmente hacia la conversión.
Para marcas con un fuerte componente emocional como el coaching, la elección de imágenes, tonos y tipografía comunica tanto como el copy — la coherencia entre todos estos elementos es clave.