Ymove: Rediseño de la app de fitness y la landing page del entrenador
Industria
SaaS
FitTech
Servicios
Diseño UX/UI
Diseño de app móvil
Diseño de landing page
Sitio web
ymove.appResumen
Ymove es una plataforma impulsada por IA que permite a los coaches de fitness lanzar apps totalmente personalizadas para iOS y Android sin conocimientos técnicos. La plataforma se encarga de la infraestructura: los entrenadores se concentran en sus programas y clientes.
Dos elementos clave del producto necesitaban rediseño: las plantillas de pantalla predeterminadas que ven los nuevos entrenadores al registrarse, y la plantilla de landing page utilizada para convertir el tráfico de redes sociales en clientes. Ambos influyen directamente en si un entrenador lanza con éxito su app y en si sus clientes se involucran, lo que los convierte en factores críticos para el crecimiento de la plataforma.
Problema
Las plantillas predeterminadas generan la primera impresión de cada app creada en Ymove. Las pantallas existentes eran genéricas, no cubrían todos los estados de la interfaz y no se alineaban visualmente con la diversidad de marcas de los entrenadores en la plataforma.
En el lado de la app, un único diseño rígido servía a entrenadores de nichos completamente distintos — fuerza, yoga, longevidad, HIIT — sin ninguna diferenciación significativa.
- Los estados vacíos no orientaban al usuario en ninguna dirección.
- Las estadísticas del dashboard mostraban por defecto el consumo de agua y calorías, independientemente de si el entrenador ofrecía soporte nutricional.
- Las vistas de programas carecían de estructura para escenarios con múltiples programas.
En el lado de la landing page, los entrenadores captan clientes casi exclusivamente a través de Instagram.
- La plantilla existente asumía fotografías de calidad profesional y textos elaborados, algo que la mayoría de los entrenadores no produce.
- Los diseños se rompían con contenido real: biografías cortas, imágenes de distintas proporciones, fotos tomadas con el móvil.
- La página no lograba retener la atención del tráfico proveniente de redes sociales ni comunicar el valor del entrenador con suficiente rapidez para convertir.
Solución
Estructuramos el proyecto en dos líneas de trabajo paralelas, ambas regidas por un único principio: el resultado debe verse profesional antes de que el entrenador haya realizado ninguna personalización.
Objetivos del proyecto
El encargo requería dos entregables diferenciados:
Parte 1 — Plantillas de pantalla de la app: diseñar la V1 (tema oscuro) para todos los tipos de pantalla principales, cubriendo cada estado relevante que puede encontrar el cliente de un entrenador. Entregar además dos variantes de tema claro.
Parte 2 — Landing page del entrenador: rediseñar la plantilla de landing page para escritorio y móvil. El diseño debe mantenerse visualmente sólido con contenido imperfecto generado por el propio entrenador y adaptarse a cualquier color de marca.
Investigación
Antes de comenzar el diseño, mapeamos toda la superficie de pantallas del producto e identificamos todos los estados que requerían cobertura.
Para la landing page, analizamos el embudo de captación de entrenadores — Instagram → landing page → registro — e identificamos las variables de contenido alrededor de las cuales debíamos diseñar: fotos de baja calidad, imágenes de distintas proporciones, textos cortos o excesivos, y un único color de marca sin paleta secundaria.
Enfoque
1. Plantillas de la app
Actividad, no suposiciones. El bloque de estadísticas del dashboard fue renombrado de «Estadísticas» a «Actividad» y reconstruido con un sistema de valores alternativos flexible. Cuando un entrenador no ofrece seguimiento nutricional, el bloque muestra Récords Personales — Récord Personal del Ejercicio 1, Récord Personal del Ejercicio 2 — manteniendo el dashboard relevante para cualquier disciplina deportiva.
Estados vacíos con contexto. Las pantallas vacías fueron rediseñadas como estados de orientación. Cuando el usuario tiene un programa personal asignado, la agenda lo presenta directamente: Tu programa de entrenamiento — [Fase del entrenador], con un tono conversacional, como si fuera un mensaje del propio entrenador. Cuando el usuario está en un plan estándar, el estado muestra recomendaciones inteligentes: Recomendado para ti porque [motivo] — reduciendo la fricción e impulsando el inicio de programas sin requerir intervención del entrenador.
Resumen del programa en el dashboard. El estado y el progreso del programa se muestran directamente en el dashboard, eliminando un paso de navegación y dando al usuario orientación inmediata al entrar.
Variantes de navegación. Se diseñaron dos enfoques para la barra de navegación: una barra inferior clásica (familiar para la mayoría de plataformas) y dos variantes de encabezado — con logotipo y sin él — para entrenadores que priorizan su identidad de marca.
Variantes de tema. Junto a la V1 en tema oscuro: una variante mixta claro-oscuro y una completamente clara, pensadas para entrenadores de wellness, lifestyle y yoga.
2. Landing page
Diseñada para contenido real. Cada decisión de diseño fue probada en condiciones de peor caso: una biografía de tres frases, una foto principal tomada con el móvil y una tarjeta de programa con un título largo. El diseño se mantiene en todos estos escenarios.
Sistema de un solo color de marca. Con un único color definido por el entrenador, construimos un sistema de gradientes y acentos que genera profundidad y coherencia visual de forma automática, sin necesidad de una paleta secundaria. Botones, acentos y la sección CTA derivan todos de este único color.
Lógica de colapso de texto. Si la biografía del entrenador o el texto de una sección supera un umbral de caracteres, se colapsa automáticamente con un control «Leer más». La integridad del diseño se mantiene independientemente de cuánto o cuán poco escriba el entrenador.
Flexibilidad del encabezado. Compatible con versiones del logotipo en negro y en blanco sobre el color de marca del entrenador, sin necesidad de ajuste manual.
Estructura de la página: escritorio + móvil:
-
Hero: Nombre del entrenador · 3 puntos clave del titular · Biografía de 2–3 frases (con colapso) · CTA de App Store / Play Store o botón «Comenzar» · Tres pantallas de móvil en paralelo
-
Elementos de funciones flotantes: 3–5 funciones definidas por el entrenador, posicionadas junto a las pantallas del móvil, coloreadas automáticamente desde la paleta de marca
-
Sobre el entrenador: Retrato o hasta 5 imágenes de avatar · Biografía breve
-
Bloque Antes / Después: Comparación lado a lado o carrusel · Robusto ante imágenes de distintas proporciones
-
Bloque de programas: Cuadrícula de tarjetas · Título · Duración · CTA por tarjeta
-
Bloque de video: Reproductor integrado o miniatura con icono de reproducción
-
Testimonios: Hasta 5 imágenes de avatar con citas · Desplazamiento horizontal en móvil
-
Sección CTA: Gradiente del color de marca · Una sola acción
Qué logramos
1. Plantillas de la app
Diseñamos un conjunto completo de plantillas predeterminadas que cubren cada paso del recorrido del cliente de un entrenador: desde el primer acceso hasta el uso activo de múltiples programas. Cada estado es intencional: sin callejones sin salida, sin suposiciones sobre lo que ofrece el entrenador.
- Más de 10 estados de pantalla para 6 pantallas principales
- V1 tema oscuro completamente diseñado
- 2 variantes de tema claro (mixto y completamente claro)
- Bloque de actividad flexible con visualización alternativa de récords personales
- Estados vacíos con contexto para flujos de usuarios personales y estándar
- Resumen del programa integrado en el dashboard
- Dos variantes del sistema de navegación
2. Landing page
Rediseñamos la landing page del entrenador para que funcione en las condiciones reales en que trabajan: un color de marca, fotos tomadas con el móvil y textos escritos en cinco minutos entre sesiones. Escritorio y móvil, ocho bloques, totalmente adaptable.
- Versiones escritorio + móvil entregadas en Figma
- Cobertura completa de secciones — 8 bloques
- Sistema adaptable de un solo color de marca con lógica de gradiente automático
- Colapso de texto para contenido generado por el entrenador
- Rendimiento sólido con contenido de baja calidad y formato mixto
- Compatibilidad con logotipo en negro y blanco en el encabezado
Resumen: soluciones entregadas para equipos e industrias
La plataforma de Ymove tiene éxito cuando los entrenadores lanzan con confianza y sus clientes se involucran de inmediato. Ambos resultados dependen de la primera impresión que controla la plataforma: la plantilla predeterminada de la app y la landing page que el entrenador comparte con su audiencia.
El rediseño garantiza que, independientemente de cuánto contenido suba un entrenador, de la calidad de sus fotos o de la niche en la que opere, el resultado refleje calidad profesional desde el primer día. Desarrollado con la experiencia de Toimi en diseño de producto y desarrollo móvil.
Las plantillas se ven profesionales desde el primer día — nuestros entrenadores pueden lanzar con confianza sin tocar ningún ajuste de diseño.
Tosh Koevoets, CEO y fundador, Ymove
