Stretch — Wellness Case Study (Español)

Ana Villar Eiroa
9 min readJun 8, 2021

Llegamos a la semana cuatro de bootcamp y a nuestro primer proyecto individual.

En esta ocasión, el Instituto Nacional de Bienestar nos ha pedido realizar una herramienta con la que las personas consigan adoptar una rutina que mejore su bienestar. Tenemos dos semanas para elaborar esta herramienta y, para ello, hemos utilizado el Design Thinking con el objetivo de encontrar una solución al problema al que nos enfrentamos.

RESUMEN DEL PROYECTO

El problema:

“Las personas desconocen los beneficios de los estiramientos, no lo ven como una práctica importante y además, no son capaces de crear una rutina de entrenamiento debido a la falta de motivación y tiempo.”

La solución:

“Stretch, la nueva aplicación de estiramientos que te enseñara a estirar, te motivará diariamente a superarte y además, te permitirá hacer una valoración de tus progresos”

Encuestas y entrevistas

He comenzado realizando una investigación con el fin de encontrar aspectos a mejorar en la vida de las personas y me he dado cuenta de que un factor importante como el hábito de estirar, quizá no está tan presente como debería en nuestra vida diaria.

Para poder entender realmente cuáles son las necesidades que tienen nuestros usuarios y saber si esta práctica está siendo valorada, he comenzado con un ejercicio de investigación.

A través de 60 encuestas y entrevistas, enfocadas en conocer los hábitos de nuestros usuarios potenciales, he podido destacar la siguiente información:

  • Datos de las encuestas:
  • Citas de las entrevistas:

Análisis de la competencia

De forma paralela he realizado el Competitive Analysis con el fin de conocer los puntos fuertes y débiles de la competencia, hacer hincapié en las mejoras y buscar la forma de destacar y diferenciarme de ella.

He encontrado aplicaciones muy completas que comprenden gran cantidad de actividades, entre ellas, estirar, pero la incluyen como una actividad más, no trata el tema como algo imprescindible y necesario en nuestras vidas. Teniendo en cuenta que las personas desconocen hasta dónde llegan sus beneficios, me parece un punto importante a tener en cuenta a la hora de plantear mi plataforma. Por otro lado, ninguna de las aplicaciones ya existentes motiva al usuario a estirar de forma diaria y le permite evaluar sus progresos. “Las personas que no ven resultados del trabajo que hacen acaban por desmotivarse y dejan de hacerlo.”

Empathy Map

Esta herramienta me ha ayudado mucho a tener una visión más clara de mi público objetivo, conocer más a los usuarios a los que irá dirigida mi plataforma y tratar de responder de la forma más completa a sus necesidades.

Empathy Map

User Persona, User Journey

A partir de la información obtenida en la fase de descubrimiento, y apoyándome en el Empathy Map y el Affinity Diagram, he construido a Martina, mi user persona.

“Martina es diseñadora gráfica, pasa mucho tiempo sentada durante su jornada laboral, por tanto adopta malas posturas y tiene dolencias musculares. Le gusta mantenerse activa pero no se siente motivada y no es capaz de crearse una rutina”

User Persona
User Journey

El Problema

Gracias a la combinación de las herramientas anteriores he podido llegar a las siguientes conclusiones y definir el problema al que me enfrentaba:

  • Los usuarios carecen de conocimiento a la hora de estirar, no saben cómo deben hacerlo.
  • No existe una motivación que empuje a las personas a mantener el hábito de estirar.
  • Las personas desconocen los beneficios de los estiramientos y no observan un progreso y una mejoría cuando los practican.

Con las ideas más claras y una vez definido el problema, he comenzado a enfocarme en aquellas soluciones y funcionalidades que mi mínimo producto viable (MVP) debería contener.

En este punto del proceso, es hora de organizar las ideas para dar forma a la solución. Para ello utilizo las siguientes herramientas:

Affinity Diagram

Gracias al Affinity Diagram puedo ordenar toda la información, verlo todo más claro y empezar a idear buscando las soluciones posibles a partir de los HMW. Una vez realizado el Affinity Diagram he localizado las siguientes oportunidades de diseño

  • Cómo conseguir que las personas valoren los estiramientos y le den la importancia que realmente tienen. Mi objetivo es que transmitir la importancia y los beneficios que aporta estirar.
  • Cómo conseguir que las personas se motiven, traten de superarse diariamente e incluyan los estiramientos en sus rutinas diarias.
  • Cómo conseguir que las personas vean progresos estirando, se sientan más enérgicas, más flexibles y puedan mitigar sus dolencias debido a malas posturas o problemas de movilidad.

Moscow

Una vez tengo claras las oportunidades de diseño, comienzo a realizar el Moscow con la finalidad de priorizar funcionalidades. Era el momento de decidir aquello que mi MPV debería contener. No me resultó demasiado fácil priorizar, tenía muchas ideas y en un primer momento todas me parecían de gran importancia e imprescindibles. En este punto volví prácticamente al inicio del proyecto y me puse en contacto con aquellas personas entrevistadas, para que ellos mismos, futuros usuarios de la aplicación, priorizasen algunas funcionalidades que consideraban de mayor importancia. Esto me ayudó a despejar mis ideas y poder continuar con el proyecto.

Moscow

Card Sorting, User Flow y Site Map

Llegaba el momento de visualizar la arquitectura de mi MVP. Comencé realizando el Site Map para tener una visión general y observar las funcionalidades de mi app de una forma más ordenada. Comenzaron a surgirme algunas dudas; no sabía dónde colocar ciertas categorías por lo que realicé un Card Sorting, lo me ayudó a comprender que los usuarios tenían una perspectiva distinta a la mía, lo que yo veía claro, no era siempre así. Un ejemplo de ello ha sido que yo veía la necesidad de situar en la tap bar una sección de mis progresos, mientras que los usuarios localizaban esta funcionalidad dentro del perfil.

El Card Sorting es una herramienta que me parece muy necesaria ya que te acerca todavía más a la forma de pensar de los usuarios y te ayuda a ver las cosas desde otra perspectiva.

Site Map
  • User Flow

Una vez finalizado el Site Map, conociendo los elementos por los que estaría compuesta mi aplicación realice el User Flow, especificando todos las acciones que realizarán los usuarios dentro del flujo que estaba creando.

User Flow

Solución

Una vez decididas las funcionalidades de mi MVP y conociendo el recorrido de mi usuario os presento Stretch, la nueva aplicación de estiramientos que responde a las necesidades de los usuarios mediante las funcionalidades siguientes:

  • Ante el desconocimiento de los beneficios que aporta estirar, con Stretch los usuarios conocerán la importancia de practicar estiramientos de forma rutinaria y correcta. Stretch indica al usuario, en primer lugar, a modo de onboarding, los distintos beneficios que aporta estirar. He decidido mostrarlo en un primer momento para animar al los usuarios a realizar esta práctica y a utilizar la aplicación.
  • Teniendo en cuenta la falta de motivación de las personas a la hora de crear rutinas, con Stretch el usuario fijará sus propios objetivos y se sentirá motivado ya que tendrá que superar niveles incrementando la dificultad para seguir avanzando.
  • Para mayor motivación, y con el fin de observar resultados, el usuario podrá valorar su progreso en cuanto a flexibilidad, movilidad y resistencia, lo que le animará a seguir estirando y mejorando de forma diaria.
  • Por último, para hacer su experiencia más personalizada, el usuario podrá crear rutinas a su medida seleccionando los ejercicios que desea practicar y el tiempo de entrenamiento. El usuario podrá seleccionar ejercicios según grupo muscular, sus objetivos o sus dolencias, si las hubiera.

Crazy8, Low fidelity, Mid fidelity

Llega el momento de imaginar cómo será la aplicación creando bocetos con un Crazy8 en el que aparecieron muchas ideas.

Cuando ya tenía un primer boceto a mano alzada realicé el Low fidelity, más detallado, limpio y completo que el anterior. Posteriormente hice un testeo sobre él y les pedí a tres personas que realizasen la siguiente acción: “dando por hecho que ya estáis registrados en la aplicación, realizad uno de los retos propuestos y posteriormente evaluad vuestros progresos en cuanto a flexibilidad”.

Ante el testeo anterior los usuarios se encontraron con un salto en el prototipo, así como la falta de un signo de cierre en una de las pantallas. Ante estos errores realicé cambios hasta que el resultado fue positivo y los usuarios podían finalizar la acción sin ningún problema.

En este momento comencé a crear wireframes y testear de nuevo el prototipo. Creando wireframes me di cuenta de que faltan algunos detalles que para el flujo principal no eran tan necesarios pero sí para que la aplicación tenga consistencia.

Mid fidelity

Una vez he finalizado el prototipo en Mid fidelity comienzo a testearlo y encuentro un error que he de solventar. En la tab bar no todos los iconos son reconocibles, los usuarios no los identifican por lo tanto la modifiqué por completo y lo teste de nuevo. Esta vez los usuarios lo entienden perfectamente.

Entramos en la parte de UI y toca poner bonita nuestra creación y darle forma.

Moodboard, atributos de marca

Comienzo creando el Moodboard buscando el estilo visual que tendrá mi App. Tras crear varias versiones, os presento el definitivo.

Las palabras que utilizaron los usuarios para describir el tablero han sido: relajante, energético, fresco, reflexivo y agradable.

En un principio comencé a crear la interfaz en color naranja, era viva, atractiva y agradable. Este color me acompañó durante gran parte de la semana de UI. Tras comprobar la usabilidad me di cuenta de que que no era un color usable y debía cambiarlo.

El color es un paso que suele generarme muchas dudas. Me resulta dificil tomar la desión y elegir el color final. Es un gran debate en el que no puede influir el gusto personal sino la usabilidad y la concordancia con lo que quiero transmitir.

Las opciones que barajé hasta el último momento fueron las siguientes:

Styte Tile y UI Kit

El Styte Tile es una de las herramientas de marca que me resulta más útil, gracias a ella puedo observar todos los elementos que conforman la interfaz de una forma ordenada y fácil de leer. El style tile comprende el logo, la iconogradía, la paleta de colores y la tipografía que utilizaré finalmente en la interfaz.

Prototipo final

Después de dos intensas semanas, con gran entrega y dedicación hacia este primer proyecto, os presento las distintas pantallas del prototipo en alta fidelidad:

Prototipo en Hi-Fidelity

Conclusiones

Tras dos intensas semanas de trabajo, cambios, cambios y más cambios. Tras momentos de alegría en los que veía que todo encajaba y las ideas venía solas y otros instantes de bloqueo por que algo no salía como esperaba o la inspiración no venía… El poder ver ahora el resultado de tanto esfuerzo, ver que he podido dar forma a aquello que estaba en mi cabeza, me resulta muy satisfactorio. Veo un progreso muy grande desde el comienzo. El aprendizaje ha sido mucho y el esfuerzo también, y todo ello lo veo en los resultados.

Queda un largo camino por recorrer, infinitos aspectos en los que mejorar, pero tengo la fuerza, las ganas y la motivación de seguir superándome día a día.

Estoy deseando comenzar el siguiente proyecto 🚀

Muchas gracias a todos los que habéis llegado hasta aqui. Podéis 👏🏽👏🏽 mi trabajo o contactar conmigo a través de mi perfil de LinkedIn

Nos vemos en el próximo post! ❤️

--

--