Rediseñando la app de Imagym
Imagym es una cadena de gimnasios low cost abierta 24 horas. Su app sirve para entrar al gimnasio, reservar clases y pagar, pero sus socios la usaban sobre todo para abrir la puerta. Investigué por qué y la rediseñé con ellos.
- Mi papel
- Investigación, UX y UI
- Herramientas
- Figma, Google Forms, Optimal Workshop
- Contexto
- Coderhouse, 2023
Proyecto académico: un rediseño propuesto por mí, no encargado por Imagym. Las pruebas se hicieron con socios reales del gimnasio en Santander.
El punto de partida
La app de Imagym hace bastantes cosas: abre la puerta del gimnasio con un código QR, guarda el historial de accesos, permite reservar o anular plaza en clases colectivas y pistas, y gestiona los datos personales y los pagos.
Al revisarla vi que apenas cumplía su función. La idea era buena, pero no se aprovechaba lo que tenía que ofrecer: las partes más flojas eran Sports OnDemand, la sección de vídeos de entrenamiento, y las noticias, que casi nadie veía. Necesitaba mucho trabajo en lo visual y en la usabilidad.
Qué dicen los socios
Antes de dibujar nada, pregunté. Hice entrevistas cualitativas online semiestructuradas con Google Forms a socios de Imagym en Santander.
Lo que dijeronEl QR convence; el resto, no tanto
Motivaciones
Es una app sencilla. Entrar al gimnasio con el QR les resulta cómodo, y desde ahí reservan clases y gestionan la suscripción.
Desmotivaciones
La videoatención al socio es poco práctica: prefieren un chat de incidencias o un bot. Visualmente no atrae y la disposición de los elementos es muy mejorable.
Lo que más se usa
Entrar al gimnasio, reservar plaza en clases colectivas y controlar los pagos mensuales.
Lo que menos se usa
Las noticias no se ven y pocos se interesan por ellas. La sección de documentos no se usa y el control de accesos aporta poca información útil.
Una pregunta clave¿Es fácil recordar dónde está cada cosa?
La mitad de las respuestas cae entre «difícil» y «normal»: una app de uso diario debería recordarse sin pensar.
Lean UX CanvasDel problema a las hipótesis
Problemas
- No tiene un diseño armónico.
- La videoatención no funciona ni es útil.
- «Mi cuenta» es confusa.
- Falta información en el listado de clases.
- Las noticias pasan desapercibidas.
Tipos de socio
- Quien entrena por libre.
- Quien necesita orientación profesional.
- Quien va a clases colectivas.
Hipótesis
- Con las noticias en el inicio, estarán más informados.
- Más control sobre su perfil mejora la experiencia.
- Sports OnDemand se usará más si se presenta de otra manera.
Soluciones
- Facilitar el acceso al gimnasio.
- Cambiar la videoatención por un chat de atención al socio.
- Más información en las clases colectivas.
- Noticias en el inicio y una interfaz rediseñada.
Cómo medirlo
- Más socios usando la app.
- Más reservas desde la app.
- Más visualizaciones de Sports OnDemand.
Ver el lienzo original completo
Mapa de trayectoriaMarta quiere probar una clase nueva
Recorrí paso a paso cómo reservaría por primera vez una clase colectiva una socia de 30 años: no se podían aplicar filtros, no había información de la clase (tipo de ejercicio, intensidad…), ni recordatorio previo, ni encuesta de satisfacción al terminar.
Ordenar la app
Para saber si el problema era la estructura, hice un tree testing con Optimal Workshop: los participantes recorrían el árbol de contenido de la app, sin diseño, y tenían que encontrar dónde hacer dos tareas.
Tarea 1
«Estás en la puerta del gimnasio y ves un cartel que dice que accedas a la app para escanear el código QR.»
Tarea 2
«Quieres empezar algún tipo de actividad para ponerte en forma y conocer gente.»
PropuestaUna arquitectura nueva
Con los resultados reorganicé la app alrededor de lo que de verdad se usa: las noticias pasan al inicio, entrar al gimnasio tiene su propio acceso directo, el entrenamiento personal reúne citas, rutinas y Sports OnDemand, y las clases colectivas pasan a «Actividades», con filtros e información de cada clase.
PrioridadesQué hacer primero
Una matriz de valor para el socio frente a facilidad de implementación ayudó a decidir el orden. Lo más valioso y a la vez más fácil de hacer quedó arriba a la derecha: el chat de soporte y un onboarding al entrar por primera vez; justo detrás, dar más información de las clases colectivas.
Flujos y wireframesLas dos tareas, dibujadas
Una app con la que apetece entrenar
El objetivo era que la app fuera más amigable y cercana, y que esa sensación se trasladara a las instalaciones. Empecé por cómo habla.
UX writingLa voz de Imagym
Mensajes dinámicos y alegres, con frases amistosas.
Mensajes directos, palabras sencillas y nada de confusión.
De tú a tú, con palabras familiares y actitud confiada.
El tono cambia según el momento: inspirador y amistoso en el inicio y en las reservas; serio y profesional en la cuenta y el inicio de sesión.
Sistema visualColor, tipografía y rejilla
Color
#BA007C
#FADAEF
La paleta parte del rosa de la marca, con el negro de fondo en las pantallas principales.
SF Pro Display, la tipografía de iOS
| Estilo | Peso | Tamaño / interlineado |
|---|---|---|
| Large Title | Regular | 34 / 41 |
| Title 1 | Regular | 28 / 34 |
| Title 2 | Regular | 22 / 28 |
| Headline | Semibold | 17 / 22 |
| Body | Regular | 17 / 22 |
| Footnote | Regular | 13 / 18 |
Rejilla de 5 columnas de 47 px, medianil automático y márgenes de 20 px.
ComponentesPiezas que resuelven problemas concretos
MovimientoCuatro animaciones con motivo
Apertura
Recuerda al abrir la app que Imagym abre 24 horas: refuerza la identidad de la marca.
Transiciones
Cambian de pantalla sin transformar los elementos: el escenario cambia y el socio no se pierde.
Swipe
Deslizar para cambiar de día hace más fácil y dinámico elegir cuándo entrenar.
Cambio de estado
El botón se transforma al apuntarse o borrarse de una clase colectiva, para confirmar la acción.
Prototipo de alta fidelidadLas pantallas finales
Con socios de verdad
Con el prototipo en Figma, hice pruebas presenciales con tres socios de Imagym en Santander, elegidos entre los encuestados y contactados por WhatsApp. Las sesiones se hicieron en su móvil y se grabaron; yo las moderé y después las analicé viendo las grabaciones.
Quería saber tres cosas: si reconocían y usaban los atajos del inicio o seguían con sus costumbres, dónde se atascaban (los puntos de dolor) y cómo se sentían con los cambios.
Tarea 1 · Entrar al gimnasio
«Estás en la puerta y un cartel te pide pasar por el escáner el código QR de la app de Imagym.»
Tarea 2 · Reservar una clase
«Te gusta montar en bici, pero lleva unos días haciendo muy malo y decides apuntarte a spinning.»
ResultadosTodos completaron las dos tareas
| Tarea | U1 | U2 | U3 | Media |
|---|---|---|---|---|
| Entrar al gimnasio · tiempo | 20 s | 26 s | 22 s | 22,6 s |
| Entrar al gimnasio · pasos | 2 | 2 | 2 | 2 |
| Reservar una clase · tiempo | 35 s | 45 s | 30 s | 36,6 s |
| Reservar una clase · pasos | 4 | 3 | 3 | 3,3 |
| Tarea completada | Sí | Sí | Sí | 100 % |
Lo que observé en cada sesión, resumido:
Experiencia muy positiva: el diseño le resultó atractivo y fácil de usar, con botones en la pantalla principal para llegar rápido a lo importante.
La app le resultó fácil e intuitiva, aunque tuvo algo de dificultad para reservar la clase: fue la que más tardó.
Destacó tener todas las herramientas esenciales desde la pantalla principal y una interfaz limpia, sin información innecesaria.
Lo que funcionó
Gustó mucho estéticamente, resultó intuitiva y todas las herramientas son accesibles desde el inicio. Los atajos se reconocieron y se usaron.
Lo que no funcionó
Se echó en falta una confirmación al reservar la clase, y poder pedir la cancelación de la reserva con su propia confirmación.
Ver el guion de las sesiones
- Introducción: presentarme, explicar que es mi proyecto final del curso de UX/UI y agradecer su ayuda.
- El prototipo: aclarar que es un prototipo y que algunas funciones pueden no estar disponibles.
- Su papel: usar la app con naturalidad y decir lo que piensa; se evalúa el producto, no a la persona.
- La sesión: cada tarea a su ritmo; no hay respuestas correctas ni incorrectas.
- Grabación: pedir permiso para grabar y poder revisarla después.
- Tareas y cierre, con espacio para preguntas y comentarios.
Lo que me llevo
Conclusión
Los socios valoraron el rediseño por intuitivo y fácil de usar. Los atajos del inicio fueron útiles y se reconocieron enseguida, y destacaron la importancia de un diseño más amigable y moderno, en línea con otras apps que ya usan.
Siguiente paso
Lo más pedido: confirmar la reserva de una clase y poder cancelarla, también con confirmación.
Retrospectiva
Añadiría un onboarding la primera vez que se abre la app, para que la curva de aprendizaje sea mínima.
Pruébalo tú
El prototipo de alta fidelidad está en Figma: entra al gimnasio con el QR o apúntate a una clase.