Pillcare. Diseño de una app para la gestión del tratamiento médico

UX/UI case study

Andrea Romero Rodríguez
9 min readJan 6, 2021

Primer proyecto individual que realizamos en el Bootcamp de UX/UI de Ironhack, que se llevó a cabo durante 2 semanas. Nos enfrentamos por primera vez en solitario a un proyecto completo, desde la fase de investigación hasta el diseño del producto final. ¿Nervios antes de comenzar? Pues un poco, ¡para qué nos vamos a engañar!

Presentación del proyecto

Briefing

Diseño de una app que solucione un problema relacionado con el wellness.

Tuvimos un fin de semana para pensar en varios problemas relacionados con el wellness que considerásemos que se pudieran potencialmente solucionar mediante un producto digital. La idea era presentar tres problemas diferentes a los instructores, y según las posibilidades que les veían nos escogían uno u otro. Por suerte tenía bajo la manga varios problemas más pensados, ya que los tres presentados inicialmente fueron descartados.

Así que, una vez escogido el problema con el que íbamos a trabajar… ¡manos a la obra y a por todas!

Problema

Los pacientes con patologías crónicas no siguen correctamente su tratamiento.

Solución

App que controla y recuerda la toma del medicamento y el seguimiento de unos hábitos saludables que refuerzan el tratamiento.

Proceso de diseño

Tras este breve spoiler con la solución, os cuento el proceso de diseño seguido, como siempre, mediante la metodología Design Thinking.

En la primera semana realizamos la parte de experiencia de usuario (UX) y la segunda semana la dedicamos a la interfaz de usuario (UI).

1. UX (Semana 1)

Investigación y empatización

En primer lugar, a la hora de determinar el problema y en los primeros pasos de la investigación, echamos mano de nuestro máximo salvador: internet. Estuvimos investigando sobre el problema y encontramos un interesante estudio realizado por el gabinete Sociología y Comunicación para Farmaindustria sobre la adherencia terapéutica en España, que nos sirvió como base para realizar la investigación y a partir del cual se sacaron interesantes datos a tener en cuenta durante el proceso de diseño (aquí puedes ver un artículo sobre el estudio).

- La mitad de enfermos crónicos no cumple con su medicación.
- El olvido es la principal causa de la falta de adherencia a la medicación.
- El perfil de paciente menos adherente lo representan los más jóvenes (el 71,2% de los menores de 45 años no cumplen adecuadamente con la medicación pautada por el médico)

Para este proyecto se dedicó bastante tiempo a la investigación inicial, lo que nos permitió trabajar de forma más fluida y segura durante los siguientes pasos. También se decidió realizar el análisis competitivo en la fase inicial, de forma que nos guiase en la realización de las encuestas y entrevistas.

Análisis competitivo de las apps existentes

A continuación, con toda la información recogida, se realizaron paralelamente una serie de encuestas y entrevistas para conocer en mayor profundidad las necesidades del usuario en este entorno. Nos resultó interesante el hecho de realizarlas de forma paralela, ya que se produjo una importante retroalimentación entre ambas, reenfocando alguna de las preguntas según los datos y reflexiones que se iban obteniendo. Como herramienta de partida utilizamos un Lean Survey a partir del cual se generaron las encuestas y entrevistas.

Lean Survey

De las encuestas se obtuvieron una serie de datos interesantes, de los que se destacan los siguientes:

*Datos extraídos de 148 encuestas y 8 entrevistas

En cuanto a las entrevistas, además de a pacientes con patologías crónicas también se tuvo en cuenta a gente que ha tenido que seguir un tratamiento médico puntual, ya que los consideremos potencialmente usuarios de nuestro producto digital, pues les puede surgir la misma necesidad. También tuvimos la suerte de poder entrevistar a tres sanitarios (farmacéutico, médico y enfermero) que arrojaron información muy útil e interesante, y nos dieron la clave para diferenciarme del resto de apps existentes, en un ámbito que normalmente el paciente tiene muy olvidado: el seguimiento de unos hábitos saludables acordes a su enfermedad.

Principales insights de las entrevistas

Durante esta fase también realizamos un Lean UX que fue variando a medida que avanzaba el proyecto e íbamos descubriendo nuevos insights.

Lean UX

En este punto tuvimos que echar marcha atrás en una de las ideas que surgieron, que fue vincular la app con la receta electrónica. Esta idea evitaba que el propio usuario tuviera que introducir los medicamentos manualmente (y se produjese alguna equivocación). Además, permitía la actualización automática en el caso de un cambio en la medicación. Sin embargo, esta idea no resultó viable ya que cada comunidad tiene su propio sistema y no es de carácter público.

Definiendo al usuario

A continuación se comenzó a definir al usuario mediante las herramientas del Empathy map, User Persona, User Journey y User Scenario.

User Persona
User Journey
User Scenario

El camino hacia la solución

Mindmap del proyecto

A continuación pasamos a la fase de ideación, donde comenzamos a juntar todas las conclusiones e ideas obtenidas y a convertirlas en posibles soluciones para nuestro MVP. Para ello utilizamos varias herramientas como fueron Brainstorming, Affinity Diagram, Mindmap y Moscow.

Moscow

Una vez definidas las funcionalidades que incluiría la app (aunque alguna sufrió algún cambio tras el proceso de wireframing) se procedió a realizar la arquitectura de la información, mediante la herramienta del cardsorting. Tuve la suerte de poder realizar alguno de ellos de forma presencial con mis compis del campus y me resultó muy útil ver cómo lo organizaban y sus reflexiones. Los demás los realizamos de forma remota mediante Mural, que facilitó bastante el proceso gracias a su fácil e intuitiva utilización.

Cardsorting

La solución

Finalmente, nos encontramos con una aplicación para la autogestión y control del tratamiento médico, que incluye tanto la parte de los medicamentos, como la de seguir unos hábitos saludables recomendados.

  • Controla y recuerda las tomas de los medicamentos, mediante la creación de alertas y llegada de notificaciones.
  • Realiza un seguimiento diario de los hábitos recomendados para cada enfermedad, mediante gamificación por niveles.
  • Registra la evolución en forma de gráficos, generando un historial médico del progreso y los posibles síntomas generados.
Tratamiento = medicamentos + hábitos saludables

Hora de prototipar

¡Llegó la hora de prototipar! Y quien dice prototipar, dice también testear; siempre mano a mano. Comenzamos con la elaboración de un Crazy 8. Aunque aún me queda mucho por mejorar, cada vez le voy cogiendo más gustillo a esta herramienta y haciéndolo de forma más eficiente. Como aún no tenía totalmente claras las ideas en mi cabeza, realicé varios para comparar unas estructuras y otras y descubrir cuáles podrían funcionar mejor.

A continuación realizamos el low-fi de la app y el user flow.

Low-fi

Una vez definido el low-fi y tras testearlo varias veces con diferentes personas, realizamos el mid-fi mejorándolo con las conclusiones obtenidas y el feedback recibido.

Mid-fi del proceso de registro

Además del registro, como apenas se veía la app por dentro, se realizó otro flujo en el que se muestra cuando el usuario ya tiene introducidos sus medicamentos y le llega una notificación de toma, la chequea y le aparece una notificación de que el medicamento se está agotando.

Mid-fi del flujo de la gestión del medicamento

Tras presentar el mid-fi a los instructores, recibimos el feedback que fue aplicado en el hi-fi y que veréis en el resultado final. Como eran los primeros wireframes de app que hacíamos tuvimos que mejorar varios aspectos como fueron márgenes, espaciados y tamaños de fuente, entre otros. También llegamos a la conclusión de la necesidad de reducir la cantidad de texto en el proceso de registro, así como la opción de mantener las etiquetas de los campos de texto siempre visibles y los botones fantasma, para mejorar la accesibilidad.

2. UI (Semana 2)

Comienza la semana 2 en la que nos vamos a enfrentar a la parte de UI por primera vez. La verdad es que la cojo con bastantes ganas, es un ámbito que ya controlo en cierta medida por mi background y mi experiencia como diseñadora gráfica; y tengo bastante clara la idea de lo que quiero comunicar visualmente con mi app y el estilo que tendrá. Alerta spoiler: no todo será tan fluido como parecía…

Comenzamos con la realización de un Moodboard que transmita los atributos que estamos buscando: se preocupa, calmada, delicada, elegante y natural. Tras lanzar dos pruebas con diferente color y que la gente nos contestase lo que le transmitía, nos quedamos con el siguiente.

Moodboard

Escogiendo colores

Como se puede extraer del Moodboard, tendremos un claro predominio del color blanco en nuestra app, seguido del color azul verdoso típico del ámbito de la medicina, pero con un toque más fresco y puro, y un color de acento que destaque claramente del resto y que transmita el selfcare, la confianza…

Pese a tener la idea del color tan clara, escoger los colores finales nos llevó bastante tiempo. Hicimos mil y una pruebas en las principales pantallas de la app para comprobar que funcionaban correctamente juntos. Principalmente tuvimos que subirles el tono y la intensidad para que fueran más accesibles y destacaran lo suficiente, con el equilibrio perfecto. Finalmente, el resultado fue satisfactorio y transmitía perfectamente la idea que llevábamos en mente.

Style tiles

Además del Style Tiles, para definir el estilo de la app y fijar las indicaciones de diseño, también se realizaron la Style Guide y el UI Kit, donde se recogen y documentan todos los elementos.

A continuación mostramos la landing page del proyecto diseñada para la promoción del mismo, donde podréis entender un poco mejor en qué se basa nuestra app.

Landing page de la app Pillacare

Aquí se muestran algunas de las pantallas del hi-fi:

Hi-fi

Por último mostramos dos flujos de la app.

En el primero se puede observar el registro en la app, cómo el usuario introduce su enfermedad y a continuación se le recomiendan una serie de hábitos para seguir. Posteriormente, debería introducir el medicamento y las tomas.

Flujo del registro

En el segundo flujo observamos cómo el usuario recibe una notificación con la toma que le toca, la chequea y gestiona una alerta de que se está agotando uno de sus medicamentos. Además, consultará en el calendario una cita médica y activará el recordatorio en forma de alarma.

Flujo de la gestión del medicamento

¡Y esto es todo!

Ya han pasado los días y echando la vista atrás, puedo decir que para mí este fue el mayor reto del Bootcamp. Fueron dos semanas de altibajos 🌊 , algunos días en la cresta de la ola y otros por debajo del agua, pero finalmente todo el esfuerzo mereció la pena.

Además me llevo un gran aprendizaje de estos días: a nivel académico aprendí muchísimo de UI y pude aplicar todo lo aprendido durante la semana, que unido al feedback de los instructores me permitió pulir muchos aspectos que se me habían quedado “colgando”. Aprendí la gran importancia de la accesibilidad en una aplicación, y más en mi caso, ya que al tratarse de una app del ámbito médico tuve que tener muy en cuenta este aspecto (tamaños, claridad, similitud con la realidad…).

A nivel personal, he aprendido la importancia de hacer un parón en momentos de mini-crisis, tomarse un descanso y despejarse, para volver con la mente abierta y dispuesta a funcionar de nuevo.

¡Gracias 😎!

Si has llegado hasta aquí… ¡gracias por leer mi artículo, cualquier feedback o sugerencia es bienvenida!

Continuamos aprendiendo… 💪🏻

--

--