Prácticas Diseño Interfaces de Usuario
Grupo: DIU1_FernandoAdam. Curso: 2024/25
Actualizado: 18/05/2025
Proyecto:
Bio Ahorro
Descripción:
El objetivo de esta práctica es desarrollar BioAhorro, una plataforma que permita a más personas acceder a productos ecológicos de forma fácil y a buen precio. Queremos que lo ecológico deje de ser algo exclusivo y pase a ser parte del día a día de cualquier consumidor. Para conseguirlo, el proyecto se basa en tres ideas clave: Colaborar con pequeños productores y agricultores de toda España, para ofrecer productos de calidad sin depender de grandes cadenas ni largos transportes, diseñar una aplicación sencilla y práctica, donde los usuarios puedan comprar productos ecológicos, ver recetas, eventos y contactar fácilmente y promocionar el consumo responsable, destacando opciones sostenibles y asequibles, para que más personas se animen a elegir productos ecológicos.Con este proyecto, buscamos combinar tecnología, sostenibilidad y accesibilidad en una solución realista y útil.
Logotipo:
Consume mejor. Gasta menos. Cambia el mundo.
Miembros:
- 👤 Fernando Lanzarot Facio
- 👤 Adam Navarro Megías
----- Fernando: https://github.com/Quartenion, Adam: https://github.com/Adman23
USER RESEARCH PLAN Este URP se ha hecho recopilando información de varias páginas sobre mercados ecológicos. Primero, se explican sus características generales y luego se responden algunas preguntas clave como el coste, comercialización, stakeholders, etc. Estas preguntas han servido para entender mejor el contexto, los factores que influyen en los mercados ecológicos y los tipos de usuarios que pueden interactuar con ellos.
Hemos comparado cuatro plataformas de mercados ecológicos: Ecomercado de Granada, Mercat de la Terra, Adelaide Central Market y Bio es Veda. Para decidir cuál es la mejor, analizamos aspectos como la entrega a domicilio, variedad de productos, facilidad de uso y si ofrecen información clara sobre los proveedores.
Después de revisar todas las opciones, elegimos Bio es Veda porque es la que mejor se adapta a nuestras necesidades:
- Entrega a domicilio en toda España: A diferencia de otros mercados, Bio es Veda envía productos a cualquier parte del país sin pedir una compra mínima.
- Gran variedad de productos: Tiene muchas opciones de productos ecológicos, lo que facilita encontrar lo que buscamos.
- Página fácil de usar: Su plataforma es clara y sencilla, a diferencia de Ecomercado de Granada, que es difícil de navegar.
- Ofrece descuentos y reseñas: Los usuarios pueden aplicar descuentos y dejar valoraciones después de comprar, algo que no todas las otras plataformas permiten.
- Información detallada sobre los productos: Explica bien cada producto, lo que ayuda a los compradores a tomar una mejor decisión
Aunque otras plataformas, como Adelaide Central Market, tienen buenas características, su servicio está enfocado en otro país (Australia) y tiene más restricciones. En cambio, Bio es Veda es una mejor opción para España y para quienes buscan un mercado ecológico con más facilidades.
Hazel es una mujer de 34 años Australiana que ha pasado a vivir en Granada. Ahora está en la situación de que quiere mejorar su salud de distintas formas y por eso es un personaje interesante para usarla de ejemplo para este trabajo. Hazel ha estado expuesta a comida sana, de calidad y a mercados ecológicos gran parte de su vida, por lo que es una persona con altas expectativas al respecto y que ahora mismo no le falta el dinero.
Jorge es un buen ejemplo de usuario para Bio es Veda porque busca productos ecológicos fáciles de conseguir y de buena calidad para regalar a su familia. Lo diseñé como alguien que no piensa tanto en su propia salud, sino en la de los demás. Su historia muestra que tiene un vínculo con el campo y la vida rural, pero prefiere vivir en la ciudad. Esto ayuda a entender que no todos los usuarios estarán igual de interesados en los productos ecológicos, algunos los buscarán por convicción y otros solo en ciertos momentos.
Describe el porqué de las dos experiencias de usuario contadas en el journey map. Por ejemplo, reflexiona si te parece que son habituales. Enlaza con los recursos journey que están en la carpeta P1/. Borra esta linea del template cuando termines.
Hazel se encuentra con la página del Ecomercado de Granada, ella no sabe que la página está desactualizada y abandonada e intenta interactuar con los distintos apartados volviéndose frustrada con la situación. No diría que es una experiencia totalmente común, pero si buscas ecomercados en Granada es de los primeros resultados, por lo que tiene que pasar más de lo que pensamos.
El journeymap describe la experiencia de Jorge al comprar productos ecológicos en la tienda Bio es Veda. Jorge enfrenta problemas como poca información en redes sociales, falta de reseñas de otros clientes y dudas sobre los descuentos. Para mejorar su experiencia, se proponen acciones como aumentar la publicidad, ofrecer cestas ya preparadas y brindar atención rápida por WhatsApp, con el objetivo de que Jorge encuentre la tienda más fácilmente y compre con mayor confianza.
- Enlace al documento: (xls/pdf)
- URL y Valoración numérica obtenida: 52.558%
- Comentario sobre la revisión: En el usability review hemos utilizado la plantilla para analizar en profundidad el competidor escogido, Bio es Veda. Este análisis ha tenido una puntuación total de 52.558%, y hemos podido ver muchas carencias en la página que se podrían solventar (ayuda y navegabilidad), pero también algunas cosas que hace muy bien como la búsqueda de productos y la variedad de los mismos.
La propuesta de valor de nuestro proyecto se refleja principalmente en la accesibilidad de los productos ecológicos a un mercado más generalista, es decir, expandir el consumo de productos ecológicos de un nicho a algo común. Esto lo queremos conseguir de varias formas, la primera sería trabajar con múltiples negocios pequeños y agricultores a lo largo de España, para facilitar que los consumidores (ya sean los propios negocios o personas que quieren hacer la compra) accedan a productos de calidad con precios razonables y que les pueda interesar más que comprar todo el el supermercado. Otra forma sería creando una red de producción extensa, trabajando con muchos productores y agricultores a lo largo de España permitiendo distribuir de manera sostenible (sin tener que realizar largas rutas de transporte) gran cantidad de productos ecológicos para suplir la demanda que necesitaría un público más general. La última más importante sería el marketing, ya que aun siendo ahora más popular, sigue siendo algo poco extendido, especialmente hoy en día que el presupuesto del ciudadano promedio es bajo en comparación a los costes, por lo que es normal que quieran evitar gastarse más en productos ecológicos si de primeras no les llega para fin de mes. Nuestro objetivo es concienciar y promocionar especialmente los productos que no sean muy caros dentro de los productos ecológicos, no buscamos la calidad perfecta sino la sostenibilidad, y de esta forma intentar llegar a la mayor cantidad de gente posible.
Luego esta propuesta de valor la hemos resumido y concretado en el documento del Scope Canvas donde ya se va solidificando el proyecto, indicamos el nombre de nuestr proyecto (BioesAhorro), además de darle niveles de prioridad a los problemas y las motivaciones de los usuarios. También establecemos los objetivos a largo y corto plazo a cordes a nuestra propuesta de valor y concretamos que acciones queremos que puedan hacer los usuarios y las métricas con las que medirémos el exito de nuestro proyecto.
| Flujo | Descripción |
|---|---|
| Inicio | El usuario accede desde la Landing Page, donde puede navegar hacia la tienda, iniciar sesión o contactar. |
| Exploración de productos | Desde la sección Tienda, se accede al Listado de productos. Allí se puede explorar o utilizar el buscador para encontrar artículos específicos. |
| Añadir producto | Una vez encontrado el producto, se puede añadir directamente desde el listado o entrando al Panel del producto. Se añade al Carrito. |
| Eliminar producto | Desde el Carrito, el usuario puede eliminar productos previamente añadidos. Esto puede hacerse en cualquier momento después de añadir. |
| Inicio de sesión | El usuario puede iniciar sesión desde cualquier página. Si ya tiene sesión iniciada, accede automáticamente a su cuenta. Esto es requerido para acceder al Panel de Pago. |
| Compra | Tras iniciar sesión y revisar el carrito, el usuario puede acceder al Panel de compra y luego al Panel de pago si la sesión está activa. |
| Contacto | Desde la Landing Page, se puede ir a Contactar, donde se ofrecen múltiples formas de comunicación (correo, teléfono, redes). Incluye también acceso a la sección "colaborar". |
| Término | Significado |
|---|---|
| Login | acceder a plataforma |
-El moodboard es una buena base que permite ir detallando cada uno de los componentes que van a cimentar la interfaz de nuestra aplicación. Para realizarlo hemos estado investigando primero un poco cual es el enfoque que le queríamos dar, buscando imágenes de ejemplo como las que se pueden ver en el resultado y también pensando el slogan en base a nuestra propuesta de valor.
-Hemos utilizado herramientas de IA para generar varios logos posibles y al final nos hemos decantado por uno más simple de lo que habíamos pensado al principio porque viene mejor para el estilo que al final hemos hecho.
-La tipografía nunito nos fijamos en un trabajo de otro año que la usaba y luego la buscamos y nos encajaba con lo que queríamos para nuestra página (explicación en los guidelines de porqué). Estabamos buscando otra tipografía para títulos y Agbalumo nos pareció bonita desde el principio, a si que la hemos aplicado para headings que separan partes, pero no sería buena para textos.
-Los colores teníamos más o menos claro que queríamos (verdes y marrones) porque incluso sabiendo solo un poco de psicología de colores todos reconocemos esos colores por naturaleza, y en concreto nos hemos decantado por los que aparecen en el moodboard porque encajan bien entre sí y no son demasiado cargados, es decir, no producen mucha fatiga visual.
-Para los iconos no nos hemos complicado, hemos buscado iconos simples que sean fácilmente reconocibles, algunos de ellos generados por IA. Para las imágenes muchas de ellas las hemos buscado en pinterest.
-También hemos usado de inspiración para los diseños otras páginas de mercados (las hemos puesto en colaboradores como referencia).
-Las guidelines explican más o menos esto mismo, además también hemos indicado para cada uno de los bocetos y apartados que queríamos hacer un poco el como debería de ser, un planteamiento, algunos más detallados que otros.
-La imágen del lógo si se podría utilizar en instagram ya que es circular, reconocible, y altamente visible incluso cuando es pequeña.
-
Menú adaptable y accesible
- Implementación de un menú hamburguesa desplegable que permita acceso completo a todas las secciones en dispositivos móviles.
- Menú inferior fijo para accesos rápidos a las secciones más utilizadas: Carrito, Tienda y Cuenta.
-
Tarjetas visuales para contenido
- Uso de tarjetas para representar productos, recetas y eventos. Cada tarjeta incluye imagen, título, información clave (precio, fecha, categoría) y enlace rápido al detalle.
-
Buscador con filtros
- Barra de búsqueda con capacidad de filtrar resultados por categorías para facilitar la localización rápida de productos, recetas o eventos.
-
Carrusel dinámico en página principal
- Carrusel visual para mostrar productos destacados, promociones y novedades de manera atractiva y moderna.
-
Formularios simples y directos
- Formularios minimalistas para registro, inicio de sesión y contacto que simplifican la interacción y reducen la fricción para el usuario.
-
Iconos familiares y coherentes
- Uso de iconografía sencilla, clara y reconocible, basada en estándares comunes, para facilitar la comprensión y navegación.
-
Páginas detalladas con jerarquía visual
- Estructura clara en páginas individuales de productos, recetas y eventos, con información organizada y elementos interactivos como mapas y botones destacados.
-
Chatbot básico y accesible
- Incorporación de un chatbot sencillo que permita soporte rápido sin complicar la interfaz.
Estas decisiones tienen como objetivo hacer que la app sea fácil de usar, accesible para todos y que tenga un diseño acorde con la identidad ecológica de BIO - AHORRO. Queremos que los usuarios naveguen sin dificultad y se sientan cómodos usando la plataforma.
LINK BOCETOS: https://www.figma.com/design/NsWmqf8UViA7fgWY71rynk/BOCETOS-HI-FI?node-id=0-1&t=SXvtXueBJQHZ5jsy-1
-Hemos hecho alrededor de 16 bocetos, depende de si cuenta el menú desplegable o las versiones alternativas, y se puede ver en el enlace de figma por un lado el prototipo en movimiento y por otro lado todos los bocetos juntos y extendidos.
-Primero hemos empezado rescantando todo lo posible de los bocetos que hicimos en la anterior práctica, como headings imágenes y algunas cosas, luego hemos definido los bocetos mas básicos como el home, store, account, ... y hemos implementado la funcionalidad de botones como el menú desplegable para que se puedan acceder a los distintos apartados. Para ello se usa una animación de overlay con el boceto del menú, colocándose encima.
-Luego el boceto del menú tiene detalles como el carousel que hemos usado un asset de carousel que lo hemos editado para simular uno, y se puede arrastrar para pasar por los productos destacados (son repetidos pero muestra la funcionalidad, los productos en sí es indiferente), además hemos añadido una animación de cambio automático a los 3 segundos que no traía el asset.
-Para cambios de estado como los botones de grid o list en la store hemos hecho 2 bocetos y con cada botón se cambian entre sí.
-En general para todos los bocetos hemos reutilizado header y footer que también tienen botones para moverse por las páginas.
-Luego están bocetos mas estáticos como el carro de la compra o las páginas específicas y generales de producto o evento (que muestran como podría ser la descripción de uno).
-Para la página de información en el apartado de artículos hemos puesto un "ver más", que se podría aplicar para todas las partes en las que pone ver más y simplemente funciona para ver más artículos (lo hace pasando a una copia del boceto con más articulos).
-Importante indicar que el logo pequeño que sale siempre hace volver al home, para que se pueda navegar bien.
El caso asignado es una aplicación para un bar llamado La Tertulia, que es un bar que combina gastronomía con actividades culturales como recitales, charlas y conciertos. https://github.com/sofiiaglez11/DIU2-string?tab=readme-ov-file
| Usuario | Sexo / Edad | Ocupación | Exp. TIC | Personalidad | Plataforma | Caso |
|---|---|---|---|---|---|---|
| Alicia | Mujer / 15–30 | Estudiante | Baja | Precavida | Móvil | A |
| Blanca | Mujer / 15–30 | Editora junior | Baja | Creativa | Móvil | A |
| Maje | Hombre / 45–60 | Estudiante | Media | Divertida | Móvil | A |
| Juan Manuel | Hombre / 15–30 | Vendedor Ecológico | Alta | Extrovertido | Móvil | A |
| Lorenzo | Hombre / 15–30 | Estudiante | Alta | Sociable | Móvil | A |
| Victoria | Mujer / 15–30 | Estudiante | Baja | Responsable | Móvil | B |
| Cayo | Hombre / 15–30 | Estudiante | Media | Inteligente | Móvil | B |
| Marco | Hombre / 15–30 | Estudiante | Alta | Racional | Móvil | B |
| Diego | Hombre / 15–30 | Estudiante | Media | Solidario | Móvil | B |
| Inma | Mujer / 15–30 | Estudiante | Media | Sensible | Móvil | B |
Las tareas que deberán realizar los usuarios son las siguientes:
- Contactar: Verificar que se puede navegar correctamente a la página de contacto.
- Consultar Eventos: Comprobar que se accede a la sección de eventos y se muestra la información esperada.
- Información: Validar el acceso y visualización del contenido de la página de información.
- Cuenta: Confirmar el acceso a la página de cuenta y la visibilidad de los datos del usuario.
- Leer comentarios: Comprobar que se puede acceder a la página de comentarios y visualizar los mismos.
Las tareas que se han planteado para el test de usabilidad han sido seleccionadas porque representan acciones clave dentro de cualquier aplicación orientada a la gestión de eventos o interacción con el usuario. Además, son funcionalidades comunes a ambas aplicaciones evaluadas, lo que permite hacer una comparación objetiva y coherente entre ellas.
Estas tareas cubren aspectos fundamentales de la experiencia de usuario, como la navegación básica, el acceso a información relevante, la gestión de cuenta personal y la posibilidad de interactuar con contenido generado por otros usuarios (comentarios). Evaluarlas garantiza que se tiene una visión general del funcionamiento de la interfaz y de los posibles puntos de fricción que pueda encontrar el usuario al utilizar el sistema.
La puntuación media del cuestionario SUS en el proyecto A es de 82/100, lo que entra en el rango A (usabilidad aceptable y alta). La mayoría de los usuarios se han mostrado satisfechos con la navegación y funcionalidad de la aplicación, aunque algunos han identificado áreas específicas a mejorar.
-
Alicia Herrezuelo obtuvo un SUS de 90, con una experiencia muy positiva. Considera que la app es fácil de usar y se siente segura navegando por ella. Aun así, encontro la app un poco grande al recorrerla, lo que se podría mejorar.
-
Blanca Lanzarot obtuvo una puntuación de 67.5, que entra en el rango C (marginal). A pesar de completar la tarea, sus respuestas reflejan que la app podría resultarle algo confusa e inecesariamente compleja.
-
María Jesús Luque puntuó con 70, también en el rango C. Sus respuestas indican que pudo utilizar la app, pero percibió dificultades leves relacionadas con la complejidad. Además no es la demografía objetivo, ya que puntua con indiferencia la visita a este tipo de aplicaciones.
-
Juan Manuel Navarro obtuvo 100, la puntuación máxima. Este usuario no encontró ninguna dificultad y se sintió completamente cómodo, aunque por la rapidez en sus respuestas se sospecha que pudo no haber reflexionado del todo en cada ítem.
-
Lorenzo Herrero consiguió una puntuación de 82.5, dentro del rango A. Valora positivamente el diseño general y la facilidad de uso.
En resumen, aunque la media es alta, la diferencia entre usuarios sugiere que algunas personas encuentran la aplicación compleja, lo que debe ser tenido en cuenta para futuras mejoras.
Media global: 82
Evaluación global: A (aceptable)
En el caso del proyecto B, la media obtenida en el cuestionario SUS fue de 84.5/100, lo que también entra en el rango A (alta usabilidad). Sin embargo, se observa una mayor dispersión entre las valoraciones de los usuarios, lo que indica que la experiencia de uso puede variar más entre personas.
-
Victoria obtuvo una puntuación de 90, valorando muy positivamente la experiencia. Considera que es una app clara y fácil de usar.
-
Nicolás otorgó 85 puntos, lo que confirma una percepción general de buena usabilidad. Cree que la app es coherente, aunque podría mejorar en la integración de las funciones.
-
Marco dio la puntuación máxima: 100. Sin embargo, se detectó que respondió muy rápido y sin detenerse en cada pregunta, por lo que se considera que su respuesta puede ser menos representativa.
-
Diego puntuó con 70, lo que lo sitúa en el rango C (marginal). Este usuario tuvo dificultades con la navegación y detectó problemas con el manejo de la aplicación.
-
Inma Orzuelo obtuvo 77.5, dentro del rango B. Percibió la app como funcional, pero con detalles por mejorar, también siendo el manejo de la aplicación.
Aunque la media es alta, varias opiniones encuentran aspectos de la aplicacion complejos de manejar.
Media global: 84.5
Evaluación global: A (aceptable, con margen de mejora)
- El proyecto A presenta una experiencia robusta en cuanto a usabilidad, aunque algunos usuarios encontraron la información demasiado densa y los elementos visuales poco optimizados.
- El proyecto B se percibe como más intuitivo y ligero, pero necesita reforzar aspectos como el feedback tras acciones y añadir funciones clave (editar perfil, registro/inicio de sesión).
Ambos proyectos obtienen puntuaciones aceptables, pero muestran diferencias cualitativas importantes que deben ser consideradas si se busca optimizar la experiencia de usuario.
Además del cuestionario SUS, se aplicó un test práctico basado en tareas clave para evaluar la experiencia de uso real de cada aplicación. Las tareas se realizaron con los mismos usuarios que participaron en el SUS, y se centraron en los siguientes objetivos:
- Contactar: Verificar que se puede navegar correctamente a la página de contacto.
- Consultar eventos: Comprobar que se accede a la sección de eventos y se muestra la información esperada.
- Información: Validar el acceso y visualización del contenido de la página de información.
- Cuenta: Confirmar el acceso a la página de cuenta y la visibilidad de los datos del usuario.
- Leer comentarios: Comprobar que se puede acceder a la página de comentarios y visualizar los mismos.
Usuarios: Alicia Herrezuelo, Blanca Lanzarot, María Jesús Luque, Juan Manuel Navarro, Lorenzo Herrero
Media SUS: 82 (Rango A - aceptable)
Los usuarios completaron la mayoría de tareas, aunque se identificaron algunos puntos comunes de mejora: textos pequeños y una interfaz algo recargada visualmente. La navegación general fue correcta, pero menos fluida que en el otro proyecto.
Media SUS: 84.5 (Rango A - aceptable)
La mayoría de los usuarios consideraron la app clara, ligera e intuitiva. Las tareas se completaron correctamente, aunque se detectaron algunas carencias: falta de feedback al interactuar, ausencia de funcionalidades como registro o edición de datos, y contraste visual mejorable. A pesar de ello, la navegación resultó más directa y sencilla.
Ambas aplicaciones permiten completar las tareas previstas, pero presentan diferencias clave en la experiencia de usuario.
-
Proyecto B obtiene una mejor puntuación en el cuestionario SUS (84.5 frente a 82) y una navegación más intuitiva y ligera. A pesar de algunas carencias funcionales (como la ausencia de inicio de sesión o edición de cuenta), los usuarios encuentran la app más accesible y comprensible en su estructura.
-
Proyecto A presenta una interfaz más completa en cuanto a contenido, pero también más cargada y menos clara visualmente. Algunos usuarios encontraron dificultades relacionadas con el tamaño del texto, la sobrecarga informativa y la falta de edición de perfil.
En resumen, aunque ambos proyectos son funcionales y alcanzan una evaluación positiva, el proyecto B destaca por su simplicidad, claridad y mejor puntuación global en usabilidad, lo que lo posiciona como el prototipo con mejor experiencia de usuario según los datos recogidos.
Para realizar el análisis de eye-tracking utilizamos la herramienta GazeRecorder. En ella cargamos la imágen correspondiente al home page. Esto nos permitió evaluar visualmente qué elementos captaban la atención de los usuarios en las secciones clave de la página principal.
Se ha aplicado un método UX mixto compuesto por:
- Evaluación heurística mediante tareas concretas: los usuarios debían completar acciones típicas dentro del prototipo de la app.
- Cuestionario SUS (System Usability Scale) para evaluar la percepción global de la experiencia.
- Eye-tracking experimental mediante WebGazer, para detectar áreas de atención en la interfaz principal.
La evaluación fue realizada por el equipo DIU1_FernandoAdam sobre el proyecto La Tertulia.
La Tertulia es una app para un bar cultural que combina gastronomía con eventos como charlas, recitales y conciertos. La app permite ver eventos, comentar, participar en escenarios abiertos, conocer la historia del bar y gestionar el perfil de usuario.
| Debilidad detectada | Valoración UX del equipo |
|---|---|
| No se pueden editar los datos del usuario | Limita la personalización del perfil. Se sugiere añadir opción de edición básica. |
| El calendario no es claro | No se explican los días destacados ni se puede interactuar con ellos. Podría confundirse con un elemento decorativo. |
| Etiquetas como “HOY”, “JUEVES”, “MAÑANA” no son interactivas | Esto corta la fluidez de navegación. Sería útil que llevaran al evento del día correspondiente. |
| Términos arbitrarios como “JUEVES” generan confusión | No queda claro su significado. Requiere contexto o funcionalidad. |
| Falta de feedback visual al pulsar botones | Los botones “Participa” o “Enviar comentario” no ofrecen confirmación de acción. Esto puede crear incertidumbre en el usuario. |
| El icono de perfil tiene bajo contraste y es poco visible | Dificulta el acceso rápido a funciones personales, especialmente en pantallas pequeñas. |
| Usuario | Edad | Sexo | SUS Score |
|---|---|---|---|
| Victoria | 15–30 | Mujer | 90 |
| Nicolás | 15–30 | Hombre | 85 |
| Marco | 15–30 | Hombre | 100 |
| Diego | 15–30 | Hombre | 70 |
| Inma | 15–30 | Mujer | 77.5 |
Promedio estimado (sin Marco): ~80.6, considerado bueno pero con margen de mejora.
- La atención se concentra en la zona superior (imágenes y cabecera).
- El icono de perfil apenas es visualizado: bajo contraste y tamaño reducido.
- Se ignoran zonas interactivas no evidentes como etiquetas de fecha.
La app presenta un diseño visual atractivo y una navegación general intuitiva. El contenido está bien organizado y refleja con acierto el espíritu del bar. Sin embargo, hay aspectos de la interfaz que pueden generar confusión y reducir la fluidez de uso.
La metodología empleada (tareas + SUS + eye-tracking) ha sido clave para descubrir errores no evidentes en la fase de diseño. Ha permitido observar el comportamiento real de los usuarios y extraer conclusiones relevantes para iteraciones futuras.
- Aumentar la visibilidad y contraste del botón de perfil.
- Hacer interactivos los elementos del calendario y etiquetas como “HOY”.
- Añadir opciones para editar los datos del usuario desde el perfil.
- Incluir feedback visual tras acciones como comentar o participar.
- Mejorar la semántica de los términos utilizados en la interfaz (como “JUEVES”).
Repositorio del proyecto La Tertulia – GitHub
Comenzamos esta práctica con una investigación previa sobre los mercados ecológicos existentes, explorando diferentes páginas web, simulando compras y detectando dificultades desde la perspectiva de usuarios reales. Esta fase inicial nos permitió construir personajes y journeys representativos, capturando frustraciones y oportunidades de mejora. A partir de ahí, definimos una propuesta de valor clara: acercar el consumo de productos ecológicos a un público más generalista, promoviendo la sostenibilidad desde una red de productores locales.
En la primera práctica (P1), nos centramos en el análisis del contexto, identificamos problemas del sector ecológico y generamos nuestros usuarios tipo y sus journey maps. Aquí quedó claro que hay una barrera tanto de acceso como de percepción hacia este tipo de productos.
En la segunda práctica (P2), analizamos fortalezas y debilidades de otras plataformas, y empezamos a perfilar nuestra solución. Definimos las funcionalidades clave y comenzamos a diseñar una estructura coherente con nuestra propuesta de valor, priorizando accesibilidad y sostenibilidad.
En la tercera práctica (P3), pasamos al diseño visual, creando los primeros bocetos de la versión de escritorio, asignando una paleta de colores alineada con los valores ecológicos del proyecto. También desarrollamos un Task Flow y un User Task Matrix para identificar puntos críticos de interacción y asegurar la usabilidad del sistema.
Finalmente, en la cuarta práctica (P4), evaluamos la usabilidad del prototipo con distintos métodos: cuestionario SUS, pruebas de tareas específicas y una pequeña prueba de eye tracking con GazeRecorder. Esta última nos permitió detectar qué elementos captaban más atención y cuáles pasaban desapercibidos.
A lo largo de todas las fases, fuimos dando forma al proyecto Bio-Ahorro, centrado en democratizar el acceso a productos ecológicos mediante una propuesta funcional, visualmente cuidada y con una experiencia de usuario pensada para todo tipo de públicos.
Creemos que hemos trabajado de forma organizada y constante a lo largo de todas las prácticas. El proceso nos ha permitido conectar todas las fases del diseño centrado en el usuario, desde la investigación inicial hasta la evaluación final. Aunque hay aspectos que se podrían mejorar a nivel visual o técnico, el proyecto ha evolucionado de manera coherente y creemos que la solución que presentamos es útil, realista y está alineada con los objetivos que nos propusimos al principio. En general, estamos satisfechas con el resultado y con todo lo que hemos aprendido durante el desarrollo del proyecto.