Mam: La app que te acompaña durante tu posparto haciéndote más fácil la vuelta a casa.

Elisa Naharro
10 min readDec 27, 2020

--

| UX UI case study |

El primer proyecto individual que tuvimos que desarrollar durante el Bootcamp de Ironhack consistía en encontrar un problema real relacionado con salud y bienestar, o con finanzas y darle solución a través de un producto digital. En mi caso lo tuve claro desde el minuto uno: Iba a enfocarme en el área del bienestar.

Muchas veces buscar un problema es ya un problema en sí; es un proceso lento, dificultoso, que requiere de mucho pensamiento y de mucha definición, ya que cuanto más claro y definido está el problema, más fácil y ágil es el resto del camino. En mi caso barajé varias opciones, y al final me decidí con un tema sobre el que había leído y sobre el que tenía la sospecha de que había un terreno sin explorar: la etapa del posparto en las mujeres.

En este case study os cuento el proceso que seguí hasta dar con la solución. ¡Ha sido un proyecto apasionante que espero que te guste tanto como a mí! ✨

Te dejo la planificación de la primera semana de proyecto con todas las herramientas utilizadas:

Primera semana de proyecto

Bien, trabajaremos el problema del posparto. ¿Y ahora qué?

Mi primer movimiento es rellenar el Lean Survey Canvas para asentar las ideas y definir bien qué es lo que voy a preguntar en las encuestas. Es una herramienta muy útil ya que después de trabajarla te indica qué tienes que preguntar, a quién, qué información ya sabes, y qué información necesitas. Es la gran base sobre la que se asientan las encuestas y las entrevistas.

Lean Survey Canvas

Para las encuestas utilizo la herramienta Google Forms ya que funciona muy bien y te permite bastantes posibilidades de manera gratuita. También me gusta bastante cómo se visualizan los resultados de las preguntas. Cuando lanzas una encuesta y ves en directo cómo aumentan y disminuyen las cifras es como ver un partido de fútbol. ¿Cuál será el resultado? La mejor parte es cuando tus suposiciones se desmontan, aprendes mucho :)

Muevo la encuesta a través de Whatsapp en casi todos los grupos que tengo.(La primera encuesta les hace gracia, cuando ya les pasas la quinta la tensión se empieza a sentir en el ambiente) pero no fui expulsada de ningún grupo, por lo que podría decirse que salí airosa.

De las encuestas saco datos muy interesantes. El 50,2% de las encuestadas reconoce haberse cuidado de forma autónoma e instintiva, sin ayuda externa. El 30% reconoce que no se cuidó lo suficiente. Pero aquí viene el dato clave: Les pregunté si se habían sentido desinformadas durante la etapa del posparto y un 50% respondió que sí. Comienzo a ver atisbos de que el problema es real.

Paralelamente entrevisto a 6 mujeres que han sido madres, dos psiquiatras, una ginecóloga y una fisioterapeuta especializada en posparto. Es extremadamente enriquecedor escuchar las experiencias en primera persona de tantas mujeres.

Todos sus testimonios me confirman que existe un problema alrededor del posparto, y es que es un proceso del que no se habla lo suficiente, en el que muchas mujeres se sienten desinformadas, solas, e incomprendidas. Además de ser un cocktail hormonal brutal para ellas.

Con los testimonios en la mano puedo comenzar a trabajar en el Lean UX Canvas, esbozar las primeras posibles soluciones y formular algunas hipótesis. Esta herramienta va modificándose a lo largo de toooodo el proceso y en ella volcamos todo lo relacionado con cuestiones de negocio.

Lean UX Canvas

Analizando los resultados

Una vez tenemos los datos, toca analizarlos. En este proyecto en concreto recabo muchísima información. Tengo muchas ideas mezcladas en la cabeza, pero todas se entrecruzan en algunos puntos, y para ordenarlas me ayuda muchísimo el Affinity Diagram. Consiste en volcar todos los datos que tenemos, tanto de las encuestas (cuantitativos) como de las entrevistas (cualitativos) e intentar buscar similitudes entre ellos para agruparlos bajo un mismo concepto. En mi caso obtengo cinco temáticas distintas.

Affinity diagram

Después de ver toda la información junta me voy haciendo una idea de por dónde pueden ir los tiros. Hay muchos conceptos que se repiten y decido tirar de ellos. Además, el testimonio de una de las madres me ayuda muchísimo a definir el Problem Statement, además de que me parece extremadamente real y poético.

Ya tengo una idea bastante definida de cómo es mi User Persona. Esta herramienta es una representación semi-ficticia del que será el usuario ideal de mi producto. En mi caso es Blanca.

User persona

Otra de las herramientas que nos permiten ponernos en la piel de nuestro usuario y empatizar muchísimo con él es el Empathy map. Se trata del ejercicio de responder a las preguntas: Qué ve, qué siente, qué oye, qué hace y dice nuestro usuario. Es una herramienta para la que necesitas ponerte en los zapatos del User persona sí o sí.

Empathy map

Para terminar con la fase de empatización realizo un User Journey. Esta es una de las herramientas que más me ha sorprendido (Junto al Crazy 8 que luego veremos) ya que consiste en crear una historia en la que a nuestro usuario le pasan cosas que alteran su estado de ánimo y tenemos que pensar en cómo nuestro producto va a paliar esos bajones. Se trata de convertir los problemas en soluciones. Es muy útil porque te pone en el contexto de situaciones reales que pueden ocurrir, (¡y además me encanta poder usar emojis! 🥰)

User journey

Ideando, que es gerundio

Llega la hora de la verdad: ¿Qué funcionalidades voy a desarrollar? ¿Qué tipo de producto necesita Blanca? Con la información que tengo ya puedo empezar a esbozar. Decido que lo que necesita mi user es una app. Y aquí llega el famoso y temido Crazy 8.

Reconozco que ha sido la herramienta que más me ha costado durante el Bootcamp. Se trata de coger un folio, doblarlo en 8 áreas y, boli en mano, empezar a pintar una pantalla en cada área. Lo ideal es ponerte el cronómetro y dedicarle sólo un minuto a cada pantalla. Cuando termina el minuto, siguiente pantalla. ¡AAAAAH! Me costó mucho cogerle el gusto a este método porque me gusta siempre ir al detalle de las cosas, y esta herramienta es todo lo contrario: es improvisación pura y dura, es hacer lo que puedas en el tiempo que tienes. Yo me sentía constantemente en una prueba de Masterchef.

Lo bonito de esta herramienta es que aunque tú la comiences escéptico, cuando la terminas, ya tienes un esqueleto sobre el que trabajar. ¡Y te sorprende lo que puedes sacar bajo presión! Es un esqueleto muy basto, por supuesto, y con muchísimos defectos, pero de eso se trata la metodología Lean con la que trabajamos. Equivocarse rápido, prototipar e iterar.

Crazy 8

Después del brainstorming de funcionalidades y tras haber hecho un análisis competitivo, para este primer MVP inicial me quedo con las siguientes:

  • Contenido didáctico sobre el posparto
  • Tracking estado de ánimo
  • Sesiones de relajación
  • Tracking de sueño
  • Tips específicos en función del estado anímico y de la semana posparto en la que se encuentre la madre

El siguiente paso es bajar un poco más a tierra las pantallas. Seguimos utilizando boli y papel, pero ya los bocetos tienen un sentido y lo ideal es que puedas navegar entre ellos. Así surge el Low Fidelity, el paso previo al Mid Fidelity (ya hecho a ordenador) se usa para identificar posibles errores de arquitectura de información o de navegación y poder corregirlos antes de comenzar a montar el esqueleto en ordenador y así ahorrar tiempo.

Una vez he testeado el prototipo en baja fidelidad con algunos compañeros, corrijo errores y mejoro detalles. Ya puedo decir que tengo la estructura bastante definida, por lo que puedo comenzar a trabajar el Sitemap. Para ello realizo varios Card sortings con compañeros de clase. Son muy divertidos, porque les das todas las categorías de tu app o web sueltas y descolocadas en post its, y ellos de manera intuitiva tienen que agruparlas por similitud. Te ayuda mucho a perfilar la Arquitectura de información de tu producto.

Site map

Cuando tenemos clara la estructura, vamos concretando y pasamos a crear los Wireframes de media fidelidad. Es el esqueleto de nuestra aplicación y lo ideal es hacerlo en gris para no tener ningún tipo de distracciones de color o formas. Nos centramos en funcionalidad y en usabilidad. Cuanto más pulido sea el wireframe, más fácil nos resultará aplicarle el color y la fantasía.

Algunas pantallas del Mid Fidelity

¿Le damos color al asunto?

Segunda semana de proyecto

¡Llega mi parte favorita! Buscar inspiración, buscar colores, buscar formas, tipografías…Para ello, uso un herramienta muy útil, el Moodboard, que es un tablero inspiracional donde volcamos imágenes, texturas, colores… que nos inspiren de cara a nuestro producto. En mi caso sabía que mi app tenía que ser delicada, reconfortante, que transmitiese paz, tranquilidad… porque eso es lo que necesitaban mis usuarias para la etapa en la que se encontraban. Quería que la app fuese un lugar donde sentirse súper a gusto.

Moodboard inspiracional

Para la tipografía me decido por Jazmin para los títulos y por San Francisco para los bloques de texto. Los titulares con serifa me resultan muy elegantes y en este producto me encantó el resultado de combinar ambas.

Y estos fueron los colores elegidos. Me costó dar con la paleta, pero quedé muy contenta con el resultado ya que combinan genial entre sí y transmiten lo que necesito.

Colores

Para el logo elijo un estilo sencillo y tipográfico. Utilizo el punto final después de la palabra Mam como un acto de reivindicación ya que la app pretende posicionar a la madre en el centro y devolverle el espacio que se merece y necesita. Es un momento en el que la madre importa. Y punto.

Logotipo Mam

Y siguiendo con la parte estética, preparo un Style Tile, una pequeña muestra donde aparecen los elementos principales de la aplicación. La idea es que de un sólo vistazo cualquier persona pueda imaginarse qué estética seguirá el producto.

Style Tile

¡Ya casi estamos! Toca diseñar el prototipo en alta fidelidad (High Fidelity Wireframes). Aquí me siento en mi salsa y soy consciente de que cada pequeña sombra, forma y color marcan la diferencia.

Una vez aplicado el UI en las pantallas monto el prototipo en Figma, una herramienta que me está ganando poco a poco. (¡Lo siento, Sketch!) Esto me ha recordado a un vídeo buenísimo que ha hecho Pablo Stanley, (uno de mis modelos a seguir en esto del diseño) que os recomiendo al 100% 😂

Sin más dilación, os dejo con el prototipo:

Próximos pasos

Como próximos pasos me encantaría contar con el soporte del Instituto Europeo de Salud Mental Perinatal dirigido por Ibone Olza, institución que conocí a través de una de las psiquiatras entrevistadas. Tal y como indican en su web, el Instituto pretende cubrir un vacío formativo en el ámbito de la lactancia, ofreciendo una actualización rigurosa y basada en la evidencia científica en temas como la psicobiología de la lactancia, la neurobiología del vínculo, la psicología maternal y la detección y tratamiento de los trastornos mentales maternos o del lactante, así como las alteraciones de la relación vincular en el contexto de la lactancia.

¡Sería el match perfecto con Mam!

Landing page Mam

Gracias por venir

Si has llegado hasta aquí ¡Mil gracias! Espero haberte acercado un poco más un tema del que tan poco se habla como es el posparto, y que hayas entendido un poco más cómo funciona el proceso de Design Thinking que seguimos para crear productos digitales.

Gracias a todas las personas que me han ayudado durante el proceso, a mis compañeros de clase por sus feedbacks, a mis compañeros de piso por su apoyo moral y por traerme chocolate en los momentos más oscuros.

¡Pues ya estaría! Si tienes cualquier duda o sugerencia me encantará leerte en elinaharro@gmail.com ☺️

--

--

Elisa Naharro

UX UI designer · Visual Designer · Y muchas cosas bonitas ✨