Prácticas Diseño Interfaces de Usuario (Tema: Mercados ecológicos)
Grupo: DIU1.LasTres. Curso: 2024/25
Actualizado: 22/03/2025
Proyecto: Tierra Narazí 🌱
Enlace al prototipo de figma: https://www.figma.com/proto/VX0qPh9szw2rsTafreeMu4/Layout?node-id=1-2&t=xshx9AxdLnKBxPzi-1&starting-point-node-id=1%3A2&scaling=contain&content-scaling=fixed
Descripción:
Nuestro proyecto consiste en una página web que permite comprar productos ecológicos de proximidad de forma rápida, personalizada y sencilla. Tierra Nazarí está diseñada tanto para consumidores como para agricultores, ya que a través de la sección "Trabaja con nosotros", los productores granadinos pueden dar a conocer y ofrecer sus productos directamente.
Los usuarios pueden realizar compras sin necesidad de registrarse, aunque esto les limita el acceso a funciones avanzadas. Por una suscripción de 10 € mensuales, los clientes registrados pueden disfrutar de funcionalidades "premium", como la creación de una lista de productos frecuentes que les permite hacer sus compras con un solo clic.
Además de ser una plataforma de compra, Tierra Nazarí incluye una sección de talleres y un blog, donde promocionamos productos, compartimos recetas y contenidos relacionados con un estilo de vida sostenible.
Miembros:
- 👤 Ángela María Garrido Ruiz
- 👤 Camelia Peña Alcón
- 👤 María Teresa Guerrero Salguero
Hemos completado la plantilla proporcionada de User Research para poder mejorar el desarrollo de nuestra página web. En el documento adjunto podremos ver en profundidad los distintos puntos abarcados en el estudio como por ejemplo: los objetivos, los métodos de investigación y las personas que serán nuestro público. USER RESEARCH PLAN.pdf
Nuestro objetivo es desarrollar una web para la venta online de productos ecológicos. Antes de comenzar con el desarrollo, hemos estudiado a la competencia, analizando los siguientes negocios: Valley Vega, Ecomercado de Granada y Naturefoods
Tras estudiar los distintos competidores hemos llevado a cabo una comparación de los mismos para ver cual es nuestro competidor mas fuerte, el ranking queda de la siguiente manera:
1º NatureFoods con una puntuación de 11/15 2º Valley&Vega con una puntuación de 8/15 3º EcoMercado de Granada con una puntuación de 7/15
En el documento adjunto se puede ver más información sobre cada una de las empresas y la tabla comparativa en profundidad. DOCUMENTO COMPLETO
Tenemos a Alex, un hombre de 25 años, residente de Granada, deportista profesional de natación que quiere preparar oposiciones para ser profesor de educación física. Tiene que coordinar su tiempo con los entrenamientos de natación para futuras competiciones y la preparación necesaria de las oposiciones mencionadas. Va a comenzar a vivir con su pareja y están pensando en adoptar una mascota. En el reparto de tareas de la casa le ha tocado encargarse de la compra y de cocinar. PERSONA 1 - DEPORTISTA
Gracia Jiménez es una profesora de secundaria (inglés) que vive en el Zaidín con su pareja, Juan. Disfruta mucho de hacer actividades en al aire libre y leer, tanto literatura como articulos varios. Le gustan los idiomas y planea estudiar más italiano. Disfruta desde pequeña de dar clase y siempre intenta motivar a sus alumnos cons sus estudios.
Recientemente ha decidido tener un hijo con su pareja. Ninguno de los dos dispone de mucho tiempo libre, por lo que reparten las tareas de casa: él se encarga de la limpieza y ella de hacer la compra. Además, están pensando en comprar un coche para poder viajar en el futuro con su hijo de forma cómoda; actualmente solo hacen uso del transporte público.
PERSONA 2 - EMBARAZADA
Carmen López, de 83 años, ha vivido toda su vida en Churriana de la Vega. Vive con su esposo Pedro en una casa en el campo y ha sido costurera desde joven. Le encanta salir con sus amigas, ir al mercado y pasar tiempo con sus nietos. Con el tiempo, le cuesta más desplazarse y adaptarse a la tecnología, pero está dispuesta a aprender para seguir siendo independiente. PERSONA 3 - ANCIANA
Hemos elaborado tres experiencias, una por cada persona comentada anteriormente. Creemos que si pueden ser experiencias realistas en vista del perfil que tiene cada persona que se puede ver en el punto anterior.
- Enlace al documento: DOCUMENTO COMPLETO USABILIDAD
- URL y Valoración numérica obtenida: La página Naturefoods ha obtenido una valoracion de 69 (moderada)
En general, la página web está bien estructurada y es fácil navegar por ella, pero hemos encontrado varios puntos a mejorar:
- Incluir información sobre promociones y productos destacado
- Cuando se añadan productos al carrito, mostrar un mensaje de confirmación
- Incluir una barra de progreso para que, al completar el pago, sepamos en qué punto de la transacción nos encontramos
- Si ponemos un campo erróneo, que aparezca dicho error al lado del campo en vez de en la parte superior
- Mejorar el tiempo de respuesta del carrito de la compra y del proceso de pago
Este apartado recoge de forma estructurada las opiniones, necesidades y sugerencias que hemos recopilado durante el proceso de diseño. La malla nos ha permitido identificar patrones, validar ideas y detectar oportunidades de mejora basadas en la experiencia real de los usuarios.
Para desarrollar nuestra propuesta, hemos elaborado un mapa de empatía, el cual nos permite visualizar el comportamiento de nuestros usuarios identificados en la práctica anterior, así como nuestra propia perspectiva sobre su experiencia de usuario.
En nuestra empresa nos preocupamos por el medioambiente. Queremos reducir la huella de carbono mediante un servicio que ofrezca los mejores productos ecológicos con una entrega rápida y poco contaminante. Nos vamos a centrar en las personas que también se preocupan por el futuro de su tierra, fomentando la compra de productos locales granadinos. Tierra Nazarí será una página web dedicada a la promoción y venta de productos ecológicos, donde además se anime a los granadinos a cuidar de su entorno con noticias, recetas de cocina y además talleres organizados por mercados locales.
La matriz de tareas incluye las principales acciones que los diferentes tipos de usuarios pueden realizar en la plataforma. Esta representación permite visualizar qué funcionalidades están disponibles para cada perfil (usuarios registrados, no registrados y proveedores), ayudando a enfocar el diseño centrado en el usuario y la priorización de funcionalidades clave. Además, cada tarea incluye una breve descripción para facilitar su comprensión.
La matriz completa se puede encontrar en el siguiente archivo pdf, junto a la puntuación de prioridad de cada usuario: User Task Matrix completa
A continuación, se muestran los flujos de usuario de las dos tareas más importantes dentro de la plataforma: Iniciar sesión y Añadir productos a la cesta.
Proponemos una organización lógica de la navegación y elementos de diseño. En este paso, presentamos el sitemap junto con el etiquetado (labelling) del sitio El sitemap de nuestra página web lo hemos dividido en dos imágenes para facilitar su lectura al igual que el labelling:
Hemos realizado los prototipos de las cinco primeras tareas que podemos ver en el Task Analysis, es un diseño a bajo nivel. Podemos ver un posicionamiento orientativo de los botones así como una paleta de colores inicial
Mostramos nuestro moodboard, donde definimos la guía de estilo visual de nuestra aplicación. En la imagen se incluyen los elementos clave —como el logotipo, la tipografía y la paleta de colores— junto con la explicación de por qué se ha elegido cada uno de ellos.
Para representar a nuestra plataforma hemos elegido el logotipo que se puede ver en el Moodboard.
Este logo hace referencia a los productos orgánicos que queremos vender en nuestra web, con tonos verdes.
Además, también representa nuestro deseo de trabajar de la mano con los productores de estos alimentos, simbolizado por el tractor que aparece en el centro del logo.
Creemos que cada decisión que tomamos como consumidores tiene un impacto real en nuestro entorno. En Tierra Nazarí, apostamos por un modelo de consumo responsable que favorece a nuestra tierra, a nuestros productores y a las generaciones que vienen. Cultivar el futuro no es solo sembrar productos, es también sembrar conciencia, colaboración y compromiso. Cada producto local que eliges es una apuesta por un planeta más verde.
La paleta de colores elegida está compuesta por los tonos que se pueden apreciar en la imagen del Moodboard.
- Verdes: evocan la vegetación local.
- Azules: recuerdan al cielo despejado de Granada.
- Naranja intenso: refleja los días soleados tan característicos de la región.
Con esta paleta queremos transmitir la esencia ecológica de nuestra propuesta y el espíritu de la ciudad.
Nuestra landingpage sigue el estilo visual elegido en el moodboard. Dado que su propósito principal es convertir a los visitantes en clientes potenciales o reales, hemos estructurado su diseño teniendo en cuenta los siguientes elementos:
-
El nombre y el logotipo se encuentran visibles desde el principio y se distinguen con claridad.
-
Se indica de forma evidente que se trata de una web, al tener ese diseño apaisado,
-
Se presenta un aliciente para conseguir nuevos registros.
-
Se comunica claramente el propósito de la aplicación, su temática y su utilidad.
Con estos elementos, consideramos que hemos logrado una landing page atractiva, clara y con un mensaje directo.
La información sobre los patrones de diseño se ha extraído del material proporcionado para hacer la práctica. En el pdf que presentamos explica los patrones usados y aduntamos imagenes de los componentes que hemos diseñado para llevar a cabo estos. Toda la información se encuenta aqui PDF Guidelines
Tras la realización de los documentos anteriores hemos definido nuestro prototipo final en figma, en el cual aplicamos los estilos elegidos así como los patrones comentados en el punto anterior. Enlace: https://www.figma.com/proto/VX0qPh9szw2rsTafreeMu4/Layout?node-id=1-2&t=xshx9AxdLnKBxPzi-1&starting-point-node-id=1%3A2&scaling=contain&content-scaling=fixed
Tras la realización de este proyecto hemos obtenido el diseño final de nuestro prototipo del sistema. Gracias al proceso de desarrollo seguido hemos podido crear un prototipo claro, limpio y que consideramos que cumple con los requisitos de usabilidad.
El trabajo del equipo ha sido bueno, manteniendo una comunicación clara y una asignación de tareas estructurada. Una pequeña dificultad encontrada ha sido el uso de la herramienta Figma para el prototipado ya que no se había usado antes.
Para esta práctica nos han asignado el grupo DIU.PalmeraFosforita, cuyo proyecto sobre venta, talleres y eventos sobre cerámica se llama "Kerarqueo". El prototipo proporcionado es el siguiente: Prototipo Kerarqueo.
Para estas pruebas consideramos que el prototipo A es el nuestro (Tierra Nazarí) y el prototipo B la plataforma de nuestros compañeros de clase (Kerarqueo).
Para hacer cada uno de los tests hemos elegido a 6 personas de nuestro entorno (familiares y amigos). A cada uno de ellos se les ha asignado uno de los dos prototipos para las pruebas, de forma que cada proyecto sea estudiado por el mismo número de personas.
| 🆔 ID | 👤 Sexo / Edad | 💼 Ocupación | 🌐 Experiencia en Internet | 📱 Plataforma | 🧩 Perfil cubierto | 🧪 Test | 📊 SUS Score |
|---|---|---|---|---|---|---|---|
| U1 | Mujer / 50 | Secretaria | Bajo | Móvil (Android) | Trabaja como secretaria en un centro de salud y solo usa el móvil para WhatsApp y ver fotos en Facebook. Nunca ha comprado online ni usado apps de compras. Le cuesta adaptarse a cambios tecnológicos. | A | 68 |
| U2 | Mujer / 19 | Estudiante | Alto | Android, Ordenador | Estudiante de psicología. Lleva desde pequeña utilizando el movil a diario, además de una tablet y un PC. | A | 80 |
| U3 | Hombre / 22 | Estudiante | Avanzado | Android, Linux | Está cursando Ingeniería Informática con nosotras, por lo que tiene mucha experiencia con las tecnologías. | A | 75 |
| U4 | Hombre / 40 | Comercial | Bajo | iOS | Trabaja en una tienda de electrodomésticos y utiliza su iPhone tan solo para las tareas básicas. | B | 63 |
| U5 | Mujer / 30 | Ingeniera | Avanzado | Android, Tablet | Ingeniera de telecomunicaciones que utiliza apps de productividad y compra online. Perfil avanzado y exigente. | B | 53 |
| U6 | Mujer / 21 | Estudiante | Avanzado | Android, Windows | Estudiando informática, utiliza mucho su teléfono y su portatil para las prácticas. | B | 68 |
A la hora de elegir qué pruebas realizar, nos decantamos rápidamente por las propuestas en el guión de prácticas: el cuestionario SUS y el método de Eye Tracking. A continuación se explicarán sus resultados.
Este método se llevó a cabo sobre los 6 usuarios anteriores, pidiendoles interactuar con ambos prototipos para depués rellenar un cuestionario de 10 preguntas.
Para nuestro prototipo, Tierra Nazarí, la escala resultante fue 74. Usando la siguiente escala de valores, concluimos que la usabilidad del prototipo que desarrollamos es buena.
Escala SUS que consideramos:
- 0-25 --> La peor imaginable
- 25-50 --> Muy pobre
- 51-70 --> Aceptable
- 71-80 --> Buena
- 81-100 --> Excelente
En un principio ibamos a aplicar también este método sobre nuestro prototipo, pero una serie de fallos con las herramientas de prueba nos impidieron probarlo con nuestro proyecto. Tan solo pudimos probarlo con el prototipo B.
La evaluación de usabilidad de nuestro proyecto se puede encontrar en el siguiente enlace: Usability Report Caso A (Tierra Nazarí)
En resumen, el prototipo desarrollado para nuestro proyecto ha resultado funcional y visualmente atractivo para los usuarios que lo han probado. No obstante, quedarían por mejorar ciertos aspectos de la interfaz que se han señalado como mejorables en la evaluación de usabilidad.
Una vez concluidas las cuatro fases de desarrollo de la práctica, podemos afirmar que el proceso ha sido enriquecedor. Nos ha permitido obtener una idea más real y práctica de cómo es el proceso de desarrollo de Interfaces de Usuarios de forma que se consiga satisfacer las necesidades de los futuros usuarios de una plataforma.
Hemos visto cómo, partiendo de una idea general de la página web que queríamos diseñar, hemos logrado crear un prototipo que ha conseguido una buena usabilidad en las pruebas de la Práctica 4. Todo gracias al análisis de usuarios realizado en la Práctica 1 y el desarrollo de las ideas que teníamos para Tierra Nazarí en las prácicas 2 y 3. Si se tratara de un proyecto real, podríamos hacer mejoras de usabilidad revisitando las etapas de desarrollo anteriores.
En conclusión, estas prácticas nos han ayudado a obtener una idea más clara de las etapas y cada uno de los detalles que se han ido explicando en las clases de teoría. Además, hemos aprendido a utilizar herramientas de diseño, como Figma, que sin duda nos serán muy útiles en proyectos futuros.