Prácticas Diseño Interfaces de Usuario (Tema: .... )
Grupo: DIU1_DEM. Curso: 2024/25
Actualizado: 30/05/2025
Proyecto:
GreenBasket
Descripción:
GreenBasket es una plataforma digital de suscripción de cestas de alimentos 100 % ecológicos y de proximidad que conecta directamente a pequeños productores locales con consumidores que buscan calidad, frescura y transparencia. Ofrecemos cestas personalizables de temporada, entregas programadas y un sistema de recompensas que promueve prácticas sostenibles (huella de CO₂ reducida, envases reutilizables) y fortalece la economía rural, todo en una experiencia de compra sencilla y plenamente transparente.
Logotipo:
Miembros:
- 👤 AA
- 👤 BB
Los equipos son de 2 personas. Identifícaros con el nombre del Grupo y los enlaces a los perfiles de GitHub de cada integrante
Este documento es el esqueleto del Case Study que explica el proceso de desarrollo de las 5 prácticas de DIU. Aparte de subir cada entrega a PRADO, se debe actualizar y dar formato de informe final a este documento online. Elimine este tipo de texto / comentarios desde la práctica 1 conforme proceda a cada paso
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Granada, con su aspiración a ser capital cultural en 2031, presenta una oportunidad única para estudiar la usabilidad de plataformas digitales de mercados ecológicos como Valle y Vega. Nuestro enfoque de investigación se centrará en evaluar sistemáticamente la experiencia de usuario mediante una combinación de técnicas cualitativas y cuantitativas.
Iniciaremos con un análisis competitivo de sitios similares para establecer benchmarks de usabilidad. Posteriormente, desarrollaremos personas ficticias representativas de los usuarios potenciales: consumidores locales comprometidos con la sostenibilidad y visitantes interesados en experiencias gastronómicas auténticas.
Aplicaremos cognitive walkthroughs para evaluar las tareas críticas (búsqueda de productos, proceso de compra, obtención de información sobre productores) y realizaremos una revisión heurística exhaustiva basada en principios establecidos de usabilidad. Esta estrategia nos permitirá identificar obstáculos en la interacción usuario-sistema, evaluar la eficacia de la arquitectura de información y determinar cómo estas plataformas facilitan la conexión entre consumidores y productores locales. El objetivo final es proporcionar recomendaciones concretas para mejorar la usabilidad, aumentar la conversión y fortalecer el papel de estas plataformas como promotoras del comercio sostenible en Granada.
Describe brevemente características de las aplicaciones que tiene asignadas tu grupo. Decidete por una y explica por qué se ha seleccionado. Borra esta línea cuando lo tengas.
Laura Martínez, 34 años Residente del Albaicín, Granada
"Cada compra que hacemos es un voto por el tipo de mundo que queremos."
Información Básica
• Ocupación: Profesora de secundaria (Biología)
• Educación: Licenciada en Ciencias Ambientales
• Estado familiar: Casada, con un hijo de 6 años
• Personalidad: Organizada, consciente, activista comunitaria
Experiencia Tecnológica
• Nivel: Medio - Utiliza tecnología cotidianamente para trabajo y vida personal
• Dispositivos: Smartphone, laptop, tablet familiar
• Aplicaciones más usadas: WhatsApp, Instagram, apps educativas, email
Motivaciones
• Alimentación saludable para su familia
• Reducir su huella ecológica
• Apoyar a productores locales
• Conocer el origen de los alimentos que consume
Frustraciones
• Falta de tiempo para hacer compras presenciales en mercados
• Dificultad para encontrar productos ecológicos a precios accesibles
• Desconfianza sobre el verdadero origen de productos etiquetados como "eco"
• Limitada variedad de productos en tiendas convencionales
Objetivos
Mantener una dieta basada en productos de temporada y locales, enseñar hábitos sostenibles a su hijo.
Comportamiento de Compra
Planifica compras semanales, busca información detallada sobre los productores antes de realizar un pedido, y prefiere sistemas que le permitan organizar su tiempo eficientemente.
Relación con Valle y Vega
Laura descubrió Valle y Vega a través de un compañero de trabajo hace ocho meses y desde entonces realiza pedidos quincenales. Valora especialmente la transparencia sobre el origen de los productos y la posibilidad de hacer pedidos online para recoger en un punto cercano a su casa. Sin embargo, a veces encuentra la plataforma algo limitada en términos de opciones de pago y le gustaría más información visual sobre los productos.
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.
El objetivo es revisar la usabilidad del competidor seleccionado. Usamos un checklist de verificación. Tras usarlo, subelo a la carpeta P1/ Ofrece aquí un parrafo para:
- Enlace al documento: (xls/pdf)
- URL y Valoración numérica obtenida:
- Comentario sobre la revisión: (puntos fuertes y débiles detectados)
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Comenta con un diagrama los aspectos más destacados a modo de conclusion de la práctica anterior. De qué carece la competencia?? Tu diagrama puede ser una figura subida a la carpeta P2/
| Interesante | Críticas |
|---|---|
| Preguntas | Nuevas ideas |
Explica el Problema y plantea una hipótesis. Es decir, explica aquí qué se plantea como "propuesta de valor" para un nuevo diseño de aplicación propio
Propuesta de valor, pero ahora en vez de un texto es un ScopeCanvas que has subido a P2/ y enlazado desde aqui. Tambien vale una imagen miniatura del recurso. No olvides que tu propuesta ya tiene un nombre corto y puedes actualizar la cabecera de este archivo
Definir "User Map" y "Task Flow" ... enlazar desde P2/ y describir brevemente
Identificar términos para diálogo con usuario (evita el spanglish) y la arquitectura de la información. Es muy apropiado un diagrama tipo sitemap y una tabla que se ampliaría para llevar asociado la columna iconos (tanto para la web como para una app).
| Término | Significado |
|---|---|
| Login | acceder a plataforma |
Plantear el diseño del layout para Web/movil (organización y simulación). Describa la herramienta usada
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Diseño visual con una guía de estilos visual (moodboard) Incluir Logotipo. Todos los recursos estarán subidos a la carpeta P3/ Explique aqui la/s herramienta/s utilizada/s y el por qué de la resolución empleada. Reflexione ¿Se puede usar esta imagen como cabecera de Instagram, por ejemplo, o se necesitan otras?
Plantear el Landing Page del producto. Aplica estilos definidos en el moodboard
Estudio de Guidelines y explicación de los Patrones IU a usar Es decir, tras documentarse, muestre las deciones tomadas sobre Patrones IU a usar para la fase siguiente de prototipado.
Consiste en tener un Layout en acción. Un Mockup es un prototipo HTML que permite simular tareas con estilo de IU seleccionado. Muy útil para compartir con stakeholders
Publicar my Case Study en Github... Es el momento de dejar este documento para que sea evaluado y calificado como parte de la práctica Documente bien la cabecera y asegurese que ha resumido los pasos realizados para el diseño de su producto
Breve descripción del caso asignado (llamado Caso-B) con enlace al repositorio Github Tabla y asignación de personas ficticias (o reales) a las pruebas. Exprese las ideas de posibles situaciones conflictivas de esa persona en las propuestas evaluadas. Mínimo 4 usuarios: asigne 2 al Caso A y 2 al caso B.
| Usuarios | Sexo/Edad | Ocupación | Exp.TIC | Personalidad | Plataforma | Caso |
|---|---|---|---|---|---|---|
| User1's name | H / 18 | Estudiante | Media | Introvertido | Web. | A |
| User2's name | H / 18 | Estudiante | Media | Timido | Web | A |
| User3's name | M / 35 | Abogado | Baja | Emocional | móvil | B |
| User4's name | H / 18 | Estudiante | Media | Racional | Web | B |
Planifique qué pruebas se van a desarrollar. ¿En qué consisten? ¿Se hará uso del checklist de la P1?
Como uno de los test para la prueba A/B testing, usaremos el Cuestionario SUS que permite valorar la satisfacción de cada usuario con el diseño utilizado (casos A o B). Para calcular la valoración numérica y la etiqueta linguistica resultante usamos la hoja de cálculo. Previamente conozca en qué consiste la escala SUS y cómo se interpretan sus resultados http://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/) Para más información, consultar aquí sobre la metodología SUS Adjuntar en la carpeta P4/ el excel resultante y describa aquí la valoración personal de los resultados
Los resultados de un A/B testing con 3 pruebas y 2 casos o alternativas daría como resultado una tabla de 3 filas y 2 columnas, además de un resultado agregado global. Especifique con claridad el resultado: qué caso es más usable, A o B?
Indica cómo se diseña el experimento y se reclutan los usuarios. Explica la herramienta / uso de gazerecorder.com u otra similar. Aplíquese únicamente al caso B.
Cambiar esta img por una de vuestro experimento. El recurso deberá estar subido a la carpeta P4/
gazerecorder en versión de pruebas puede estar limitada a 3 usuarios para generar mapa de calor (crédito > 0 para que funcione)
Añadir report de usabilidad para práctica B (la de los compañeros) aportando resultados y valoración de cada debilidad de usabilidad. Enlazar aqui con el archivo subido a P4/ que indica qué equipo evalua a qué otro equipo.
Complementad el Case Study en su Paso 4 con una Valoración personal del equipo sobre esta tarea
Breve descripción de esta tarea. Las evidencias de este paso quedan subidas a P5/
Breve descripción de esta tarea. Las evidencias de este paso quedan subidas a P5/
Opinión FINAL del proceso de desarrollo de diseño siguiendo metodología UX y valoración (positiva /negativa) de los resultados obtenidos. ¿Qué se puede mejorar? Recuerda que este tipo de texto se debe eliminar del template que se os proporciona