Caso

Johan Vásquez es un emprendedor y coach especializado en transformación personal y empresarial, además de CEO de Mental Training School. Con un enfoque basado en la bioneuroemoción, y junto a su equipo, impulsa procesos de cambio profundo a través de consultorías estratégicas, workshops y programas de coaching diseñados para potenciar el bienestar, la productividad y el liderazgo consciente en personas y organizaciones que buscan alcanzar su máximo potencial.

Desde 2024, Johan trabaja junto al equipo de Sí Señor en una estrategia 360° de transformación de marca. Así como guía a sus clientes hacia el cambio, comprendió que su propia marca también necesitaba evolucionar para lograr la expansión, el reconocimiento y la solidez que buscaba.

Como parte de este proceso, diseñamos un sitio web que destaca su historia y la de su equipo, presenta cada uno de sus servicios y ofrece secciones únicas, como un test que recomienda el programa ideal de MTS, acceso al blog con contenido premium y freemium, entre otras experiencias interactivas.

Metas

Crear un sitio web con comunicación clara y enfocada en audiencias, servicios y micromomentos, garantizando coherencia con los objetivos y valores de la marca.
Implementar palabras clave estratégicas que fortalezcan el posicionamiento orgánico y destaquen los atributos diferenciales de la marca frente a su competencia directa.
Diseñar un sitio web renovado, con nueva paleta de colores y un design system alineado con los valores y evolución visual de la marca.
Incluir secciones interactivas, como un test de cuatro preguntas que recomiende entre más de veinte opciones la ideal para cada usuario.
Integrar plataformas externas como Substack y LearnDash, facilitando la conexión de contenidos, experiencias educativas y comunicación directa con la comunidad digital.

Ejecución

Desde el inicio, y en acuerdo con el cliente, definimos que el proyecto debía centrarse en una comunicación clara, directa y auténtica, orientada a reflejar la transformación personal.

Desde tres áreas principales, UX Writing, UX/UI Design y Desarrollo Web, se trabajó de manera integrada para construir una experiencia coherente. Cada color, palabra e imagen fue cuidadosamente seleccionado para inspirar el cambio, transmitir cercanía y conectar emocionalmente con quienes buscan crecer.

UX Writing

Comunicación orientada a la acción: El lenguaje está centrado en la acción, usando verbos en infinitivo y conjugaciones que permiten a las personas identificarse con situaciones reales, escenarios cotidianos y soluciones concretas, fortaleciendo la conexión emocional con el mensaje y la propuesta de transformación personal.
Generación de identificación y credibilidad: Promover la empatía mediante testimonios, cifras y casos de aplicación reales, busca reforzar la confianza en la marca, evidenciando resultados tangibles y experiencias auténticas que validaran el impacto positivo del método de Johan y su equipo.
Inspirar desde cada punto de contacto: Cada título, párrafo y CTA fue diseñado para inspirar y motivar, permitiendo que las personas se imaginaran en los escenarios descritos y sintieran el cambio posible a través de la propuesta de Mental Training School.
Estructuras replicables y eficientes: Se construyeron estructuras modulares y replicables para cada servicio, optimizando los recursos de diseño y desarrollo. Estas respondían a las heurísticas de Nielsen, garantizando consistencia, claridad y coherencia en las convenciones de diseño y navegación.
Voz y tono de marca diferenciados: Era importante definir una voz y tono propios para la marca Mental Training School, diferenciados del estilo personal de Johan, pero coherentes con su esencia, cercanía y propósito de transformación integral.

Diseño UX/UI

Empalme con el equipo de diseño: Se realizó un trabajo conjunto con el equipo de diseño para comprender el uso del toolkit de marca y asegurar que cada elemento visual reflejara la identidad y los valores de Mental Training School.

Construcción y desarrollo del Design System:

Definición: Tras entender la propuesta de valor y la esencia de cercanía y profesionalismo de Johan y su equipo, se creó un Design System que garantizara consistencia, escalabilidad y coherencia visual en todas las interfaces.

Evolución y ampliación: El Design System creció de forma iterativa, ajustándose a las necesidades del cliente y facilitando la lectura sin sobrecargar el sitio. Se amplió la paleta de colores para enriquecer el diseño, manteniendo un contraste óptimo.

Ajustes en la diagramación y estructura visual: Inicialmente, se aplicó una diagramación tipo bento grid, pero al aumentar el volumen de contenido se simplificó la composición para reducir la carga cognitiva y mejorar la experiencia de lectura.
Selección fotográfica y enfoque visual: Aunque se propusieron imágenes de stock para transmitir aspiración y superación, se optó por fotografías propias que reforzaran la autenticidad y cercanía de Johan, alineadas con la historia y esencia de Mental Training School.
Implementación de secciones dinámicas:Se diseñaron secciones interactivas con fotografías, cards y CTA clickeables que mejoran la navegación y captan la atención del usuario, aportando dinamismo sin comprometer la velocidad de carga del sitio.

Desarrollo Web

Elección del CMS: Se implementó WordPress como sistema de gestión de contenidos por su arquitectura modular, compatibilidad con la versión más reciente de PHP y su capacidad para escalar y personalizar funcionalidades mediante plug-ins y bloques reutilizables.
Integraciones clave: Se configuraron integraciones con Substack y LearnDash mediante API y módulos específicos, permitiendo gestionar suscripciones, contenido premium y redirecciones automáticas hacia la plataforma de aprendizaje, mejorando la trazabilidad y experiencia del usuario.
Flujo interactivo: Se desarrolló un flujo dinámico para la sección Ruta de transformación, con lógicas condicionales que, a partir de tres preguntas con múltiples variables, generaban hasta 20 rutas posibles adaptadas a perfiles B2B y B2C.

Resultado final

El resultado de meses de trabajo, pruebas e iteraciones se refleja en https://mentaltrainingschool.com/ un sitio web renovado, con nuevas secciones y una experiencia pensada para inspirar y conectar.