Femfit — UX/UI Case study

Haz ejercicio desde casa, con ayuda de tus amigas

Responsabilidades

Entrevista a stakeholder:

  • Grupo de 5 personas de la comunidad Píldoras UX
  • 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.

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

  • 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

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

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.

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”.

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.

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.

  • 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.

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”.

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.

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.

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.

Interacciones de las usuarias

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

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.

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.

--

--

UX/UI & Motion Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store