Butterflies (ES)
Diseño de un app móvil
Diseño de un app móvil
Butterflies es una aplicación con la que el usuario podrá realizar el seguimiento de su alimentación, hábitos y síntomas, con la finalidad de mejorar su salud digestiva.
User Research
Journey Mapping
Sketching
Wireframing
Screen Flows
Visual Design
Interaction Design
4 weeks
2020
Este proyecto de diseño UX/UI fué el proyecto final de mi bootcamp en Ironhack Barcelona y se basó en una situación que sufren cada vez más personas; molestias digestivas diarias que les impiden llevar a cabo las tareas de su día a día con normalidad. Mi misión era crear una herramienta para ayudar a todas esas personas de algún modo.
Los problemas digestivos cada vez son más frecuentes. Según fuentes de la asociación Española de Gastroenterología, 10% de las consultas en atención primaria de España se encuentran relacionadas con síntomas digestivos. De todas estas consultas, el 90% sale sin un diagnóstico. Por eso es importante que uno mismo conozca su cuerpo y entienda qué es lo que le origina este malestar.
Por eso es necesario Butterflies, una aplicación para llevar el control de todas aquellas variables que pueden originar síntomas digestivos, saber qué hábitos los causan y encontrar una solución. La finalidad de Butterflies es que lo único que sienta el usuario en la barriga sean mariposas.
Según mi investigación; el 50% de los encuestados considera que tiene problemas digestivos.
El 70% de los encuestados no sabe cual es la respuesta de su organismo a los alimentos que consume.
Más del 50% ha intentado alguna vez averiguar que alimentos le sientan mal.
Basándome en la investigación a través de encuestas y entrevistas, y utilizando datos de fuentes oficiales de la salud digestiva de la población, creé una user persona que captura la esencia de los usuarios objetivo. ¡Conoce a Emma!
Nos referimos de nuevo a la persona de Emma a lo largo del proyecto, para asegurarnos de poner al usuario en el centro del diseño.
Antes de sacar mis propias conclusiones y profundizar en posibles soluciones, descargué las que están consideradas como las mejores aplicaciones de nutrición y seguimiento de hábitos nutricionales según diferentes blogs y valoraciones. Entre estas aplicaciones están:
Realicé un análisis UX de los productos, con el objetivo de identificar aquellas funcionalidades que hacen el objetivo del usuario más fácil de alcanzar. Analicé la utilidad, intuitividad, usabilidad y accesibilidad. Durante este proceso me di cuenta de que muchas veces la intención es buena, pero el diseño UI no se adapta ni está centrado en la forma de interactuar del usuario.
Emma necesita saber que es lo que le causa las molestias digestivas que sufre a diario, no sabe que alimentos y/o patrones se lo provocan
El diseño de la experiencia del usuario se inici esbozando un flujo típico del usuario, en este caso de Emma, basado en la realización de tareas específicas dentro de la aplicación, como el registro de su estado al finalizar el día.
Una vez definidos los elementos que tenía que considerar Butterflies, fue el momento de organizarlos con la ayuda del site map.
Centrándome en las principales conclusiones identificadas durante la investigación del usuario, dibujé los primeros wireframes en papel. A medida que avancé en la definición del diseño de la interfaz de la aplicación, diseñé los wireframes mid-fidelity con Adobe XD para el dispositivo iPhone 8plus, ya que era con el cual se iba a testear las principales core features:
Registro de los hábitos que influyen en los síntomas digestivos.
Estadísticas de los registros diarios
Consejosde los hábitos que causan síntomas digestivos
Una vez realizada la primera sesión de testeo pude validar mis ideas de diseño iniciales. También hice los cambios convenientes para que el usuario tuviese una mejor experiencia en unos nuevos wireframes en high-fidelity, que posteriormente se convertirían en el prototipo final y con los que iba a realizar una segunda sesión de testeo.
El diseño del prototipo de alta fidelidad se inició creando una guía de estilo para la interfaz de usuario y finalmente diseñando las principales pantallas de la aplicación que se muestran a continuación;
Si es la primera vez que el usuario accede a la app va a tener que crearse una cuenta e introducir unos pocos datos para que se le pueda ofrecer unas soluciones más personalizadas y un trato más cercano. El usuario también puede acceder con su mail y contraseña si ya dispone de una cuenta.
Una vez el usuario ha creado su cuenta ya puede empezar a utilizar Butterflies añadiendo su primer diario. También puede dejarlo para más tarde. Los ítems que se pueden añadir al diario son las comidas, los síntomas, el agua bebida, el humor, la actividad física y el sueño.
Una vez tuve todo el diseño de interfaz finalizado, y para verificar que no había problemas de usabilidad en la aplicación, la testeé de nuevo con usuarios. El test consistía en crear una cuenta y realizar la tarea principal para lo que está destinada la aplicación; completar el diario de cómo había ido su día. Tanto el proceso de Login, como el de completar el diario, los usuarios lo comprendieron y navegaron sin ninguna dificultad.
El siguiente paso para Butterflies sería la creación de estas nuevas funcionalidades: