Caso de estudio · UI/UX

Rediseño de fichas de clases para facilitar la toma de decisiones

Bestcycling es una plataforma de entrenamiento online con clases dirigidas de ciclo indoor, entrenamiento funcional, pilates, elíptica y más. Tras detectar que muchos usuarios tenían dificultades para elegir, dentro de un catálogo extenso, la sesión que mejor se adaptaba a sus necesidades, se planteó un rediseño de las fichas de clase con el objetivo de reducir el tiempo de decisión y aumentar la satisfacción.

Proyecto
Bestcycling
Trabajo
UI · UX · Wireframe · Prototipado · Handoff
Plataformas
Mobile Web Desktop
Herramientas
Figma Figjam
Pantallas del rediseño de la ficha de clase de Bestcycling: vistas de ciclo indoor con métricas técnicas, distribución de cadencias y zonas de frecuencia cardíaca.

Problema

Información insuficiente para decidir

Originalmente, las fichas de clase ofrecían información básica: duración, dificultad e instructor. Sin embargo, el feedback de los usuarios revelaba que estos datos eran insuficientes para decidir si una sesión se alineaba con sus objetivos.

En ciclo indoor, se detectó la necesidad de conocer métricas específicas como la cadencia predominante o la distribución del trabajo entre tiempo sentado y de pie. En entrenamiento funcional, la falta de información sobre los ejercicios y el espacio necesario dificultaba la planificación.

A esto se sumaba la ausencia de detalles sobre el estilo musical —un factor crítico para la motivación— y la invisibilización del catálogo histórico, que provocaba que los usuarios repitieran sesiones conocidas por miedo a no acertar con el contenido nuevo.

Esta falta de visibilidad no solo generaba frustración y reducía el engagement, sino que limitaba el descubrimiento de un catálogo extenso con sesiones perfectamente válidas para cada perfil de usuario.

Punto crítico de fricción

El problema no está durante el entrenamiento, sino antes de empezar. El usuario necesita reducir la incertidumbre en el momento de decidir qué clase elegir.

Research & Discovery

Escuchando a los usuarios reales

Para entender el problema en profundidad, se realizó un análisis combinando investigación cualitativa y cuantitativa, extrayendo señales de tres fuentes principales.

Feedback de usuarios

Muchos usuarios mencionaban sentirse inseguros al elegir clase, repitiendo sesiones conocidas por comodidad más que por eficacia.

Comunidad de usuarios

Surgieron ideas directas sobre qué les ayudaría a decidir mejor: filtros de intensidad, cadencia máxima o estilo musical de la sesión.

Métricas de visualización

Las clases más recientes acumulaban mayor visualizaciones, mientras que sesiones previas quedaban olvidadas en el catálogo.

Insight clave

La dificultad de descubrimiento y selección limitaba la exploración del catálogo. Los usuarios no tenían suficiente información para arriesgarse a probar algo nuevo.

Algunos ejemplos de comentarios de usuarios:

  • "No puedo con cadencias altas de pie. ¿Sería posible elegir las cadencias máximas que quieres hacer de pie? Porque la verdad es que me frustra bastante no llegar."

    Usuario A

  • "Buenos días, tengo 71 años y me gustaría encontrar clases con cadencias entre 60 y 70. Todas las que he encontrado tienen tramos de más de 70 y de pie. Me adapto bien a las resistencias, pero no mucho a la velocidad."

    Usuario B

  • "¿Se podría filtrar las clases de ciclo por cadencia de pedaleo? Lo sugiero porque desde hace unos meses llevo arrastrando un problema de rodilla y lógicamente las clases con cadencias altas las tengo que descartar."

    Usuario C

  • "Me parece que hay música super buena de actualidad con la que aún no se ha trabajado en vídeos. Espero que me tengáis en cuenta."

    Usuario D

Definición

User Journey Map y toma de decisiones

Un User Journey Map es una representación visual del proceso que sigue un usuario para alcanzar un objetivo con un producto o servicio, mostrando sus acciones, pensamientos, emociones y puntos de contacto. Esta herramienta permite identificar momentos de fricción y oportunidades de mejora en cada etapa del recorrido.

En este proyecto, elaboré un micro-journey centrado en el momento crítico previo al entrenamiento, donde los usuarios experimentaban mayor incertidumbre sobre intensidad, cadencia, música y exigencia de la sesión.

User Journey Map del proceso de selección de clase en Bestcycling: fases de búsqueda, evaluación, decisión y entrenamiento, con emociones y puntos de fricción identificados.

Micro-journey del momento previo al entrenamiento — identificación de fricciones y oportunidades

Solución

Elección y ordenación de preferencias musicales

Todas las clases se etiquetaron con los estilos musicales presentes, indicando el porcentaje aproximado de cada género. Esto permite al usuario anticipar el ambiente musical de la sesión antes de comenzar.

Además, se implementó un sistema de preferencias personales que permite seleccionar y ordenar los estilos favoritos, e indicar los géneros que no desea escuchar. Estas preferencias se integran directamente en las recomendaciones de clases, mejorando la personalización y la motivación.

Etiquetado por géneros musicales

Cada clase muestra los estilos presentes con su porcentaje aproximado de aparición durante la sesión.

Ordenación de preferencias

El usuario define su ranking de géneros favoritos y los que prefiere evitar, que se integran en el sistema de recomendaciones.

Pantallas del flujo de configuración de preferencias musicales en Bestcycling: selección de géneros favoritos y lista de géneros a evitar.

Flujo de configuración de preferencias musicales

Ficha de clase de ciclo indoor

Se diseñó una ficha más completa y visual, con datos técnicos que reducen la subjetividad y ayudan a tomar decisiones informadas. El objetivo era que cada usuario pudiera valorar objetivamente si una sesión se ajustaba a su nivel, sus limitaciones físicas o sus objetivos del día.

  • Nivel de TSS (Training Stress Score)
  • Distribución de tiempo sentado vs. de pie y tiempo máximo sentado consecutivo.
  • Tiempo de pie a cadencias altas, porcentaje de tiempo en cada rango de cadencias (bajas, medias, altas) y cadencia máxima.
  • Zonas de frecuencia cardíaca o potencia, visualizadas de forma clara.

Resultado de diseño

Además de las métricas técnicas, se integraron clases relacionadas y recomendaciones personalizadas basadas en sesiones previas valoradas positivamente, considerando tanto el tipo de entrenamiento como el estilo musical preferido.

Ficha de clase de entrenamiento funcional

Se incorporaron vídeos en loop de cada ejercicio junto con su descripción, lo que permite al usuario anticipar el contenido de la sesión de forma mucho más clara que con texto o imágenes estáticas.

Para el usuario

  • Anticipar el contenido y organizar el espacio y material necesarios.
  • Conocer el nivel de exigencia e identificar ejercicios problemáticos por lesión.
  • Practicar y familiarizarse con los movimientos antes de la sesión.

Para la plataforma

  • Mayor accesibilidad al incluir descripciones visuales claras de cada ejercicio.
  • Aumento del engagement por la reducción de la barrera de entrada a clases nuevas.
  • Fomento de la exploración del catálogo con clases relacionadas integradas.

Diseño multiplataforma: web y escritorio

Tras diseñar y optimizar las fichas de clase en la app móvil, llevé estas mejoras también a la versión web y a la aplicación de escritorio. El reto consistió en garantizar la misma experiencia completa en todas las plataformas, adaptando interfaces y flujos a las particularidades de cada entorno sin perder coherencia visual ni funcional.

Gracias a esta adaptación, la plataforma amplió su alcance y accesibilidad, permitiendo aprovechar todas las funcionalidades desde cualquier dispositivo.

iOS · Android
Web
Escritorio

Creación de un UI kit como punto de partida

Para lograr la coherencia entre la web y la versión de escritorio con la app móvil, planteé un pequeño sistema de diseño. Como punto de partida, audité todas las plataformas del producto identificando componentes duplicados, patrones inconsistentes y elementos que se habían ido acumulando sin una base común.

El sistema no se llegó a desarrollar en toda su profundidad dado que formaba parte de un equipo pequeño y yo era la única diseñadora, responsable también de plantear y diseñar las nuevas funcionalidades del producto. No obstante, sirvió para establecer una base sólida sobre la que trabajar de forma consistente y escalable.

Trabajo realizado

  1. Auditoría de todas las plataformas del producto: mobile y desktop

  2. Documentación de las bases: colores, tipografías, espaciados e iconos.

  3. Diseño de componentes básicos: botones, inputs, cards, etc.

Documentación de tamaños de textos, colores e iconos
Documentación de principales componentes como botones, inputs, checkboxes y cards de clases

Primitivos y componentes básicos del UI kit de Bestcycling

Para esta nueva funcionalidad fue necesario crear nuevos componentes y generar instancias de los existentes adaptadas a las distintas plataformas y resoluciones, manteniendo siempre la coherencia con el sistema base establecido.

Adaptación del diseño de fichas de clase de Bestcycling a la versión web y escritorio: vistas de ciclo indoor y funcional con la nueva información técnica y musical.

Adaptación multiplataforma de las fichas de clase a web y aplicación de escritorio

Más proyectos

Año: 2024 · Tipo de cliente: B2C · Categoría: SaaS

Mejora del seguimiento y la adherencia a través de la personalización del plan nutricional

Ver proyecto

Año: 2025 · Tipo de cliente: B2C · Categoría: Ecommerce

Auditoría de accesibilidad WCAG y mejoras de la experiencia de usuario

Ver proyecto

¿Hablamos?

Si tienes cualquier propuesta, idea creativa u oferta de colaboración, estaré encantada de escucharte. No dudes en ponerte en contacto conmigo.

Email LinkedIn