Prototipo

Antes de rediseñar

La APP de IMAGYM es una herramienta que da soporte una cadena de gimnasios low cost.

Con esta aplicación se puede acceder a las instalaciones y llevar un control de tus accesos. A demás se puede reservar o anular una plaza para las clases colectivas y pistas.

Desde el apartado del usuario se pueden consultar los datos personales y/o modificarlos.

Con la app también se puede consultar los pagos realizados, hacer pagos pendientes y modificar el método de pago.

ESTRATEGIA

¿POR QUÉ LO HICE?

Tras inspeccionar la aplicación de IMAGYM he podido observar que a penas cumple su función y que a pesar de tener buena intención no se saca todo el partido a lo que la app tiene que ofrecer.

Las flaquezas mas importantes que he apreciado son la parte de SPORTS OnDEMANT Y NOTICIAS.

Creo que la app necesita mucho desarrollo en cuanto a lo visual y usabilidad.

ENCUESTA

¿CÓMO LO HICE?

Para saber que opinan algunos usuarios de la app del gimnasio, realicé entrevistas cualitativas online semiestructuradas. Utilizando como herramienta Google Forms.

Lo que dijeron los usuarios

Motivaciones

Es una aplicación sencilla, los usuarios que usan esta app, encuentras cómodo el acceder a las instalaciones mediante un código QR, desde la app pueden reservar clases y gestionar su suscripción al gym.

Desmotivaciones

Video atención al socio es poco practico, consideran mas útil un chat de incidencias o con un bot.
Visualmente no es atractiva y la disposición de los elementos es muy mejorable.

Observaciones

Lo que más se usa

Los usuarios usan la app principalmente para acceder a las instalaciones y reservar su plaza en clases colectivas, también es importante llevar el control de pagos mensuales.

Lo que menos se usa

Las noticias no están visibles, y pocos usuarios muestran interés por este apartado. El apartado documento tampoco se usa y el apartado de control de accesos aporta información poco relevante.

¿Qué tan fácil es recordar dónde están las funciones más importantes cada vez que entras en la app?

LEAN UX CANVAS

MAPA DE TRAYECTORIA

Información de la arquitectura

ARQUITECTURA ACTUAL

Realizo un Tree Testing de la estructura actual de la APP para comprobar que tan intuitiva es y ver posibles puntos de mejora

Testeos

Las pruebas las realizaré con la herramienta de Tree Testing de Optimal Workshop, presenté el árbol de contenido de la app y pediré a los usuarios de prueba que realicen dos tareas.

Primera tarea:

“Estas en la puerta del gym y ves un cartel en la puerta que dice que accedas a la app para escanear el código qr”

Con este ejercicio queríamos ver que tan fácil era para el usuario acceder al establecimiento mediante QR.

Segunda tarea:

“Quieres iniciar algún tipo de actividad para ponerte en forma y conocer gente”

La intención de este ejercicio es averiguar la facilidad con la que se reserva una clase nueva.

Propuesta arquitectura

ARQUITECTURA NUEVA

Tras el Tree Testing propongo una nueva arquitectura para mejorar la experiencia de usuario y usabilidad de la app.

Prioridades y objetivos

MATRIZ DE VIABILIDAD, FACTIBILIDAD Y DEASEABILIDAD

Task Flow y wireframes

El usuario deberá usar la app para generar un codigo Qr para acceder a las instalaciones del gimnasio.

Task flow de acceso al gym

Wireframes de acceso al gym

El usuario deberá usar la app para generar un codigo Qr para acceder a las instalaciones del gimnasio.

Task flow para reservar una clase colectiva

Wireframes para reservar una clase colectiva

Aspectos superficiales

UX writing

APP PARA SOCIOS DEL GYM

App que permite identificar al usuario para acceder al gym ademas se puede usar para gestionar entrenamientos y pagos.

Con el objetivo de mejorar la experiencia del servicio, vamos a tomar en cuenta las sugerencias de los usuarios y los mejores estándares de la industria.

La idea es conseguir que los usuarios tengan una experiencia mas amigable y cercana cuando utilicen la app y esta experiencia se traslade a las instalaciones.

MATRIZ DE VOZ

TONO

Guía de estilos

Identidad e imagen de marca

COLORES

TIPOGRAFÍA

Grilla

-Columnas: 5
-Ancho de columnas: 47
-Medianil: auto
-Márgenes der./izq.: 20

Iconos

Componentes y patrones

CARDS

NAVEGACIÓN E INTERACCIONES

ANIMACIONES

CARGA DE LA APP (OPENING)

-Fundamentación:
Se utilizará para reforzar la identidad de la marca, para darle personalidad.

-Relación con el proyecto y marca:
Imagym es una cadena de gimnasios low-cost con servicio 24/7 la app debe dar soporte por eso el inicio de la app se recuerda que es 24.

Transiciones

-Fundamentación:
Se utilizará para para cambiar de pantalla en pantalla sin transformar elementos.

-Relación con el proyecto y marca:
Cambia escenarios de la app

Swipe

-Fundamentación:
Se utilizará para reforzar la sensación ral de transición transformando los elementos.

-Relación con el proyecto y marca:
Elegir de manera mas fácil y dinámica el día que quiere ver el usuario.

Cambio de estado

-Fundamentación:
Se utilizará para cambiar el estado de un elemento.

-Relación con el proyecto y marca:
En este caso la transformación indica la inscripción/desinscripción en una clase colectiva.

Wireframes de propuesta

Insights de testeos presenciales

En esta etapa de la investigación, luego de considerar diversas alternativas para abordar las hipótesis planteadas desde el principio, hemos construido un prototipo de alta fidelidad que empleamos para realizar pruebas con usuarios reales de IMAGYM, con el fin de identificar oportunidades de mejora y profundizar en la experiencia que estos usuarios tienen con la aplicación.

Metas

Transiciones

Se busca determinar si los usuarios valoran la incorporación de atajos en la pantalla principal para realizar tareas, y si logran reconocerlos como tal, o si prefieren seguir usando los métodos actuales por costumbre. Además, se pretende evaluar si las nuevas rutas propuestas son eficientes y sencillas de utilizar en la aplicación en su totalidad.

Puntos de dolor

La tarea consiste en identificar los puntos problemáticos en el flujo de las tareas, donde los usuarios experimentan interrupciones, tardan más tiempo de lo normal para completar la tarea, dudan sobre qué acción tomar o simplemente desconocen cómo seguir avanzando en el proceso.

Satisfacción

El objetivo es recopilar información cualitativa sobre la experiencia de los usuarios al utilizar la aplicación y cómo se sienten con los cambios realizados en la misma. Además, se pretende obtener aportes de los usuarios que puedan ser útiles para mejorar la navegación y usabilidad de la aplicación.

Entrevistas

Formato

Las pruebas se realizan en un formato presencial desde un smartphone y son grabadas para su observación.

Moderador

Ronald Herrera

Observador

Ronald Herrera (mediante la visualización de las grabaciones)

Prototipo

Clic aquí para ir al Prototipo en alta fidelidad de Figma.

Guion

1.Introducción:

Hola, soy Ronald y estoy realizando un curso de Diseño UX/UI en CoderHouse. Como parte de mi proyecto final, estoy rediseñando una aplicación llamada IMAGYM. Muchas gracias por ofrecerte a ayudarme con esta sesión de prueba. ¿Podrías por favor decirme tu nombre?

2.Presentación del prototipo:

La aplicación que vas a probar se llama IMAGYM APP, es un prototipo de una aplicación de entrenamiento físico que estoy diseñando como parte de mi proyecto final. Quiero aclararte que esta aplicación es un prototipo, lo que significa que algunas de las características o funciones pueden no estar disponibles o no funcionar correctamente. Por favor, házmelo saber si tienes alguna pregunta antes de comenzar.

3.Rol del participante:

Durante esta sesión de prueba, tu papel es muy importante. Necesito que pruebes la aplicación de la manera más natural posible y que me proporciones tus impresiones y opiniones. Quiero que sepas que no estás siendo evaluado, sino que estamos evaluando el producto. Se utilizará para para cambiar de pantalla en pantalla sin transformar elementos.

4.Sesión de prueba:

Antes de comenzar la prueba, quiero asegurarme de que estés cómodo y que entiendas las tareas que te voy a pedir que hagas. Quiero que sepas que puedes hacer las tareas a tu propio ritmo y que no hay respuestas correctas o incorrectas.

5.Grabación:

Por último, quiero pedirte permiso para grabar esta sesión de prueba con el fin de poder revisarla después y mejorar la aplicación. ¿Estás cómodo con que grabemos la sesión?

6.Tareas:

Ahora, pasemos a las tareas que tienes que realizar durante esta sesión de prueba. Hay un total de tres tareas que debes realizar, y cada una de ellas se centra en una función específica de la aplicación. Por favor, sigue las instrucciones que te daré y realiza las tareas de la manera más natural posible.

Conclusión:

Excelente trabajo! Muchas gracias por tu ayuda en esta sesión de prueba. Toda la información que me proporcionaste será extremadamente valiosa para mejorar el diseño de la aplicación. Si tienes alguna pregunta o comentario adicional, no dudes en hacérmelo saber.

Tarea 1 - Acceder al gym

Estas en la puerta del gym y hay un cartel qu indica que tienes que pasar por el escáner un código QR que encontraras en la app de IMAGYM.

-Objetivo:
El usuario deberá usar la app para generar un codigo Qr para acceder a las instalaciones del gimnasio.

Tarea 2 - Reservar una clase

Te gusta montar en bici, pero lleva unos días haciendo muy malo y decides apuntarte a spinning

-Objetivo:
El usuario deberá usar la app para reservar una plaza en una clase colectiva de spinning

Usuarios

Perfil de los usuarios

-3 usuarios (2 mujeres y 1 hombre)
-El rango de edad es de 26 a 37.
-100% de la ciudad de Santander (España) y clientes de IMAGYM

Reclutamiento

Seleccionamos a tres usuarios de la lista original de encuestados para nuestra investigación y nos comunicamos con ellos a través de WhatsApp. Realizamos pruebas presenciales con cada uno de ellos.


Resultados

100%

De los usuarios completaron exitosamente la tarea.

22.6

Segundos de media para completar la tarea 1

36.6

Segundos de media para completar la tarea 2

Lo que funcionó

Estéticamente ha gustado mucho, es bastante intuitiva y todas las herramientas son accesibles desde el inicio.

Lo que no funcionó

Se echó en falta una confirmación de reserva de case y una solicitud de cancelación de reserva y su respectiva confirmación.

Conclusiones

Conclusión

Los usuarios expresaron su satisfacción con el rediseño propuesto, destacando su aspecto intuitivo y fácil de usar. Además, los atajos presentados resultaron ser útiles y prácticos, siendo ampliamente utilizados y reconocidos por los usuarios. Asimismo, señalaron la importancia de contar con un diseño más amigable y moderno en la aplicación, en línea con las tendencias actuales de otras aplicaciones similares, como el que se propuso en el rediseño.

Recomendación

La recomendación más relevante de los usuarios fue la de añadir una confirmación de reserva de case y una solicitud de cancelación de reserva y su respectiva confirmación.

Retrospectiva

Incluir un onboarding al inciar la app por primera vez para que la curva de aprendizaje sea minima.

GRACIAS
POR VER