Alex Velasco Mesas
6 min readMar 30, 2020

A continuación desarrollaré la idea propuesta para mejorar el pequeño comercio de proximidad para mi proyecto personal del Bootcamp de UX/UI Design en Neoland.

*Si quieres saber como llegué hasta la fase de ideación puedes leerlo aquí

La idea digital

La idea digital de este proyecto pasa por la implementación de una pantallas táctiles en nuestro espacio de cultura gastronómica de nuestro territorio, para poder llegar a un público nuevo que se ha visto interesado por alguna actividad de las que se ofrecen.

Representación de la idea

En este producto digital el usuario sería capaz de hacer un pedido de frutas, verduras y otros productos de nuestros agricultores y productores asociados, ofreciendo una garantía de calidad, sostenibilidad y proximidad del producto. Por ellos, este producto digital contempla que el usuario pueda interactuar con el fin de conocer la historia del producto que está comprando, quienes son las personas que lo producen y cual es su origen, aportando así un valor, una identidad y una historia al producto.

Se quiere ofrecer una experiencia diferente al habitual y potenciando esa historia detrás del producto con unos productores/agricultores que hacen de su trabajo un producto de calidad que acabará llegando a nuestros estómagos y acabará siendo parte de nosotros, ya que, somos lo que comemos.

Moodboard

Una vez definida la propuesta de valor para comenzar a desarrollar mi idea, lo primero que necesitaba era recopilar algo de información visual y gráfica para buscar inspiración y, poder así, encontrar una personalidad, construir una identidad y un carácter que reflejara la idea del proyecto.

Para ello realicé un moodboard.

Moodboard del proyecto

Diagrama de flujo

En este punto creé un Diagrama de flujo (User Flow) donde represento, gráficamente, el proceso que realizaría un usuario con una tarea concreta.

Diagrama de flujo — Task Flow

Esto me ayudó para pensar en el proceso de compra, los pasos que los usuarios deberían seguir y la información que necesitaría en cada pantalla. También, me ayudó a pensar en los diferentes flujos de cada usuario y de que manera se podría interactuar con el producto digital y poder así diseñarlo de forma intuitiva, cómoda y pensado siempre en el usuario.

Por ello, represento una tarea específica, hacer una compra de algunas frutas, y como se observa en el diagrama detallo paso a paso que haría y necesitaría este usuario para llegar a obtener su compra, al igual que, también imagino otros escenarios, como la posibilidad de volver atrás si quiere obtener más productos, modificarlos, etc.

Arquitectura de la información

Llegado a este punto pude crear la jerarquía del contenido, a través de un site map, para poder clasificar la información y representar una estructura gráfica para ayudarme a visualizar la construcción correcta del producto digital y ordenar la información de forma consistente.

Site map

Identidad

Después de tener una estructura definida ya pude comenzar a crear la identidad visual para Agrobox creando una guía de estilo que marcó la personalidad gráfica de la empresa para poder seguirla en el diseño del producto digital.

Se escoge una línea que represente los conceptos asociados a la marca: Fresco, Salud y Calidad, aportando un diseño moderno y dinámico, ya que estamos digitalizando y modernizando un medio tradicional y antiguo.

Prototipado

En esta fase desarrollé los wireframes para crear una base sólida que asentara el proyecto. Esto me ayudó a representar de una forma más fiel las pantallas que conformarían el producto digital, así como su flujo de navegación.

Comencé con una representación de baja fidelidad de la interfaz del usuario, el esqueleto del diseño, con el objetivo de representar los conceptos visuales de cada una de las pantallas.

Una vez que tuve el esqueleto pasé a una representación de alta fidelidad, aplicando color, tipografía, imágenes, elementos visuales... Es este caso el objetivo principal era conseguir una apariencia visual más cercana al producto final y con una idea idea general del mismo.

Testeo del producto

Con un producto digital ya con cara y ojos pude realizar un primer test de usuarios para ponerlo a prueba.

El user test me dio un primer feedback de los usuarios, también entorno a la usabilidad y learnability, entre otra información que pude recopilar para llevar a cabo una revisión a fin de mejor el producto.

Fotos user test

En cuanto al producto digital, algunos de los comentarios por parte de los participantes del test fueron que se podría pensar una manera más ágil y cómo para el proceso de compra, en el momento de poner su dirección, por otro lado noté que era un poco confuso para alguno de ellos encontrar el apartado de “cesta de la compra” ya que la nomenclatura que se utilizó fue “agrobox”, lo que hacía confundir al usuario al ser el mismo nombre de la empresa y cambiar la palabra más común al que ellos están habituados a encontrar en un entorno digital.

Conclusión

Soy consciente de que este proyecto es bastante ambicioso ya que, se está hablando de un cambio de mentalidad y hábitos de compra por parte de la mayoría de la población, comenzando por una sensibilización del producto de KM 0, sus ventajas y su importancia para la economía y el territorio en el que vivimos. Al igual que, es confuso imaginar un espacio totalmente diferente al existente, con productos expuestos y que puedes elegir cual llevarte al momento, para pasar a un entorno que encuentras una pantalla donde comprar productos frescos que no vas a poder tocar hasta que lleguen a tu casa, lo que hace difícil de adoptar por parte de un elevado número de población.

Representación aplicación versión tablet

Así que esto me lleva a pensar en que este proyecto podría comenzar con un público mas pequeño y concreto. Estoy pensando en un entorno profesional, restaurantes, hoteles, cafés… una aplicación que se podría utilizar para dar servicio de comandas, al sector de la hostelería, de productos de proximidad, de temporada y ofreciendo la máxima calidad, con un sello de garantía que podrían poner en la puerta, que les identificaría como que usan este tipo de productos, y así, comenzar a dar una visualización al proyecto y trabajar por fases hasta llegar a implementar la idea completa.

Por último, me siento muy satisfecho de haber realizado este proyecto individual, ir construyendo paso a paso y realizando cada fase del proyecto. Así como haber aprendido tanto sobre la importancia de este sector y el gran impacto que tiene tanto en nuestra salud como en nuestro territorio. Gracias a todo esta información que he podido recabar soy mucho más consciente e intentaré poner mi granito de arena para ayudar tanto al sector como a mejorar mi alimentación.

Alex Velasco Mesas

Web UX/UI Designer & Full Stack Developer based in Barcelona