UX/UI Caso de estudio: Ementh, la experiencia definitiva en el mundo crossfit
El principal desafío ha sido el de aglutinar y simplificar funcionalidades complejas, que hasta este momento estaban separadas en distintas apps y obtener un buen balance entre funcionalidad y diseño.
Experiencia de usuario y diseño de interfaz por Jorge Cantalejo; desarrollo por Adrián Porcel.
Punto de partida
Construir un producto digital todo en uno, una plataforma de gestión interna para la gerencia de los boxes de crossfit (gimnasios), además de una aplicación móvil para uso de los alumnos.
Para tener una visión más amplia y comprender las necesidades y los problemas de los usuarios, tuvimos muy en cuenta los tipos de personas que intervienen o hacen uso de este tipo de aplicaciones, según su rol, segmentamos a los usuarios en tres grupos principales: gerentes, entrenadores y alumnos. Además hicimos otros subgrupos para el alumnado, teniendo en cuenta su nivel y técnica de entrenamiento.
Ajustándonos a las limitaciones del proyecto en cuanto a tiempo y recursos, decidimos crear un MVP (Producto mínimo viable), planteado para evolucionar con el paso del tiempo.
Entendiendo a los usuarios
Tras un proceso previo de investigación en las principales tiendas de aplicaciones, redes sociales y foros, comenzamos a identificar los posibles problemas y necesidades más comunes existentes en los usuarios. Con el respaldo de las entrevistas, validamos y priorizamos las primeras ideas, esto nos marcó el camino a seguir y en definitiva, nos ayudó a tomar buenas decisiones.
Con el objetivo de empatizar con cada tipo de usuario, creamos los personajes (user personas) que representan a cada uno de los segmentos establecidos, en base a ciertos patrones y preferencias. Esto facilita la creación de distintos escenarios o casos de uso, en los que se identifican las posibles fricciones o estados de ánimo del usuario al interactuar con el producto en diferentes situaciones y entornos del día a día.
A partir de ahí teníamos muy claro que necesitábamos construir una aplicación con una gran usabilidad, muy fluida y funcional. Para todos los públicos, independientemente de su grado de afinidad con la tecnología.
Un ecosistema digital compuesto por una web-app para la parte de gestión y una app móvil para el alumnado.
Las funcionalidades principales
- Gestión de clases: por parte de gestores y entrenadores, la capacidad de crear, organizar y ver información de las clases creadas. Por parte de los alumnos, poder ver las clases disponibles, apuntarse o desapuntarse, y ver los detalles de una clase.
- Programa de entrenamientos: por parte de gestores y entrenadores, la posibilidad de planificar y publicar sus wods (rutinas del día). Para los alumnos un sistema de entrenamiento preconfigurado y sincronizado con el cronómetro según la rutina.
- Chat: con el fin de resolver dudas generales hay contacto directo entre alumnos y gestores, por otra parte, para todo lo relacionado con clases y rutinas, un chat entre alumnos y entrenadores.
- Sorteos: por parte de gestores, la posibilidad de realizar sorteos entre sus alumnos de forma automática, además, según el tipo de suscripción que tengan en Ementh, anualmente tienen un pase de regalos exclusivos para sus alumnos. Por parte de los alumnos participar pulsando un botón y ver el estado de los sorteos.
Organizando el contenido
Cruzamos todos los datos obtenidos de los usuarios y del análisis de la competencia, los organizamos, estructuramos y etiquetamos para finalmente reflejarlos en un diagrama que nos ayude a visualizar la relación entre ellos, esto incluye niveles de jerarquía, interacciones y flujos.
Esbozando las primeras versiones
Siguiendo el diagrama, comenzamos a realizar los primeros bocetos en papel, para explorar de forma rápida las diferentes ideas y opciones, haciendo especial hincapié a la navegación y estructuración del contenido.
Una vez decidida la alternativa más viable, con la finalidad de explicar la idea al resto de integrantes del equipo, se llevó a cabo el diseño de los wireframes de media fidelidad en Figma.
Diseño visual e interacción
En cuanto al diseño de interacción y al diseño visual nos centramos inicialmente en el universo iOS, para llegar al nivel detalle, calidad y exclusividad que se espera de una app en este tipo de dispositivos. Posteriormente lo trasladamos a Android, teniendo en cuenta las diferencias y limitaciones existentes entre ambos sistemas operativos.
Apostamos por usar como base un tono oscuro dominante, muy presente en toda la escena fitness, crossfit y cross training. Podemos apreciar como en estos entornos aparece constantemente en suelos, paredes y material deportivo.
Combinamos esta base oscura con el naranja corporativo que refleja la identidad enérgica de la marca y un blanco roto para aportar mayor dinamismo, contraste y legibilidad.
Fuerza, solidez, funcionalidad… estos son valores que la marca necesita trasmitir, por ello optamos por una combinación tipográfica que estuviese perfectamente equilibrada en su conjunto.
Basement Grotesque para titulares y textos más impactantes, unido a una fuente sans serif, moderna y de diseño geométrico, que se caracteriza por su alto nivel de legibilidad en párrafos y otros textos más funcionales, Manrope.
Los patrones de uso y los gestos son parte fundamental de la experiencia de uso en iOS y Android. Los usuarios están acostumbrados a utilizarlos y los aprenden rápidamente. Por ello, los aprovechamos para conseguir una interfaz fácil de usar y agradable al uso.
Cuando hablamos de facilidad de uso, entra en escena un concepto muy importante que es la familiaridad, nos apoyamos en patrones de uso previamente aprendidos e interiorizados por los usuarios.
Empleamos los gestos de manera consistente en toda la interfaz. Por ejemplo, el gesto de deslizar se utiliza para desplazarse por las listas y las páginas en todas las secciones de la aplicación.
Para terminar
Uno de los desafíos más complejos de este proyecto ha sido el de comprender y desgranar los entrenamientos y los ejercicios tan variados que existen en crossfit e integrarlos en el temporizador, en definitiva son muchas combinaciones, tabata, for time, amrap y emom son algunos de los tipos de entrenamientos más habituales. El principal logro aquí es que cada bloque de ejercicios viene preconfigurado, por lo que en dos toques, el usuario puede empezar a entrenar, sin necesidad de tener que configurar manualmente el temporizador.
Aquí no termina el viaje…
En el próximo post, nos adentraremos en las peculiaridades de la landing page, desgranando cada decisión de diseño que da vida a la marca y conecta al público objetivo con el servicio que ofrece Ementh.
👀 — ¿Quieres descubrir más contenido de este proyecto? visita mi web.
