Prácticas Diseño Interfaces de Usuario (Tema: .... )
- Guiones de prácticas
- Guía para crea tu Case Study
- Sala de la Fama DIU Hall of fame donde se pueden encontrar Case Study destacados de otros años.
Borrar esta linea cuando acabemos Enlace https://sedacoffee.com/
Actualizado: 14/01/2026
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
Hay que Publicar de forma incremental "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
Grupo: DIU2.UXplorers Curso: 2025/26
Nombre del Proyecto:
Decida el nombre corto de su propuesta en la práctica 2
Descripción:
Describa la idea de su producto en la práctica 2
Logotipo:
Si diseña un logotipo para su producto en la práctica 3 pongalo aqui, a un tamaño adecuado. Si diseña un slogan añadalo aquí
Miembros y nombre del equipo:
- 👤 Mateo Domínguez
- 👤 Aitor Fernández
Cualquier título puede ser adaptado. Recuerda borrar estos comentarios del template en tu documento
Somos un grupo de programadores con la idea de analizar los diferentes tipos de actividades que lleva a cabo la empresa "Seda Coffe", como puede ser la venta de café de especialidad y servicio de catering. Es importante recalcar la experiencia que ofrece esta empresa, por lo que no debemos centrarnos únicamente en la venta de café sino también en la experiencia que involucra toda su elaboración.
Nos centraremos en analizar la interfaz así como la usabilidad de la web, con el fin de aumentar la actividad y mejorar la experiencia del usuario.
Como programadores, hemos creado páginas web para varias empresas del sector centradas en la venta de productos y servicios, que buscan mejorar la experiencia del usuario.
Como observadores, contemplamos un aumento en la demanda los servicios de baristas y del consumo de café de especialidad.
Falta el segundo punto "Metodología" Analizado el público objetivo de establecimientos similares vemos que hay un patrón que se repite en la mayoría de los usuarios, la mayoría de los usuarios se clasifican en:
- Clientes de edad avanzada acostumbrada a beber café de una manera más tradicional.
- Clientes adultos que buscan nuevas experiencias con respecto al café.
- Joven acostumbrado al café tradicional que prueba por primera vez café de especialidad.
- Empresas que buscan contentar clientes con un buen café de especialidad.
- Futuros matrimonios que buscan ofrecer a sus invitados una experiencia única con café de especialidad
Como usuarios podemos realizar varias operaciones a través de la web como puede ser, compra de café de especialiad y la reserva de servicio de catering y , en el establecimiento, disfrutar del servicio de los baristas mientras preparan nuestro café.
Para concluir, profundizaremos las necesidades y comportamiento de los usuarios, mencionados anteriormente, ofreciendo mejoras en el diseño y en las estrategias de marketing de la plataforma. Realizaremos varios estudios para evaluar a nivel competitivo la situación de la empresa para maximizar sus beneficios.
Describe el plan en tu User Research (cómo se plantea la selección de usuarios). Borra esta línea cuando lo tengas.
Para poner en perspectiva la empresa hemos seleccionado tres competidores de características muy similares que nos permitirán saber que ventajas y debilidades tiene nuestra empresa con respecto al resto de empresas en el mismo entorno. Breve descripción de los competidores:
- Cafe 1931: Café barista con un toque tropical cuyo aspecto que destaca con respecto al resto, vende un producto muy similar al de nuestra empresa, carece de sitio para tomar el café.
- Despiertoo: Café barista con muy buena ubicación, en el centro de Granada, muy próximo a la catedral lo que podría suponer una ventaja.
- La finca roaster: Otra opción similar que además de ofrecer la experiencia de un buen café de especialidad, también ofrece varias opciones llamativas de bollería, que puede ser un factor a tener en cuenta.
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.
Junto con la captura de pantalla de la ficha de la persona, haz una breve descripción de la misma. Recuerda que son dos. Los recursos de imagen deberán estar dentro de la carpeta P1/ Cuando termines, borra esta línea.
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
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