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 LINK, un sitio web renovado, con nuevas secciones y una experiencia pensada para inspirar y conectar.
