mgea · sergiiio423 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
diff --git a/P1/Competitor Analysis.pdf b/P1/Competitor Analysis.pdf
diff --git a/P1/Empathy Map.pdf b/P1/Empathy Map.pdf
diff --git a/P1/Persona #1.pdf b/P1/Persona #1.pdf
diff --git a/P1/Persona #2.pdf b/P1/Persona #2.pdf
diff --git a/P1/README.md b/P1/README.md
@@ -8,5 +8,25 @@
 - 2 User Journey Map  ( 1 por persona)
 - Revisión de Usabilidad 
 
+![Método UX](../img/Competitive.png) 1.a Competitive Analysis
+-----
 
-(valoración y conclusiones de esta etapa)
+>>> En el análisis hemos comparado 3 páginas que ofrecen servicios típicos de Granada. Todas presentan una interfaz de baja calidad pero en general cumplen con el mínimo que ofrecen. Nosotros hemos elegido la página del free tour de Granada ya que nos parece la mejor de las 3 páginas.
+
+![Método UX](../img/Persona.png) 1.b Persona
+-----
+
+>>> Hemos elegido a esas 2 personas porque ambas tienen cosas en su vida que los convierten en especiales y nos dan diferentes enfoques de cómo puede usar una persona la página web.
+
+![Método UX](../img/JourneyMap.png) 1.c User Journey Map
+----
+
+>>>Hemos escogido esas experiencias de usuario porque nos parecen que son las más realistas teniendo en cuenta el conocimiento que tienen dichas personas de las tecnologias. 
+
+![Método UX](../img/usabilityReview.png) 1.d Usability Review
+----
+>>>  Revisión de usabilidad: (toma los siguientes documentos de referncia y verifica puntos de verificación de  usabilidad
+>>>> SE deben incluir claramente los siguientes elementos
+>>> - Enlace al documento:  (sube a github el xls/pdf) 
+>>> - Valoración final (numérica): 51 
+>>> - Comentario sobre la valoración: Como resultado de la valoración nos ha salido moderate y es que en general la página cumple con los que promete hacer implementando sus funciones básicas pero es en general un poco pobre 
diff --git a/P1/Usability-review-template.pdf b/P1/Usability-review-template.pdf
diff --git a/P1/User Journey Map #1.pdf b/P1/User Journey Map #1.pdf
diff --git a/P1/User Journey Map #2.pdf b/P1/User Journey Map #2.pdf
diff --git a/P2/Documentacion de la Propuesta.pdf b/P2/Documentacion de la Propuesta.pdf
diff --git a/P2/Malla Receptora de Informacion.pdf b/P2/Malla Receptora de Informacion.pdf
diff --git a/P2/README.md b/P2/README.md
@@ -2,28 +2,53 @@
 
 ### Ideación 
 * Malla receptora de información 
-* Mapa de empatía
-* Point of View 
-
 
 ### PROPUESTA DE VALOR
 * ScopeCanvas
 
-
 ### TASK ANALYSIS
 
 * User Task Matrix 
-* User/Task flow
-
 
 ### ARQUITECTURA DE INFORMACIÓN
 
 * Sitemap 
 * Labelling 
 
-
 ### Prototipo Lo-FI Wireframe 
 
 
-### Conclusiones  
-(incluye valoración de esta etapa)
+![Método UX](../img/feedback-capture-grid.png) 2.a Feedback Capture Grid / EMpathy map / POV
+----
+
+
+>>> En esta malla hemos comentado los aspectos más importantes de la práctica anterior
+
+>>> ¿Que planteas como "propuesta de valor" para un nuevo diseño de aplicación para economia colaborativa ?
+
+>>> La propuesta de valor de nuestra aplicación de economía colaborativa se centra en la experiencia del usuario, ofreciendo una plataforma intuitiva, segura y transparente para conectar a proveedores y consumidores de servicios. Además, nuestra aplicación se enfoca en fomentar la confianza y el compromiso entre los usuarios, a través de un sistema de valoración y recomendaciones. Todo esto con el objetivo de crear una comunidad colaborativa basada en la confianza, la calidad y la innovación
+
+
+
+![Método UX](../img/ScopeCanvas.png) 2.b ScopeCanvas
+----
+>>> Propuesta de valor 
+
+![Método UX](../img/Sitemap.png) 2.b Tasks analysis 
+-----
+
+>>> Hemos seleccionado los distintos grupos de usuarios que pueden usar nuestra aplicación y los distintas tareas que pueden hacer y hemos etiquetado la frecuencia en la que cada grupo podría realizar esas actividades  
+
+
+![Método UX](../img/labelling.png) 2.c IA: Sitemap + Labelling 
+----
+
+
+>>> Hemos realizado la estructura de las diferentes páginas que tiene nuestra página web y la manera en la que están organizadas y además hemos hecho el labelling con las diferentes actividades y términos de nuestra página web  
+
+
+![Método UX](../img/Wireframes.png) 2.d Wireframes
+-----
+
+>>> Por último hemos realizado el boceto de las páginas principales de nuestra aplicación y como se vería una vez implementada dicha página 
+
diff --git a/P2/Task analisis.pdf b/P2/Task analisis.pdf
diff --git a/P2/labelling.pdf b/P2/labelling.pdf
diff --git a/P2/prototipo.pdf b/P2/prototipo.pdf
diff --git a/P2/scope_canvas.pdf b/P2/scope_canvas.pdf
diff --git a/P2/sitemap.pdf b/P2/sitemap.pdf
diff --git a/P3/GuideLines.pdf b/P3/GuideLines.pdf
diff --git a/P3/Layout+Simulacion.pdf b/P3/Layout+Simulacion.pdf
diff --git a/P3/landing_page.pdf b/P3/landing_page.pdf
diff --git a/P3/moodboard.pdf b/P3/moodboard.pdf
diff --git a/P3/readme.md b/P3/readme.md
@@ -2,15 +2,122 @@
 
 ## Moodboard (diseño visual + logotipo)   
 
+Para desarrollar el moodboard de nuestra página web, hemos realizado una investigación  de imágenes, tipografías, colores y elementos visuales relacionados con nuestra temática y público objetivo. Nos sirvió como referencia çpara establecer el estilo y la dirección creativa de nuestra página
+
 
 ## Landing Page
 
 
+La creación de la landing page para nuestra página web se basó en el objetivo principal de atraer nuevos clientes. Diseñamos una estructura clara y llamativa, utilizando secciones distintas y visibles. En el encabezado, destacamos el nombre y la propuesta de valor de nuestra página. Luego, resaltamos los beneficios clave de unirse a nuestros tours, como experiencias únicas y guías expertos. Finalmente, incluimos una llamada a la acción clara y convincente para que los visitantes se registren o reserven un tour
+
+
+
 ## Mockup: LAYOUT HI-FI
 
+Para crear el Mockup Layout Hi-Fi de nuestra página web. Utilizando los elementos y estilos definidos en nuestro guideline, hemos diseñado cada una de las 30 páginas de simulación, que incluyen secciones como tours, packs, sobre nosotros, información, contáctanos, registrarse e inicio de sesión. Hemos asegurado que el diseño sea visualmente atractivo y coherente en todas las páginas, utilizando botones interactivos para simular acciones como la navegación entre secciones, la selección de opciones y el envío de formularios. Este Mockup Layout Hi-Fi nos ha permitido obtener una representación detallada y realista de la experiencia de usuario en nuestra página web, facilitando la identificación de posibles mejoras y refinamientos antes de su implementación final.
+
 
 ## Documentación: Publicación del Case Study
 
+La publicación del case study se puede ver en el readme principal de dicho repositorio en él hemos explicado todo paso a paso detalladamente para que se pueda entender 
+
+## GuideLines (Lo hemos entregado como PDF para que sea más facil y legible) 
+
+Guidelines
+En esta sección, definiremos el estilo visual de todos los componentes de la aplicación.
+Logotipo
+
+"SenseGranada": El nombre "SenseGranada" intenta evocar una conexión profunda o una experiencia sensorial relacionada con la ciudad de Granada. El término "sense" (sentir o experimentar) sugiere una experiencia enriquecedora a través de los sentidos, como la vista, el oído, el gusto, el olfato y el tacto. El logo quiere transmitir esa idea de explorar y sumergirse en los sentidos de Granada.
+
+
+Color verde: El color verde se asocia comúnmente con la naturaleza, la frescura, la calma y la tranquilidad. Se desea representar la belleza de los paisajes naturales de Granada, como sus montañas, parques y jardines, así como la sensación de relajación y paz que se busca al visitar la ciudad.
+
+
+Icono de ubicación: El icono de ubicación puede indicar que su página se dedica a ofrecer información, guías o servicios relacionados con los lugares destacados de Granada, ya sea turísticos, culturales o de interés general.
+
+
+Paleta de colores
+Elegimos la paleta de colores de SenseGranada a partir de las imágenes del Moodboard.
+
+Muddy Waters: Este color recuerda a sabor, especias y condimentos que está relacionado con tours gastronómicos. También evoca a los paisajes naturales que se visitan en los tours de naturaleza, como los árboles de los parques.
+
+
+Texas Rose: Se asemeja al color del atardecer, la luz de las velas de los spa de los tours de relax e incluso la luz ambiente con la que se iluminan las discotecas y recintos musicales.
+
+
+Olivine: Color que predomina en parques, en bosques y en la mayoría de tours de naturaleza. Además es un color que invita a la calma y a estar en paz, lo que hace que también esté bastante relacionado con los tours de relax.
+
+
+Iconografía
+
+
+Hemos escogido estos iconos (de Canva) para la aplicación, puesto que son muy legibles y expresan muy intuitivamente la actividad que se quiere representar.
+La imagen que aparece en la landing page también se encuentra en Canva. 
+
+
+Tipografías
+Principalmente se usarán dos tipografías:
+La tipografía utlizada para los títulos es CoffeCake. Tiene un estilo informal y amigable, sus trazos suaves y redondeados transmiten una sensación de calidez y accesibilidad. Hemos elegido esta fuente para crear una impresión acogedora y amigable, lo que puede ayudar a atraer y conectar con nuestra audiencia. También tiene un carácter distintivo: un estilo único y distintivo, con elementos decorativos en los caracteres que le dan un toque especial. Esto puede hacer que el título de su página se destaque y sea memorable.
+
+
+Para el cuerpo y los subtítulos usaremos Belleza. Elegida por varias razones: 
+Elegancia y sofisticación: estilo elegante y sofisticado. Sus trazos finos y fluidos transmiten una sensación de refinamiento y buen gusto. 
+
+
+Legibilidad y claridad: fácil de leer, incluso en tamaños más pequeños. Sus caracteres tienen una forma clara y distintiva, lo que facilita la legibilidad del texto. 
+
+
+Versatilidad: puede adaptarse a diferentes estilos y propósitos. Puede ser utilizada tanto para el cuerpo del texto como para los subtítulos, lo que brinda coherencia y uniformidad en el diseño de su página. Esta coherencia ayuda a crear una experiencia de usuario agradable y profesional.
+
+
+Complemento estético: complementa y armoniza con otros elementos visuales presentes. 
+
+
+Patrón de diseño
+
+Teniendo en cuenta la información proporcionada en https://ui-patterns.com/patterns. Algunas funcionalidades no se ven en el diseño pero se describen a continuación:
+
+Caja de búsqueda: se ha utilizado para la búsqueda de tours en las vistas principales de la aplicación..
+
+Filtro de búsqueda: permite a los usuarios buscar y filtrar contenido específico en función de criterios seleccionados. Los usuarios podrían filtrar los resultados por ubicación, horario, duración, tipo de actividad, precio, idioma, packs, sentido, etc. Se presenta como una barra de búsqueda avanzada en la página. Los usuarios pueden seleccionar o ingresar valores en los campos de filtro y luego aplicar los filtros para mostrar solo los resultados relevantes que coincidan con los criterios seleccionados.
+
+Autocompletado: a la hora de realizar las búsquedas se incluirá la opción de autocompletado.
+
+Formato estructurado: se centra en los formularios con entrada de datos y se utiliza sobre todo en la creación y modificación de las rutas, además de para la reserva de tours.
+
+Mapa: sección de localización del tour.
+
+Calendario Picker: seleccionar fechas de manera intuitiva y fácil utilizando un calendario interactivo.
+
+Ajustes: útil para la vista asociada a los ajustes del sistema, aunque personalizado al caso particular.
+
+Deshacer (Undo): la capacidad de deshacer acciones o revertir cambios realizados en la página.
+
+Valoración: valoración de los tours y guías.
+
+Arrastrar y soltar (Drag and drop): permite a los usuarios arrastrar elementos y soltarlos en áreas designadas para realizar acciones como organizar, cargar o reordenar contenido.
+
+La aplicación cuenta con una barra de navegación inferior que permite desplazarse entre las vistas principales de la aplicación.
+
+Retroalimentación de entrada (Input Feedback): proporciona comentarios en tiempo real a medida que los usuarios ingresan información en formularios, como validar la fortaleza de una contraseña o mostrar sugerencias mientras escriben.
+
+Edición en su lugar (Inplace Editor): permite editar el contenido directamente en la página sin tener que abrir una ventana o pantalla adicional.
+
+Vista previa (Preview): vista previa de cómo se verá el contenido antes de guardarlo o publicarlo.
+
+Las regiones de cada vista deben diferenciarse correctamente, haciendo uso de una rejilla en el diseño para garantizar que la aplicación es responsiva.
+
+Todas las vistas (salvo la vista principal), deben contar con una flecha situada en la esquina superior izquierda que permita volver a la vista anterior.
+
+Todos los componentes deben cumplir con el contraste suficiente como para ser distinguidos a simple vista, teniendo en cuenta la presencia de usuarios potenciales con dificultades visuales o daltonismo.
+
+Estilo de lenguaje
+En SenseGranada, utilizamos un lenguaje cautivador y evocador para transmitir la experiencia única que ofrecemos a nuestros visitantes. Nuestro objetivo es despertar emociones y crear un sentido de asombro y fascinación al describir las maravillas de Granada.
+Optamos por un estilo descriptivo y poético para capturar la belleza y el encanto de los lugares turísticos que ofrecemos, como la Alhambra y el Sacromonte. Utilizamos metáforas y adjetivos evocadores para pintar imágenes vívidas en la mente de nuestros lectores y transportarlos a través de las palabras a los escenarios nocturnos llenos de misterio y magia.
+Al elegir este lenguaje, buscamos despertar el interés y la curiosidad de los visitantes, invitándolos a sumergirse en una experiencia memorable y única. Queremos transmitir la sensación de estar viviendo un momento especial, donde la historia, la arquitectura y la cultura se entrelazan en un ambiente nocturno lleno de poesía y encanto.
+En resumen, utilizamos un lenguaje evocador y descriptivo para crear una conexión emocional con nuestros lectores, inspirándolos a explorar Granada de una manera única y sensorial. Queremos que sientan la magia y el esplendor de esta ciudad, y que se sientan tentados a descubrir todas las maravillas que SenseGranada tiene para ofrecer.
+
+## Valoración final 
 
-(incluye) Valoración del equipo sobre la realización de esta práctica o los problemas surgidos
+Como valoración final podemos añadir que esta práctica ha sido un poco densa de desarrollar pero bastante divertida a la hora de realizarla y no nos hemos encontrado ninguna dificultad grande 
 
diff --git a/P4/Asignacion_ABtesting.pdf b/P4/Asignacion_ABtesting.pdf
diff --git a/P4/Cuestionario SUS DIU .pdf b/P4/Cuestionario SUS DIU .pdf
diff --git a/P4/Cuestionario SUS DIU.xlsx b/P4/Cuestionario SUS DIU.xlsx
diff --git a/P4/DIU_Toolkit_2021 - SUS.pdf b/P4/DIU_Toolkit_2021 - SUS.pdf
diff --git a/P4/DIU_report-template-usability-test_1.docx b/P4/DIU_report-template-usability-test_1.docx
diff --git a/P4/UXCaseStudy-review - DIU3.ElMedusa.pdf b/P4/UXCaseStudy-review - DIU3.ElMedusa.pdf
diff --git a/P4/UXCaseStudy-review.xls b/P4/UXCaseStudy-review.xls
diff --git a/P4/Usability Report .pdf b/P4/Usability Report .pdf
diff --git a/P4/proyectos.md b/P4/proyectos.md
diff --git a/P4/readme.md b/P4/readme.md
@@ -1,17 +1,17 @@
-# DIU - Practica 4, entregables
+# DIU Practica 4
 
+**CUESTIONARIO SUS **
 
-* Users 
+Se contó con la participación de cuatro usuarios en este estudio: Dora, Sandra, Raúl y Adrián. Dora y Adrián son usuarios reales , mientras que Sandra y Raúl son usuarios ficticios, representando diferentes perfiles de usuario. Todos los participantes completaron el cuestionario SUS después de interactuar con ambos sitios webs
 
-Elección y características
+**Usability report del caso B**
 
-* A/B Testing. 
+Para el caso B llevamos a cabo un Usability Review detallado. En este análisis, se describió el sitio web y se evaluaron varios aspectos relacionados con la usabilidad. Se identificaron fortalezas, debilidades y se proporcionaron recomendaciones para mejorar la experiencia del usuario. Así también hablamos de las metodología, se recopilaron datos cuantitativos y cualitativos utilizando el cuestionario SUS, que evalúa la usabilidad y la satisfacción del usuario. Los resultados del cuestionario SUS indicaron que el caso B obtuvo una puntuacion positiva en términos de usabilidad. Los participantes destacaron la facilidad de uso, la claridad de la información y la navegación intuitiva como puntos fuertes en ambas prácticas.
 
+**Conclusiones**
+Basándonos en los resultados del cuestionario SUS y el Usability Review, podemos concluir lo siguiente:
 
-* Tareas realizadas 
-
-
-* Usability Report de Caso B
-* Template de usability.gob (https://www.usability.gov/how-to-and-tools/resources/templates/report-template-usability-test.html) 
-
-* Conclusiones
+- Ambos casos evaluados obtuvieron puntuaciones positivas en términos de usabilidad.
+- El caso A mostró una ligera ventaja en cuanto a la satisfacción del usuario.
+- Se identificaron áreas de mejora en el caso B a través del Usability Review.
+-Recomendamos implementar las mejoras sugeridas en el caso B para mejorar la experiencia del usuario.