Proyecto: Mis memorias
En este ejercicio desarrollamos un apartado para la página web del Museo Reina Sofía dedicado a una exposición de fotografías de guerra de un fotógrafo ficticio. El objetivo del proyecto fue simular una experiencia real de diseño web aplicada a un entorno cultural, trabajando tanto el diseño visual como la estructura de la página y la interacción del usuario.
Debido a que muchas imágenes disponibles en Internet tienen derechos de autor, se decidió crear un autor y una serie de fotografías completamente ficticias. Para ello utilizamos herramientas de inteligencia artificial que permitieron generar imágenes de forma legal y creativa. Esto nos permitió centrarnos en el desarrollo del diseño interactivo, el prototipado y la experiencia de usuario.
La propuesta se basa principalmente en el uso de medios digitales, como imágenes y vídeos, con el objetivo de reforzar la comunicación visual y crear una experiencia más inmersiva para el usuario.
Objetivos
Objetivos generales
- Diseñar un apartado interactivo para la web del Museo Reina Sofía que muestre una exposición digital de fotografías de guerra.
- Fomentar el trabajo en equipo y la planificación del proyecto.
- Aplicar los conocimientos aprendidos sobre diseño web interactivo y uso de medios multimedia.
- Crear una experiencia visual atractiva basada en el uso de imágenes en blanco y negro.
- Desarrollar un proyecto completo desde la idea inicial hasta el prototipo final.
Objetivos específicos
- Crear un fotógrafo ficticio y una exposición inventada para evitar problemas de derechos de autor.
- Generar las imágenes de la exposición mediante inteligencia artificial.
- Diseñar una buena experiencia de usuario.
- Integrar imágenes, vídeos y otros elementos multimedia dentro del diseño.
- Desarrollar un prototipo funcional en Figma.
- Cuidar la estética visual para conseguir una web coherente.
- Mejorar la experiencia de usuario a través de interacción y navegación intuitiva.
Metodología
Para organizar y desarrollar el proyecto utilizamos la metodología ágil Scrum, que nos permitió trabajar por fases y revisar el progreso de manera continua. En lugar de realizar todo el trabajo de una sola vez, dividimos el proceso en varios sprints, cada uno con objetivos concretos. Esto facilitó avanzar de forma más organizada y realizar mejoras progresivas a medida que el proyecto evolucionaba.
Sprint 1
Descubrimiento y análisis
En el primer sprint nos centramos en la fase de descubrimiento y análisis. Comenzamos creando un backlog, es decir, una lista de tareas que serviría como guía durante todo el proyecto.
A continuación realizamos un benchmark para analizar cómo otras páginas web presentan sus exposiciones digitales y así obtener referencias e ideas.
También llevamos a cabo entrevistas a stakeholders ficticios, en este caso al hijo del fotógrafo, con el objetivo de construir el contexto narrativo del proyecto. Finalmente identificamos el público objetivo y elaboramos un mapa de empatía que nos ayudó a comprender mejor las necesidades, motivaciones y expectativas de los usuarios.
Sprint 2
Definición e ideación
Durante el segundo sprint pasamos a la fase de definición e ideación. En esta etapa decidimos qué medios digitales formarían parte de la experiencia, como imágenes, vídeos y animaciones, que serían los elementos principales de la propuesta.
Además, desarrollamos los primeros wireframes, que son bocetos de baja fidelidad utilizados para definir la estructura de las pantallas y organizar los contenidos antes de comenzar el diseño visual definitivo..
Sprint 3
Fase de Diseño y Prototipado
Durante el tercer sprint entramos en la Fase de Diseño y Prototipado en Figma. Primero creamos un Design System mínimo donde definimos los estilos visuales: colores, tipografías, botones y demás elementos que se repetirían en toda la web. Después, construimos un prototipo funcional en Figma, añadiendo componentes y pequeñas microinteracciones para que el prototipo fuese más dinámico, teniendo en cuenta que se pareciera lo máximo posible a una web real.
Sprint 4
Fase de Testeo
Finalmente, fuera de clase realizamos la Fase de Testeo, en la que hicimos pruebas con 5 usuarios para ver si comprendían bien la web y si la navegación era cómoda. A partir de sus comentarios realizaamos propuestas de mejora y entregamos nuestro MVP .
Conclusión
El proyecto nos ha permitido entender todo el proceso de
diseño interactivo, desde investigar y conocer a los usuarios
hasta crear un prototipo completo en Figma. Una de las cosas
que más claras nos quedan es que investigar al principio es
clave. Gracias a conocer las necesidades reales de los usuarios
y ver qué hacían otras apps, pudimos diseñar algo que tuviera
sentido y estuviera bien justificado.
También vimos lo importante que es tener un buen sistema de
diseño. Nos permitió mantener una estética coherente, trabajar
más rápido y pensar en cómo podría crecer la app en el futuro.
Conseguimos que el prototipo fuera más dinámico gracias a las
interacciones, los componentes y la navegación.
Otra cosa que aprendimos es que la primera versión nunca es
la definitiva. Los cambios y mejoras después del testeo fueron
esenciales, escuchar a los usuarios y adaptar el diseño fue una
parte fundamental del proceso.
Finalmente, creemos que hemos creado una propuesta sólida,
coherente y con potencial para seguir desarrollándose.
Obras
“La voz de la gente no cambia nunca, como tampoco la expresión de su mirada.
Michel Houellebecq
En medio del derrumbamiento físico generalizado en que se resume la vejez, la voz y la mirada aportan el testimonio dolorosamente irrecusable de la persistencia del carácter, las aspiraciones, los deseos, de todo lo que constituye una personalidad humana.”
Mockup del Proyecto
Video del Proyecto
Imágenes del Proyecto
