MuscleApp - Reporte UX

Reporte UX Alumno ZABALEGUI, Ignacio M. Tutora ARIAS CHICA, Valentina Camada 6690

Introducción

Si quieres un sitio genial, tendrás que testearlo. Después de haber trabajado en el, incluso algunas semanas, ya no puedes verlo con claridad.

Sabes demasiado.

La única manera de averiguar si realmente funciona, es testeandolo.

El presente reporte ilustra el camino recorrido y la toma de decisiones que fuimos desandando hasta concretar nuestro prototipo funcional.

Steve Krug.

(Consultor de Usabilidad y autor del libro “Don’t make me think”)

2

Contenido

0.

1.- MVP 2.- Personas 3.- Benchmark 4.- Arquitectura de InformaciĂłn (AI) 5.- User Flow 6.- Wireframes 7.- Test de Usabilidad 8.- Moodboard 9.- DiseĂąo UI 10.- Prototipo Funcional

MVP

1. a - Problema b - Objetivo c - Soluciรณn d - Storytelling + Main Features

MVP DEFINICIONES INICIALES Determinar el MVP para nuestro producto requiere, en primera instancia, definir claramente los siguientes elementos.

PROBLEMA: Como consecuencia del aislamiento, muchas personas se han visto imposibilitadas de realizar actividad física normalmente, ya sea por no poder ir al gimnasio, o porque han tenido dificultades para organizar sus días y/o semanas para adecuar su entrenamiento a esta “nueva normalidad”, ya sea por falta de conocimientos o por falta de equipamiento.

OBJETIVO: Que el usuario pueda mantener/recuperar su actividad física, de una manera simple y práctica desde la comodidad de su hogar, sin equipamiento o con el menor equipamiento posible.

SOLUCIÓN: Desarrollar una app móvil que permita al usuario calendarizar y organizar sus sesiones de entrenamiento. Con ella se buscará brindar todas las herramientas necesarias en un solo lugar, al punto de que el usuario pueda sentir que cuenta con “un entrenador personal en el bolsillo”.

Zabalegui, Ignacio M. | Reporte UX

5

MVP STORYTELLING MuscleApp es una aplicación móvil de entrenamiento personal, que te permite calendarizar, organizar y customizar tus sesiones de entrenamiento, ofreciendo todo lo que necesitas en un solo lugar.

Podrás personalizar tu rutina de acuerdo a tu preferencia, elegir una predefinida dentro de nuestra biblioteca, llevar tu entrenamiento al siguiente nivel con los programas integrales por objetivos.

Zabalegui, Ignacio M. | Reporte UX

Main Features Brindar la posibilidad de programar y calendarizar las sesiones de entrenamiento por día/semana/mes, etc.

Permitir la configuración de entrenamientos de tipo personalizado según necesidades del usuario. Ya sea por características o duración.

Contar con un Timer flexible y adaptable a las necesidades de entrenamiento del usuario.

6

Personas

2. a - Arquetipo 1 (Germรกn Peralta) b - Arquetipo 2 (Jimena De Leรณn)

Personas POV Germán tiene 30 años, vive en Paraná, Entre Ríos. Es mecánico, aficionado a los deportes y los fines de semana juega al fútbol en una liga local. Necesita, de alguna manera, reemplazar sus sesiones de entrenamiento en el gimnasio, por una variante que pueda realizar en su casa. Porque desde el cierre de los gimnasios por la cuarentena, siente que está perdiendo condición física y teme que esto repercuta en su rendimiento deportivo.

Metas Adaptar una habitación disponible en su casa para poder entrenar de manera regular.

Recuperar su forma física, previa a la cuarentena lo antes posible.

Ponerse en contacto con su entrenador para que le facilite alguna rutina o ejercicios, algo pueda hacer en su casa, para que su rendimiento no se vea tan afectado por el tiempo de inactividad.

Frustraciones Ver disminuir su rendimiento deportivo.

Con la imposibilidad de jugar al fútbol y el cierre de los gimnasios por la cuarentena, no puede entrenar ni practicar deporte como quisiera.

No contar con el equipamiento necesario para entrenar.

Zabalegui, Ignacio M. | Reporte UX

8

Personas POV Jimena es una persona muy espiritual, nació en Bahía Blanca, tiene 27 años y se mudó a Bs. As. persiguiendo el sueño de ser profesora de yoga. Necesita aprovechar este tiempo de cuarentena, en el que las prácticas se han visto interrumpidas, para entrenar su fuerza física general. Ya que había empezado a trabajar con este objetivo y le preocupa que este parate detenga su progreso.

Metas Ser profesora de Yoga.

Hacerse de equipamiento básico para recuperar parte de su rendimiento perdido.

Poder organizar mejor sus tareas, de modo que pueda dedicarle más tiempo a su entrenamiento.

Frustraciones Desde el inicio de la cuarentena ha notado una pérdida de flexibilidad.

La falta de equipamiento, le impide entrenar su fuerza de la manera adecuada. Como consecuencia de esto, su performance se ve afectada en algunas rutinas.

Está “trabada” con una rutina de Yoga y no logra terminar de completarla.

Zabalegui, Ignacio M. | Reporte UX

9

Benchmark

3. a - Aspectos analizados b - Conclusiones

Benchmark ANร LISIS DE LA COMPETENCIA

Aspectos analizados Usabilidad/Navegaciรณn Usabilidad/Uso del espacio Vocabulario/Contenido Vocabulario/Tono Accesibilidad/Contenidos Accesibilidad/Contraste y legibilidad

Zabalegui, Ignacio M. | Reporte UX

11

Benchmark CONCLUSIONES A partir del análisis antes mencionado, determinamos las fortalezas y debilidades, que, a nuetro entender, tienen las 4 apps que tomamos como competencias potencial para esta comparativa.

Zabalegui, Ignacio M. | Reporte UX

Fortalezas

Debilidades

- Claridad en la manera de mostrar los accesos en el dashboard.

- Buena agrupación de contenidos en el menú.

- Incorporación de alarmas en el cronómetro de ejercicios. Buena uso del timer para los ejercicios por tiempo.

- Cómoda manera de planificar los entrenamientos diarios.

- Buen seguimento de las sesiones realizadas.

- Biblioteca de videos de ejercicios. lo que permite revisar la manera correcta de realizarlos, no solo durante la sesión de entrenmiento.

-El selector de grupos musculares no le permite al usuario combinarlos a su gusto, sino que tiene opciones/combinaciones ya preestablecidas.

- El timer para la modalidad de rutinas en circuitos condiciona la dinámica de la sesión.

- Buena agrupación de contenidos en la barra de navegación.

- Amplia variedad en cuanto al tipo de entrenamientos que se pueden realizar.

- Biblioteca de videos de ejercicios. lo que permite revisar la manera correcta de realizarlos, no solo durante la sesión de entrenmiento.

- Apartados específicos para rutinas de calentamiento previo y estiramientos post entrenamiento.

- No tiene la posibilidad de armar rutinas personalizadas.

- Facilidad de acceso al asistente para crear tu propia rutina.

- Biblioteca de videos de ejercicios. lo que permite revisar la maneracorrecta de realizarlos, no solo durante la sesión de entrenmiento.

- Acceso libre para realizar los entrenamientos que presentan semana a semana en su canal de YouTube.

- Versatilidad para trabajar tanto con pesas como sin ningún tipo de equipamiento.

-El selector de grupos musculares permite combinarlos a su gusto.

- No tiene alertas sonoras que le permitan al usuario guiarse mejor durante el entrenamiento.

-El timer no es eficiente para los ejercicios unilaterales.

- Biblioteca de videos de ejercicios. lo que permite revisar la manera correcta de realizarlos, no solo durante la sesión de entrenmiento.

- Acceso libre para realizar los entrenamientos que presentan semana a semana en su canal de YouTube.

- Versatilidad para trabajar tanto con pesas como sin ningún tipo de equipamiento.

-El selector de grupos musculares permite combinarlos a su gusto.

-Sección dedicada para técnicas paso a paso para desarrollar trucos propios de la calistenia.

-Tienda de equipamiento y ropa para entrenar dentro de la app.

- No tiene alertas sonoras que le permitan al usuario guiarse mejor durante el entrenamiento.

-El timer no es eficiente para los ejercicios vunilaterales.

12

4.

Arquitectura de informaciรณn (AI) a - Card Sorting b - Mapa de Sitio

AI Cardsorting

Matriz de similaridad

La modalidad elegida fue la de CardSorting abierto, más allá de que contábamos con categorías de base. El objetivo principal de llevarlo adelante en esta modalidad fue el de validar dichas categorías iniciales y, eventualmente, poder hacer los ajustes/cambios necesarios, surgidos de la información brindada por los usuarios.

Zabalegui, Ignacio M. | Reporte UX

14

AI Cardsorting (Resultados) A continuación presentamos los resultados obtenidos en el estudio de CardSorting.

Las conclusiones se tomaron a partir del análisis de 10 usuarios que participaron de la actividad.

Conclusiones A modo de apreciación general, nos fue posible corroborar relaciones y categorías que a priori, teniendo en cuenta el workflow planteado, fueron consideradas como potencialmente pertinentes. Principalmente en lo referido a las categorías principales.

Consideraciones puntuales El alto porcentage de vinculación entre la actividad por intervalos/ repeticiones (80%), que propusieron los usuarios, superó lo esperado.

Lo que valida nuestra intención de agruparlos dentro del Timer.

Mas allá de la asociación del cronómetro clásico a los valores predefinidos de tiempo, los usuario lograron vincularlo en buena medida (40%), al entrenamiento por intervalos de repeticiones/tiempo. Validando nuevamente nuestra propuesta para de funcionamiento del Timer.

El importante grado de vinculación de los apartados de planificación y de compartir con lo referido al perfirl del usuario, nos da la pauta que también es necesario incluirlos dentro de esta sección.

Como en el punto anterior, los apartados de planificación y compartir obtuvieron un buen porcentage de vinculación (40%), por lo que el hecho de compartir desde el calendario es una funcionalidad a considerar.

Zabalegui, Ignacio M. | Reporte UX

15

AI

Mapa de sitio

A partir de los resultados obtenidos del estudio de CardSorting y de las conclusiones que pudimos obtener con su análisis, proponemos el siguiente árbol de categorías. (*) https://whimsical.com/BiByNL2gpcpswjJbynHhJg@7YNFXnKbYjWDyakt3TkW3

Zabalegui, Ignacio M. | Reporte UX

16

Userflow

5. a - Flujo completo b - Recorrido (Arquitipo 1) c- Recorrido (Arquitipo 2)

Userflow

Flujo completo

Considerando las “main features” propuestas en nuestro MVP, proponemos el siguiente diagrama de flujo. (*) https://whimsical.com/SCY8qnWnNVsoUT7FXCGjCv

Zabalegui, Ignacio M. | Reporte UX

18

Userflow Recorrido (Arquetipo-1) Se muestra el camino que podría seguir la primera persona propuesta.

En este caso el usuario se propone seguir una rutina de entrenamiento proporcionada por su preparador físico, motivo por el cual se consideró acertado que le fuera de utilidad la herramienta del timer, en cualquiera de sus variantes.

Zabalegui, Ignacio M. | Reporte UX

19

Userflow Recorrido (Arquetipo-2) Se muestra el camino que podría seguir la segunda persona propuesta.

En este caso el usuario busca un entrenamiento autogestionado y adaptable a sus necesidades específicas, motivo por el cual se consideró acertado que optara por la herramienta del entrenador personal, en cualquiera de sus variantes.

Zabalegui, Ignacio M. | Reporte UX

20

Wireframes

6. a - Dashboard b - Timer c- Rutina de entrenamiento

Baja

Wireframes

Media

Alta

Dashboard TransiciĂłn de la pantalla inicial, desde lo propuesto en los wireframes en baja, hasta se desarrollo en alta.

Se incluye tambiĂŠn un comentario de un usuario, a partir del cual surgiĂł un cambio.

Alta final

User

Zabalegui, Ignacio M. | Reporte UX

... Los puntos en el calendario son para marcar si entrenaste o no? Tildes y cruces me parece q es un lenguaje mas facil de entender que solo puntos...

22

Wireframes Timer Transiciรณn de la pantalla donde se muestra el timer activo.

Zabalegui, Ignacio M. | Reporte UX

Baja

Media

Alta

23

Wireframes Rutina de entrenamiento Transiciรณn de la pantalla donde se muestra la rutina seleccionada y lista para dar comienzo al entrenamiento.

Zabalegui, Ignacio M. | Reporte UX

Baja

Media

Alta

24

Test de Usabilidad

7. a - CaracterĂ­sticas del test b - Resultados

Test de usabilidad Características del test

Introducción

Presentación del test. Descripción general de la experiencia y preguntas que consideramos clave para ubicarnos mejor en el punto de partida de nuestro usuario.

Hola, bienvenido/a. Mi nombre es Ignacio y vamos a llevar adelante el testeo de una aplicación móvil pensada para ser una guía para desarrollar actividad física y poder entrenar de manera autogestionada. Estamos en una instancia de prueba de prototipos, por lo que puede suceder que no todo funcione a la perfección.

Igualmente, no hay una manera correcta o incorrecta de hacer las cosas.

Por lo tanto, te pedimos que recorras la aplicación con total naturalidad, ya que la evaluación que realizaremos no es sobre tu desempeño, sino sobre la respuesta de la aplicación. También es necesario que vayas pensando en voz alta a medida que realices las tareas en el prototipo, que nos relates los pasos que vas desandando durante el proceso y las distintas situaciones que las que te vas encontrando.

Por último, nos sería de gran ayuda si nos permitieras grabar la prueba, si estás de acuerdo por supuesto.

La duración de la prueba es de 10 min, y nosotros te proporcionaremos todo lo necesario para que puedas llevarla adelante. La misma consiste en completar una serie de tareas, determinadas por objetivos específicos. ¿Sos aficionado/a a algún deporte? ¿Cuál? ¿Realizas actividad física con regularidad?

Si así fuera, ¿qué opinión te merece el uso de aplicaciones de entrenamiento? ¿Has intentado usar alguna de las existentes?

Zabalegui, Ignacio M. | Reporte UX

26

Test de usabilidad Características del test

Guión

Guión, objetivos y tareas a realizar por el usuario.

Usted es una persona activa y amante de los deportes, el confinamiento lo ha dejado sin la posibilidad de realizar actividad física, tanto al aire libre como en un gimnasio. Esta situación lo tiene un tanto preocupado, sobre todo por la incertidumbre de cuándo puede llegar a restablecerse la situación.Tuvo la oportunidad de hablarlo con un amigo y le comentó que había encontrado una aplicación que podía ayudarlo a organizar su dinámica de entrenamiento.

Objetivos de la prueba Organizar sesiones de entrenamiento.

Que el usuario pueda explorar las distintas rutinas.

Tareas a realizar Programar una sesión de entrenamiento para un día de la semana.

Completar una rutina según sus necesidades.

Zabalegui, Ignacio M. | Reporte UX

27

Test de usabilidad Resultados A partir de la experiencia de los usuarios durante el test de usabilidad, recabamos información que nos permitió seguir iterando y mejorando nuestro prototipo.

Situaciones vividas por el usuario La navegación le resulto lu suficientemente intuitiva como para encotrar las tareas que debía realizar, pero hubo pantallas en las que no le fue posible volver a la anterior.

Logró programar una rutina dentro del planner semanal de manera exitosa, pero encontró confusa la manera de verla reflejada en la grilla del dashboard. De igual manera consideró que el hecho de usar solo puntos (de distintos colores), para diferenciar los días en lo que se realizaron rutinas de los que no, no era demasiado claro.

Su recorrido por las distintas modalidades de entrenamiento no fue del todo fluido, se encontró con listados y pantallas que no lograba comprender. Más allá de estos inconvenientes, pudo llegar iniciar una rutina de entrenamiento.

Durante su búsqueda de rutinas, notó la falta de algún indicador de la duración de las mismas. Consideró importante incluir este dato, sobre todo pensando en la programación de cada sesión de entrenamiento.

Zabalegui, Ignacio M. | Reporte UX

28

Moodboard

8. a - Referencias gráficas

Moodboard Referencias gráficas

Aplicaciones similares

A continuación incluimos recursos gráficos, prácticas utilizadas por aplicaciones similares, uso de fotografía y colores, entre otros elementos que nos sirvieron de inspiración para el diseño de MuscleApp.

Zabalegui, Ignacio M. | Reporte UX

30

Moodboard Referencias gráficas

Fotografía

A continuación incluimos recursos gráficos, prácticas utilizadas por aplicaciones similares, uso de fotografía y colores, entre otros elementos que nos sirvieron de inspiración para el diseño de MuscleApp. Recursos gráficos

Zabalegui, Ignacio M. | Reporte UX

Colores

31

Diseño UI

9. a - Atomic Design . Tipografía . Paleta de colores . Navegación e iconografía . Campos de texto y botones . Interacción y progreso

Diseño UI Atomic Design En este apartado presentamos, por separado, los diferentes elementos que forman parte de la interfaz gráfica de MuscleApp.

Tipografía Título de sección Título de descripción Título de tarjeta

Montserrat / SemiBold / 18px MONTSERRAT / SEMIBOLD / 14PX

Texto de párrafo

Roboto / Regular / 16px

Texto botón

ROBOTO / MEDIUM / 14PX

Texto tooltip

Zabalegui, Ignacio M. | Reporte UX

MONTSERRAT / EXTRABOLD / 20PX

Roboto / Italic / 12px

33

DiseĂąo UI Atomic Design

Paleta de colores

En este apartado presentamos, por separado, los diferentes elementos que forman parte de la interfaz grĂĄfica de MuscleApp.

Zabalegui, Ignacio M. | Reporte UX

34

Diseño UI Navegación e iconografía

Atomic Design En este apartado presentamos, por separado, los diferentes elementos que forman parte de la interfaz gráfica de MuscleApp.

Drawer

Barra de nav. top

Tarjetas

Modal

Iconografía principal

Zabalegui, Ignacio M. | Reporte UX

35

DiseĂąo UI Campos de texto y botones

Atomic Design En este apartado presentamos, por separado, los diferentes elementos que forman parte de la interfaz grĂĄfica de MuscleApp.

Zabalegui, Ignacio M. | Reporte UX

Inputs

FAVs

Switchs

Checkboxes

36

Diseño UI Interacción y progreso

Atomic Design En este apartado presentamos, por separado, los diferentes elementos que forman parte de la interfaz gráfica de MuscleApp.

Zabalegui, Ignacio M. | Reporte UX

Botones

Indicadores de progreso

37

Prototipo funcional

10. a - Elevator Pitch b - Probando MuscleApp

Prototipo funcional Elevator Pitch ¿Sabía usted que como consecuencia del confinamiento y el cierre de los gimnasios a causa de la pandemia del COVID-19, el (*) 42% de la gente no está realizando ningún tipo de actividad física? Pensando en esto, he diseñado MuscleApp, una aplicación móvil de gestión de entrenamiento personal que permite organizar, planificar y llevar adelante sesiones de entrenamiento de una manera práctica, sin equipamiento y en la comodidad del espacio de su preferencia. ¿Me daría su tarjeta?

Me gustaría coordinar una reunión y comentarle más sobre mi proyecto. (*) https://www.infobae.com/coronavirus/2020/04/15/preocupados-por-la-economia-tras-la-pandemia-y-mas-sedentarios-asi-pa san-los-argentinos-la-cuarentena/ Zabalegui, Ignacio M. | Reporte UX

Prototipo funcional Probando MuscleApp Experimentá vos mismo el funcionamiento de nuestra aplicación. Podés acceder al prototipo desde el siguiente enlace: Modelo en Adobe XD

Zabalegui, Ignacio M. | Reporte UX

ยกMuchas gracias!