Appio
Aplicación móvil para la gestión de huertos en casa.
Appio es una aplicación móvil que permite a los usuarios gestionar huertos urbanos y aprender a mantener cultivos en casa con el fin de producir alimentos por sí mismos.
Rol en el proyecto
Desarrollador Front-end | UX Researcher | UI Designer
Herramientas Utilizadas
Ionic | SCSS | Angular | Miro | Figma | InDesign | Infogram
Habilidades
Diseño web | Maquetación | Prototipado | UX Research | UI Design | Design Thinking
Duración del proyecto
+1 año
Justificación
Appio nace como un proyecto independiente y autodidacta en el 2020. El equipo de trabajo está compuesto por dos personas muy cercanas que trabajan en el área de tecnología y yo, que en aquel momento me encontraba realizando mis estudios de diseño y me encargué justamente de esta parte. Quisimos desarrollar una aplicación útil que nos permitiera aprender y adquirir nuevas habilidades, por lo que estuvimos trabajando en ella de forma autónoma en nuestros tiempos libres.

Posteriormente, durante la realización del máster en desarrollo y conceptualización web, para el módulo de UX/UI como idea de proyecto final retomé Appio, aplicando todos los conocimientos adquiridos en user expreience y user interface que permitieron dar una forma más estructurada a lo que habíamos adelantado previamente, convirtiéndose en una oportunidad excelente para reestructurar la aplicación y hacerle los cambios necesarios para mejorarla.

El tema de la aplicación surge gracias al interés de muchas personas por alimentarse mejor, de forma autónoma cultivando sus propios alimentos en casa (lugares generalmente urbanos, cerrados y con espacio límitado) y el desconocimiento de la mayoría de en cuanto a creación, manejo y mantenimiento de cultivos.

Así pues, a partir de la metodología ágil design thinking, se ha investigado cuales son las necesidades concretas que tienen las personas al gestionar sus huertos en casa, para intentar solventarlas a partir de diversas herramientas que podrían tener a mano con el uso de nuestra aplicación móvil.

Para ejecutar todas las etapas del proceso UX/UI, se han utilizado diversas estrategias a partir de elementos “entregables” que permiten mantener un correcto flujo del proceso y la obtención de información útil para tener en cuenta en el diseño y posterior desarrollo de la aplicación centrándose en el usuario y aportando soluciones innovadoras a sus problemas.
Observación
Para la ejecución de esta etapa se realizó la investigación y observación a partir de un desk research, un proceso de búsqueda de información en medios electrónicos que permitió conocer las posibles motivaciones de las personas para tener un huerto en casa, conocer un poco más sobre el tema de alimentos transgénicos y orgánicos, y las posibilidades, ventajas y beneficios de los huertos urbanos. Posteriormente, se desarrolló una netnografía o búsqueda de comentarios en la web de personas que han intentado tener o tienen un huerto en casa, con el fin de conocer sus opiniones sobre la experiencia que han tenido.

Con la información obtenida previamente, se plantearon unas research questions usando el diagrama de Venn donde se han planteado varias preguntas, tomando como referencia diversas posibilidades y funcionalidades que se podrían implementar a la aplicación, luego, se hizo un benchmarking que permitiera comparar los elementos incorporados en aplicaciones similares existentes en el mercado, un DAFO que permitió identificar las principales debilidades, amenazas, fortalezas y oportunidades del proyecto, y finalmente, un cuestionario o encuesta utilizando la herramienta Google Forms con preguntas segmentadas a personas que estarían dispuestas a tener un huerto y a quienes ya lo tienen para poder así conocer un poco sus expectativas, dificultades y comentarios al respecto.

Puedes ingresar a la documentación del proyecto haciendo clic aquí para consultar con detalle los resultados del proceso de observación.
Síntesis
En esta etapa, se realizó un user persona para conocer algunos datos aproximados de los potenciales usuarios como sus metas y objetivos, motivaciones, frustraciones, intereses, capacidad de uso de tecnología, entre otros; posteriormente, se creó un mapa de empatía en el cual se establecieron algunos comentarios o situaciones que los potenciales usuarios podrían pensar, ver, decir, oír, sentir y hacer; se planteó un customer journey para establecer una rutina hipotética de alguno de los posibles usuarios con el fin de comprender sus emociones ante algunas situaciones que se les podría presentar frente a la gestión de sus huertos, se generó la construcción de una matriz de necesidades en la cual se establecieron las posibles necesidades, los “dolores” o inconvenientes que conllevan y las “ganancias” en caso de que se cubrieran dichas necesidades de manera satisfactoria.

Con la información obtenida por los pasos previos, fue posible generar una matriz de utilidad y viabilidad que permitió organizar las ideas obtenidas en cuanto a las posibles funcionalidades que podría tener la aplicación.

Puedes ingresar a la documentación del proyecto haciendo clic aquí para consultar con detalle los resultados del proceso de síntesis.
Ideación
En esta etapa, se realizó una búsqueda de findings e insights a manera de posibles pensamientos frecuentes que podrían tener las personas que tienen o desean tener un huerto en casa, estos pensamientos fueron categorizados en clusters que permitieron ver de manera más clara la información sobre los aspectos que debería abarcar la aplicación, posteriormente se generó un proceso in – out haciendo un descarte inicial de funcionalidades y finalmente, a través de un diagrama MoSCoW, se determinaron en orden de importancia cuales funcionalidades tenían que incluirse, cuáles deberían ser tenidas en cuenta, cuales podrían implementarse y cuales definitivamente no se iban a utilizar.

Con toda la información obtenida en las dos etapas previas, se procedió a crear una propuesta de valor analizando y esquematizando de forma concisa los productos o servicios a ofrecer, los elementos creadores de valor, las soluciones que aportaría a los usuarios, así como sus ganancias, dificultades frecuentes y tareas que debería realizar al utilizar la aplicación, lo cual finalmente, se llevó a un modelo canvas que permitió analizar la viabilidad del proyecto.

Puedes ingresar a la documentación del proyecto haciendo clic aquí para consultar con detalle los resultados del proceso de ideación.
Diseño
Para el proceso de diseño se inició con un site map con el cual se pudo establecer un diagrama con las diferentes secciones que tendría la aplicación, a continuación, se realizó un diagrama de flujo o flow chart que establece el paso a paso para la ejecución de un proceso por parte del usuario, en este caso el proceso que se recreó fue el de agregar una planta nueva. Posteriormente, se generaron unos wireframes como un acercamiento a la parte visual de la aplicación. A continuación, se planeó el sistema de diseño de la interfaz con el fin de mantener su unidad gráfica y visual, determinando elementos como las tipografías, colores, iconos, imágenes, entre otros, para finalmente, a través del prototipado crear unas pantallas en alta que permitieran un acercamiento mucho más fiel al resultado final que se realizará en una futura etapa de desarrollo.

Sistema de diseño
Colores
#A5C639
#637722
#F8F8F8
Tipografías
Me gustaría mencionar que los recursos gráficos que ilustran los vegetales, frutas, aromáticas y demás fueron creadas por mí misma utilizando Adobe Illustrator.

Si quieres conocer más detalles sobre el proceso de diseño, puedes ingresar a la documentación del proyecto haciendo clic aquí. Si quieres ver el prototipo en figma, puedes ingresar al archivo haciendo clic aquí.
Desarrollo
Gracias a la ejecución del proceso UX/UI, se hizo mucho más sencillo realizar la planificación de la aplicación, que, si bien ya contaba con ciertos adelantos, fue reestructurada y mejorada con los resultados del proceso.

Para el desarrollo de Appio se utilizaron Ionic y Angular como herramientas principales, mi rol en el proyecto estuvo principalmente relacionado con el front-end utilizando las herramientas propias del framework y por supuesto poniendo en práctica los conocimientos en HTML, CSS y SCSS. Si bien la gran mayoría del back-end fue desarrollada por mis compañeros, después de finalizar el máster y entender un poco más la parte del back me involucré un poco realizando algunas acciones en typescript y base de datos. Con el fin de mantener el control de versiones del proyecto y poder compartir los archivos de una manera óptima, utilizamos Github.

Posteriormente cargamos la aplicación a la Play Store de Google y en este momento se encuentra disponible al público para su descarga en versión Beta únicamente para dispositivos Android, seguiremos realizando cambios y mejorando sus funcionalidades de acuerdo con los comentarios que nos hagan los usuarios.
Aprendizaje
Con este proyecto tuve la oportunidad de trabajar con diversos recursos propios del design thinking, lo cual fue muy enriquecedor para mi proceso de aprendizaje, en especial la planeación y aplicación de encuestas a los potenciales usuarios; así mismo, utilicé bastante figma por lo que tuve la oportunidad de descubrir muchas de sus funcionalidades y ciertos “trucos” que resultan bastante útiles.

En cuanto al desarrollo, fue muy interesante tener la posibilidad de explorar y manejar frameworks como Angular e Ionic que me permitieron ampliar los conocimientos, adquirir cierta soltura y experiencia en su manejo.

Considero muy importante resaltar que más allá del aspecto técnico, también tuve un aprendizaje personal, ya que pude profundizar sobre el tema de los huertos en casa, la importancia de los alimentos orgánicos y me quedó sumamente claro que el tiempo y los recursos invertidos en la etapa de UX/UI son realmente importantes para la estructura de un proyecto web o aplicación.