top of page

Trayn-U

Trayn-U es una aplicación de fitness diseñada en torno a un ecosistema de tres perfiles: gimnasios, entrenadores personales y clientes. El objetivo fue diseñar una app móvil unificada que permite a los gimnasios mostrar sus instalaciones, a los entrenadores gestionar y asignar programas de entrenamiento, y a los clientes medir su progreso de forma dinámica.

Trayn-u estructura
Trayn-u app mockup móvil

Diseño de Producto End-to-End para un Ecosistema de Fitness Multiperfil

Mi Rol: Lead Product/Diseñador UX

Colaboradores: Desarrollador

Responsabilidades: Benchmark de competencia, Arquitectura de Información multiusuario, Wireframing multiplataforma, Sistema de iconografía personalizada, Animación y UI Motion, y Documentación para Handoff a Desarrollo.

Tools: Photoshop, Illustrator, Adobe Premiere

Reto

El principal desafío consistió en gestionar la alta complejidad operativa del sistema. Al funcionar de manera completamente distinta según el tipo de usuario que inicie sesión, el diseño debía adaptarse a flujos de trabajo específicos sin dar la sensación de ser tres aplicaciones independientes. Necesitábamos evitar la fatiga cognitiva del usuario mientras diseñábamos funciones dinámicas e interactivas (como contadores con animación por ejercicio y mapeo de grupos musculares) que pudieran ejecutarse de manera fluida.

Investigación y Estrategia
  • Benchmark de Competencia: Analicé las principales aplicaciones de fitness del mercado para identificar vacíos en sus flujos de producto. Noté que la mayoría de los competidores se enfocaban únicamente en una relación lineal: cliente-app o cliente-entrenador, dejando fuera a los gimnasios como actores clave y estratégicos dentro del negocio.
     

  • Pivote Estratégico: Estructuré Trayn-U para conectar el espacio físico con el entrenamiento digital. La identidad visual se diseñó intencionalmente para transmitir dinamismo y motivación al cliente final, manteniendo una interfaz clara, funcional y estructurada para la gestión B2B.

Gym's Journey overview

Gym Journey

Trainer's Journey overview

Trainer Journey

Cilent's Journey overview

Client Journey

Fitness Routine Process

Proceso de Rutina

Arquitectura de Información Multiperfil y Wireframing

Para garantizar una navegación fluida en tres ecosistemas distintos, definí arquitecturas de información independientes adaptadas a las metas de cada usuario:
 

  1. Dashboard de Gimnasios (Vista de Gestión): Una interfaz optimizada para dar visibilidad a las instalaciones, promocionar servicios y gestionar el catálogo de entrenadores vinculados.
     

  2. Workspace de Entrenadores (Vista B2B): Un layout altamente funcional pensado para la gestión rápida de clientes, seguimiento de rendimiento y un creador modular de rutinas para asignar programas de entrenamiento de forma ágil.
     

  3. App para Clientes (Vista B2C): Un dashboard interactivo con métricas de duración de rutinas, estimación de calorías quemadas, temporizadores integrados y visualización de zonas musculares trabajadas.

Visual Execution & Purposeful Motion
  • Custom Iconography: Using Illustrator, I built a cohesive, intuitive custom iconography library from scratch.

  • UI Motion & Training Animations: Using Photoshop and Premiere, I designed smooth animation loops to illustrate proper exercise form. Rather than using static images, these animations were mapped directly to real-time UI counters that dynamically highlighted specific muscle groups, giving the client clear physiological feedback.

  • Cross-Functional Developer Collaboration: Because this was an intricate concept, I worked closely with a developer throughout the design and prototyping phases. By discussing structural limits and asset constraints early on, we ensured that the complex layout transitions, timer loops, and animated assets were fully optimized.

Resultados

While the product was not pushed to a live market release, the design process successfully translated a complex, three-sided platform into a seamless, high-fidelity interactive prototype. By delivering a granular UI kit, structured information architectures, and fully optimized animation assets, the final handoff packet provided a complete, production-ready framework prepared for full-scale engineering.

Video Promocional

bottom of page