Femfit — UX/UI Case study

Haz ejercicio desde casa, con ayuda de tus amigas

Article also available in English

Responsabilidades

Entrevista a stakeholder:

• Grupo de 5 personas de la comunidad Píldoras UX

Mis responsabilidades:

• UX Research
• Testing
• Visual Design
• Animaciones
• Prototipado

Introducción

Hace unos meses, entré en un grupo de trabajo de Píldoras UX para crear una app a partir de un stakeholder real proporcionado por Gema, existiendo una oportunidad única para crear un producto basado en necesidades y frustraciones reales de un negocio en tiempos de pandemia.

UX Research

Entendiendo el reto

Previamente a la entrevista con la stakeholder, analizamos en grupo toda la información disponible online acerca del negocio en su página web (mujerydeporte40) y redes sociales. Comprobamos que actualmente su negocio se enfoca en ejercicios y hábitos saludables para mujeres a partir de 40 años, siendo sus principales actividades las clases online, quedadas presenciales, así como consejos sobre alimentación y salud. Además, cuenta con una tienda donde adquirir merchadising o clases grabadas previamente.

Estructuramos la información de su web en diversas keywords para, posteriormente, organizarla en dos bloques, “servicios” y “usuarias”. De esta forma, construimos un guion con preguntas clave sobre su negocio, seguido de una sesión de brainstorming para crear otras preguntas, y así, conseguir información más específica de cara a las necesidades y frustraciones que ella observa en sus clientas y que actualmente afectan al negocio.

Entrevista con la Stakeholder

Divididos en 9 bloques temáticos y con 16 preguntas en total, nos dispusimos a averiguar si algunas de nuestras hipótesis acerca de sus usuarias y negocio eran ciertas.

Insights de la entrevista

“Mi intención es que las mujeres mayores de 40 años, tengan una motivación para cuidarse y hacer deporte, a través de las emociones, nutrición, etc.”

“Muchas tienen problemas para entrar en Zoom, no son muy tecnológicas.”

“Me contactan a través de Instagram, allí son mas participativas. En Facebook me contacta gente de mi edad, 53–54 años, pero miran más que participan.”

“No practican deporte o hace mucho que lo practicaron. Solo suelen caminar.”

“Quieren gimnasia, hipopresivos.”

“Hay gente a la que le costaba entrar a los entrenamientos, así que decidí grabarme y vender las clases por 10€.”

“Las usuarias me proponen qué ejercicios hacer. Odian los que son de tipo cardio, pero, el gran problema que identifico es la falta de movilidad.”

“Ahora mismo no tienen motivación porque Zoom no les gusta, no invita tanto a socializar como cuando estaban cara a cara. De 26 personas que entrenaban conmigo ahora solo lo hacen 4.”

Con estos insights podemos sacar las siguientes conclusiones:

• Tienen un nivel tecnológico medio-bajo, pero conocen y acceden al negocio a través de Instagram.
• Buscan las clases para hacer ejercicio, pero lo que hace que sigan la rutina es socializar con otras personas.
• Aunque les cueste acceder a Zoom, saben usar redes sociales y apps simples a nivel de usabilidad.
• Las usuarias suelen proponer ejercicios, inclinándose a realizar aquellos con un menor nivel de intensidad.
• Los ejercicios relacionados con la etapa del climaterio (gimnasia, elasticidad, suelo pélvico) son los mas demandados.

Protopersona

Al no disponer de datos de las usuarias a través de entrevistas o encuestas, diseñé una protopersona basándome en las características que podíamos intuir con los datos proporcionados por la stakeholder, centrándome en necesidades y frustraciones clave.

Protopersona de Isabel Torres

Definí a Isabel como una mujer de 48 años, que debido a la pandemia, ha perdido motivación y se encuentra estancada en la monotonía; a pesar de que se ha marcado como objetivo en esta etapa vital el cuidarse y tomarse más en serio su estilo de vida.

Sobre todo, busca conectar con otras mujeres en una situación similar, lo que también la ayuda a crear el hábito de hacer ejercicio.

Mínimo producto viable

Antes de proseguir con el desarrollo, establecí de manera clara la función y utilidad principal de la app: clases en directo con mujeres en la etapa de climaterio y poder hacer ejercicio desde casa junto con otras mujeres. También ideé otros requisitos que tenía que cumplir para aportar valor de cara a las usuarias.

MVP de Femfit

Kano model

A continuación, usé el Kano model para comprobar dónde deberían residir las principales características que tenía en mente dentro de los ejes de “satisfacción” y “funcionalidad”, para así tener en cuenta de cara al futuro qué detalles hay que priorizar y profundizar.

Kano Model de Femfit

Value Proposition

Teniendo ya claro las funcionalidades principales, realicé la proposición de valor de mi producto, encajando las frustraciones con las características que pueden aliviar dichas barreras. Un ejemplo de ello son las clases grupales con otras mujeres o amigas, que la ayudan a motivarse a hacer ejercicio. Además, me ayudó a cuadrar mejor las ventajas que podía proporcionar el producto junto con los beneficios que las usuarias adquieren de la app (como salir de dicha zona de comfort y socializar mientras hacen ejercicio).

Customer Journey

Una vez tenía claras las necesidades y frustraciones de la protopersona, las funcionalidades que podía ofrecer mi producto y cómo estas encajan con lo que necesita y beneficia a la usuaria, desarrollé el Customer Journey. Describí los problemas e insights que atraviesa nuestra usuaria en las diferentes fases, además de las acciones que suele realizar, para contrastarlo con Use cases que podrían funcionar.

Customer Journey de Isabel

En la primera fase, comprobamos que la usuaria no encuentra una app que recoja clases en directo y ejercicios específicos.

Al descubrir la app y sus funcionalidades, la usuaria se muestra otra vez activa y sorprendida con las diferentes posibilidades que ofrece, algunas de ellas, imposibles fuera del ámbito digital.

Después de faltar asiduamente a sus clases, se da cuenta de que sigue necesitando a alguien a su lado que le dé apoyo y tire de ella en los momentos en los que le cuesta más. Aquí entra en juego la parte social del producto, en la que sus amigas la invitan a hacer clases dúo, mientras crea nuevos lazos con otras mujeres en las clases online. De esta forma, adquiere el hábito de ir a las clases y usar la app regularmente.

Site map

Creé un site map para aterrizar y agrupar las funcionalidades clave en aquellas secciones que esperamos encontrar en una app de entrenamientos y ejercicio, distinguiendo entre: aquellas secciones primarias, más accesibles y fundamentales, y las secundarias, aquellas también necesarias pero, que se focalizan más en complementar a las principales.

Site Map para Femfit

User Flow

Junto con el site map, desarrollé el recorrido típico de una usuaria al abrir la app, ayudándome a plasmar mejor los diferentes pasos clave necesarios para acceder a las clases de la manera más rápida y cómoda.

Gracias a esto, comencé a trabajar en diferentes bocetos sobre las diferentes pantallas que componen la app.

User flow de la app

Sketches

Comencé a plasmar las diferentes pantallas de la app. Trabajé en papel y lápiz para comprobar la mejor opción de cara a la usabilidad, intentando mantener una sensación de simplicidad y ligereza en todo momento. Quería lograr que el acceso a una clase fuese directo y rápido, sin perder de vista otras secciones como “Calendario” o “Chats”.

Establecí los sketches según un teléfono de unas 4,7", ya que es la dimensión más cercana al tipo de móvil habitual en ese rango de edad, aparte de ser más fácilmente escalable a otros dispositivos con mayor pantalla.

Mid-fi Wireframes

Una vez tenía claras las diferentes pantallas que componen la app, añadí componentes y características de una forma fidedigna, priorizando las funcionalidades, componentes y requirimientos, antes que la parte visual.

También comencé a desarrollar las diferentes interacciones y modales, completando todos los diferentes aspectos para lograr un primer prototipo testeable.

Testing

Decidí prototipar y testear con los mid-fi wireframes para descubrir errores o funcionalidades mal implementadas, antes de pasar a la siguiente fase de diseño visual. Así, ahorré tiempo y esfuerzo para cambiar cualquier aspecto del producto.

Debido al tiempo disponible y bajos costes para testear, realicé un guerrilla testing con familiares y amigas de mi entorno cercano, siempre y cuando cumpliesen con las características definidas en la protopersona. Finalmente realicé las pruebas con 4 mujeres entre los 50 y 65 años de edad, usuarias que practican o han practicado deporte en clases grupales o gimnasios, y con un nivel tecnológico medio-bajo.

Algunos de los resultados del test fueron:

• Todas las usuarias confunden el botón de “compartir” como el de “salir”, al estar más familiarizadas con los iconos de “compartir” de Android que los de Instagram.
• Todas las usuarias son incapaces de entender qué se les pide en la animación de ejercicio postural.
• La mayoría de las usuarias identifican los consejos como publicidad, evitando entrar en ellas y no entiendiendo realmente su función dentro de “buzón”.
• Algunas usuarias manifiestan un rechazo evidente al leer la palabra “menopausia” o dolencias relacionadas con la misma.
• Algunas usuarias tienen problemas al pulsar varios botones, como los iconos de calendario o chat.

Para acceder a la hoja de cálculo con los resultados, haz click aquí.

A pesar de que la mayor parte de las usuarias logró disfrutar de la app sin problemas críticos, estaba claro que había que reformular diversos componentes del producto. Cambiar algunos iconos de la sección “clases” por otros más comunes, buscar una nueva forma de integrar los consejos en el buzón, así como cambiar por completo la animación para los ejercicios posturales. Estas fueron solo algunas de las correcciones más urgentes de cara a una segunda iteración.

Iteraciones

Después de las pruebas de testeo, solo unos cuantos componentes fueron sujetos a modificaciones importantes, como el tamaño de algunos iconos y la concepción de una nueva animación. Eso me dejó algo de tiempo para concentrarme en hacer algunos cambios sustanciales que podrían ayudar a las usuarias en la secciones de “calendario” y “buzón”.

En primer lugar, el calendario se mejoró para reflejar algunas guidelines útiles de Material design en cuanto a date pickers. En esta segunda revisión, se añadió un selector para el día en que la usuaria se encuentra, además de resaltar mejor la fecha seleccionada por la usuaria para comprobar las clases.

La segunda iteración también afectó a la forma en la que se muestra la hora de las clases en directo, pasando de aparecer como un subtítulo a estar integrado dentro de la tarjeta.

Basándome en algunos de los feedbacks que obtuve en la fase de testing, alteré la pantalla “buzón” para separar mejor los consejos de los chats, quedando así mas claro qué puede esperar a primera vista en cada sección.

Visual Design

Inspiraciones

Antes de empezar el apartado visual, reuní diferentes referencias en cuanto a estilo y colores de otras apps con una temática relacionada al ejercicio, salud femenina, y streaming.

Paleta de colores

Al ser una app destinada en exclusiva al sector femenino, el color principal de la paleta de colores debía reflejar un color innatamente asociado a la feminidad y ampliamente establecido en nuestra sociedad. Cuenta, además, con un degradado para mostrar un sentimiento de evolución y recorrido, al igual que sucede a medida que una persona avanza de nivel mientras se ejercita.

Como contraste y acento a dicho color, el azul claro funciona para resaltar todos aquellos iconos y textos importantes que de otra forma pasarían desapercibidos en un primer vistazo.

Tipografía

Debido a que en primera instancia, mi producto esta pensado para dispositivos iPhone, la mejor opción que se me vino a la cabeza fue la familia tipográfica San Francisco. Sus reducidas dimensiones mientras garantiza la legibilidad, integran bastante información en el mínimo espacio sin demasiados problemas.

Iconografía

Los iconos y badges fueron escogidos y diseñados para ejemplificar una experiencia simple y agradable a la vista, con esquinas y bordes redondeados, con un estilo joven y cercano. Ilustran conceptos que, de otra forma, serían muy difícil de conseguir, como por ejemplo, aquellos que definen las diferentes características de los ejercicios.

Nombre y logo

A la hora de definir el nombre, tenía en mente algo que pudiese representar los conceptos de “mujer” y “ejercicio”. Después de un breve brainstorming, decidí que Femfit unificaba bastante bien ambas ideas, además, es también extrapolable a otros idiomas. La doble F tiene un toque distintivo, siendo, igualmente, corto, preciso y fácil de memorizar.

Para diseñar el logo y marca, en un primer momento intenté sin éxito usar las dos “f” que coexisten en el nombre, junto con un estilo de líneas suaves y cercanas, similar a dos mujeres haciendo ejercicio. Esta idea me resultó muy sugerente, al estar fuertemente relacionada con la característica de la app para realizar ejercicios junto a otra persona. Una vez empecé a testear el diseño en pantallas para móvil, vi que existía demasiada información y el resultado distaba de ser minimalista y sencillo. Finalmente, fui perfeccionando la idea hasta conseguir un diseño limpio, logrando con pocas líneas añadidas una “F” de estilo clásico y amable, que refleja fácilmente los conceptos de establecidos en el nombre: “mujer” y “ejercicio”.

Para el lettering, recuperé un poco esa definición de “mujeres que hacen ejercicio juntas” de una forma mucho más sútil pero incorporada en el nombre. Las líneas curvas y la tipografía, que simula ser escrita a mano, potencian esa sensación de feminidad y cercanía.

Diseño final

Product tour

En lugar de realizar un onboarding al uso, me incliné por la opción de un product tour de burbujas, ya que explicaba de forma más concisa las características de Femfit, ayudando a retener a más usuarias al comenzar la experiencia desde la pantalla home. Con 5 simples indicaciones, la usuaria ya sería capaz de entender toda la interfaz y secciones, antes de entrar en cualquier clase disponible.

Secciones

La aplicación se dividide en 4 simples secciones:

• La pantalla “home” es la primera a la que llega la usuaria, núcleo principal que conecta las clases con el resto de secciones. Desde aquí, se puede acceder a una clase en directo, otros entrenamientos grabados, o al resto de funcionalidades. Para no bloquear visualmente el listado de entrenamientos y secciones, decidí prescindir de una bottom bar al uso, al no existir demasiadas secciones, creando una versión mas limpia y libre en una pantalla reducida.
• Desde la sección de “perfil” se puede editar la foto de perfil, clases preferidas y bio. Allí también se encuentran diversas partes típicas del área de configuración, además de utilidades relacionadas como “trofeos” o “historial” de clases pasadas.
• En la pantalla de “calendario”, las usuarias pueden comprobar el horario de las clases en directo que suceden en un dia concreto, y activar un recordatorio.
• Por último, en la sección “buzón” encontramos un chat para hablar con amigas, con la opción de invitarlas para realizar una clase dúo. Paralelamente, encontramos el apartado “consejos”, lugar donde las usuarias pueden encontrar recomendaciones sobre cómo lidiar con ejercicios determinados o problemas comunes dentro de su rango de edad.

Clases

Según la principal stakeholder, la mayoría de mujeres contactan con ella a través de Instagram, donde son más activas y participativas. Es por ello, que diseñé la funcionalidad de clases teniendo muy en cuenta la posición de los elementos dentro de los directos de dicha app, tomando reminiscencias de otras aplicaciones como Tik Tok o Snapchat. De esta forma, la curva de aprendizaje para la usuaria es mínima, por lo que se logra fácilmente identificar todos los iconos e información.

Además de poder disfrutar de las clases en formato horizontal, las usuarias pueden seguir o contactar con otras mujeres en la clase pulsando en ellas.
Otra funcionalidad añadida es la posibilidad de realizar una clase grabada junto con una amiga, realizando el ejercicio a pantalla partida con su amiga y la monitora, si la usuaria lo desea.

Interacciones de las usuarias

Dentro de las clases, tenemos dos tipos de interacciones, divididas según si las activan las usuarias o la monitora.

De esta forma, las usuarias pueden mandar un emoji a la profesora, hacerle una pregunta respecto al ejercicio, o incluso, realizar una pequeña encuesta sobre qué tipo de entrenamiento prefieren realizar a continuación, siendo este requirimiento algo ya recurrente en los ejercicios actuales de la stakeholder.

Interacciones de la monitora

Del lado de la monitora, tenemos interacciones que acompañan a ejercicios específicos posturales o de respiración, acompañados de una breve explicación de cómo realizar el ejercicio. Es posible que en futuras iteraciones dicho texto desaparezca, ya que las indicaciones de la profesora deberían ser suficientes, pero para facilitar futuros tests con usuarios, decidí dejarlas en el prototipo final.

En los ejercicios posturales, es posible que se le pida a la usuaria coger el movíl para poder comprobar a través de los giroscopios del mismo si la inclinación y movimientos son los correctos.

Conclusión

¿Qué he aprendido?

Diseñar una aplicación para usuarias dentro de un rango de edad normalmente ignorado, fue para mí un veradero reto a la hora de entender sus necesidades, frustraciones y formas en las que actúan y se desarrollan en entornos digitales. Para ello, he intentando en todo momento crear un producto libre de fricciones y barreras. Me he centrado en lo que ya conocen, para crear una app que pueda potenciar el ejercicio desde casa, incluyendo algunas funcionalidades imposibles en un entrenamiento presencial. Creo haber entendido desde el primer momento las necesidades de las usuarias y stakeholder, definiendo los principales MVP’s para lograr una oportunidad de negocio que vaya mas allá de las actuales circunstancias provocadas por el COVID-19.

Siguientes pasos

• Repetir y ampliar el test con diferentes usuarias
• Reducir la duración del Product Tour
• Creación del modelo de negocio
• Iterar y ampliar las interacciones disponibles en las clases

Futuras funcionalidades

• Contador e historial de calorías quemadas y pulsaciones por minuto: incluir estos y otros parámetros en las clases en directo mientras se hace ejercicio, además de integrar un historial de calorias consumidas en la semana y mes. Podría usarse también para que la monitora pudiese ver en tiempo real la intensidad del ejercicio en sus alumnas. Todo ello gracias a los datos biométricos de un reloj o pulsera inteligente.
• Ampliar la función de ejercicios a dúos para más personas: en las siguientes actualizaciones debería incluirse una función para poder realizar un ejercicio grabado de forma grupal.
• Chats grupales: posibilidad para crear grupos de chats, con posibilidad de recibir invitaciones para realizar ejercicios colectivos.
• Enviar a Chromecast: en uno de los testeos, una usuaria comentó que le gustaría que existiese la posibilidad de enviar la clase a un dispositivo Chromecast, para poder así ver de forma más cómoda las clases en su televisor. Debido al nivel tecnológico de las usuarias, y al no considerarlo un MVP, se descartó, pero convendría tenerlo en cuenta para futuras actualizaciones.

Agradecimientos

Espero que esta app pueda ayudar de algún modo a todas aquellas mujeres que se sienten aisladas en una etapa crucial de sus vidas, y les gustaría salir de la zona de comfort haciendo ejercicio y cuidándose, a la vez que crean nuevas amistades para ayudarlas aún más por el camino.

Muchas gracias a todas las usuarias que han aportado su granito de arena a través de los tests para pulir hasta el último detalle de este proyecto.

Gracias también a Gema Guitérrez y a mis compañeras por ayudarme a plasmar y encaminar todas la ideas que tenía en mi cabeza.

Si te ha gustado Femfit, y quieres probar el prototipo, haz click aquí.

¡Y muchísimas gracias a ti por leer este artículo!