El encargo

El MNAC busca desarrollar un entorno digital que permita a los usuarios explorar obras de arte en línea, comprender su contexto histórico y profundizar en el conocimiento artístico mediante una experiencia inclusiva apoyada en inteligencia artificial. Su objetivo es crear un espacio dirigido a estudiantes y aficionados al arte que quieran aprender más desde un enfoque pedagógico, centralizando en una única plataforma la posibilidad de resolver dudas sobre la Historia del Arte, tomando como base la colección del MNAC.

Esta plataforma no busca reemplazar la página web institucional ni el catálogo digital, sino que funcionará como un nuevo soporte educativo, divulgativo e interactivo, vinculado a la web actual y diseñado para un público amplio con interés en la historia del arte.

El proceso

Durante las diferentes etapas del proyecto se identificaron 4 escenarios en los que nos basaríamos para realizar el resto de tareas:

• Encontrar información sobre el papel de la mujer en el arte catalán
• Encontrar material suficiente para poder analizar las diferencias entre arte románico y gótico catalán
• Preparar una evaluación sobre estilos artísticos en Cataluña del románico al modernismo
• Investigar si modernismo catalán ha tenido impacto en la arquitectura europea

Una vez teníamos identificados los diferentes escenarios, se realizó un inventario de contenido el cual se sometió a un cardsorting. Este nos ayudó a definir nuestra arquitectura.

Arquitectura definida en el R3

Además de buscar una arquitectura que nos facilitara acceder a la información de manera rápida con pocos niveles y subniveles, como podemos ver  en toda la estructura como un ente presente y que aumenta o vitamina cada una de las secciones, tenemos el «Asistente IA» con capacidad de resolver dudas, generar resúmenes, comparar obras o crear material didáctico. Siendo esta la gran apuesta de valor que dará una capa superior a la experiencia de usuario.

Prototipado

Sketch

Con los diferentes escenarios que hemos planteado y con la arquitectura que acabamos de ver, se han realizado los primeros pasos de aterrizar las ideas en algo tangible. Las primeras interfaces, para ello se ha utilizado la técnica de Sketching que nos permite pensar de manera visual con gran velocidad, sin herramientas específicas, tan solo tu mente, un lápiz y un papel.

Sketchings realizados durante la actividad

Como vemos no son dibujos de gran detalle ni tan solo aparece el texto, tan solo cajas, flechas y algún texto que nos ayude a entender que está pasando. Con esto intentamos sacar los primeros layouts, estructuras, interacciones que más tarde se traducirán en prototipos de mayor iconicidad. Vayamos algo más al detalle de algunos de los escenarios que teníamos definidos.

Encontrar información sobre el papel de la mujer en el arte catalán

Desde la Home hacemos clic en el icono de búsqueda. Esto despliega una pantalla completa con tres elementos principales:

• Búsqueda por texto, basada en lenguaje natural, tal como se definió en actividades anteriores.
• Historial de búsquedas recientes y populares, situado en la parte inferior, para facilitar accesos rápidos.
• Una zona central con filtros en formato “tags”. Al seleccionar un tag, este se activa y los resultados mostrados debajo se actualizan automáticamente.
• Este tipo de interacción, basada en filtros visibles e inmediatos, permite una experiencia ágil, directa y visualmente clara. El usuario obtiene feedback en tiempo real, lo que reduce la incertidumbre y mejora la toma de decisiones.

Encontrar material suficiente para poder analizar las diferencias entre arte románico y gótico catalán
Preparar una evaluación sobre estilos artísticos en Cataluña del románico al modernismo
Investigar si modernismo catalán ha tenido impacto en la arquitectura europea

Hemos unificado estos tres escenarios en un único sketch porque comparten una misma estructura de interacción basada en navegación por categorías.
Desde la Home, el usuario puede acceder al menú mediante el icono de las tres rayas (burger menu). Al pulsarlo:

• Se despliega un panel de navegación a pantalla completa, con todas las secciones principales definidas en la arquitectura de información.
• Cada categoría padre puede expandirse y colapsarse, permitiendo visualizar únicamente la sección en la que el usuario quiere profundizar.
• Tras seleccionar la categoría deseada (por ejemplo “Movimientos artísticos” o “Recursos educativos”), accedemos a la pantalla correspondiente.
• Como alternativa, el usuario puede llegar a los mismos contenidos a través de los banners destacados en la Home.

Prototipado interactivo

Antes de nada se han marcado los dos elementos estructurales que nos acompañarán todo el rato mientras navegamos: Menú y asistente.

A diferencia del paso anterior como podemos ver aquí la iconicidad es algo más alta pero sin llegar a ser el diseño final, no obstante esto nos ayuda a empezar a trabajar la jerarquía de la información así como la simulación de interacciones.

Como habéis podido ver en el video donde simulamos a un usuario interactuando, se ha intentado no tener excesivos layouts diferentes para cada pantalla pero sí los justos reconocibles para cada sección, de esta manera reducimos la carga cognitiva del usuario durante su navegación. Para mí era importante mantener esa simplicidad que buscábamos desde la arquitectura hasta la interfaz.

Además, el valor del asistente como ya hemos comentado anteriormente era muy importante, el hecho de tener el acceso desde el fab en cualquier momento y que sea como este profesor o amigo a quien preguntar de manera inmediata y tan accesible ha sido clave en el diseño de la UI. En mi opinión, queda integrado y poco invasivo.

¿Cuál es el objetivo que perseguimos? A partir de este prototipo interactivo, podemos ofrecer al usuario una idea clara de cómo funciona la app, sus pantallas, tipo e interacciones. Este primer enfoque permite obtener feedback inicial y evaluar si estamos en el camino correcto. Añun y no siendo el producto final, es un inicio testeable de gran valor al proceso.

A partir de aquí, podríamos avanzar en el branding, crear pantallas de mayor nivel visual, planificar el desarrollo, generar contenidos y continuar iterando para mejorar lo que ya hemos diseñado.

MNAC Navigation system

De la Taxonomía al Código: Rediseñando la experiencia de acceso al arte.

1. EL DESAFÍO: SOFISTICACIÓN VS. USABILIDAD

El Problema: El MNAC cuenta con una colección digital masiva y heterogénea. La estructura original presentaba una alta carga cognitiva: intentar mostrarlo todo a la vez generaba parálisis de decisión en el usuario.

El Reto de Arquitectura: ¿Cómo diseñar un sistema de navegación que permita acceder a más de 1.000 años de historia del arte en una pantalla móvil, atendiendo simultáneamente a dos modelos mentales opuestos: el rigor académico del Docente y la curiosidad exploratoria del Estudiante?

2. FASE DE DESCUBRIMIENTO: EL HALLAZGO (THE INSIGHT

Durante la fase de Organización y Etiquetado, realizamos un inventario de contenidos y pruebas de ordenamiento (Card Sorting). Esto nos llevó a dos hallazgos críticos que dictaron el diseño:

1. La Regla de los 3 Niveles: Descubrimos que para llegar a un contenido útil (ej. «Pintura Gótica Catalana»), el usuario debe atravesar obligatoriamente tres capas de profundidad: Colección > Periodo > Estilo. Una barra de navegación tradicional (Bottom Bar) solo soporta un nivel plano, por lo que era estructuralmente inviable.

2. Fricción de Contextos: Identificamos que mezclar herramientas de gestión («Mis Listas») con la exploración de obras interrumpía el flujo de lectura. El usuario necesitaba «cambiar de sombrero» (de espectador a gestor) sin cambiar de página.

3. ESTRATEGIA DE DISEÑO: ARQUITECTURA ESPACIAL

Basándonos en los hallazgos anteriores, definimos una estrategia de Navegación Dual y Progresiva:

Decisión 1: Patrón de «Drawer» (Cajón Lateral) Para resolver la «Regla de los 3 Niveles», descartamos la navegación horizontal y optamos por menús laterales.

• Por qué: El espacio vertical es infinito. Esto nos permitió implementar Acordeones (Listas desplegables), donde el usuario puede desplegar la taxonomía completa del museo sin perder nunca el contexto visual de la Home.

Decisión 2: Segregación de Modelos Mentales (Izquierda vs. Derecha) Para resolver la «Fricción de Contextos», dividimos la interfaz en dos hemisferios:

• Menú Izquierdo (Público): Dedicado exclusivamente a la exploración del arte (Taxonomía).

• Menú Derecho (Privado): Dedicado exclusivamente al usuario (Herramientas).

• Resultado: Esta decisión arquitectónica permite a un docente navegar el catálogo (Izquierda) mientras gestiona sus listas de clase (Derecha) simultáneamente.

4. MATERIALIZACIÓN: PROTOTIPADO Y VALIDACIÓN

Llevamos la estrategia a la realidad mediante iteraciones de diseño:

• Wireframing (Validación de Flujos): Validamos con usuarios (Arquetipos Laura y Carlos) que el uso de acordeones reducía el tiempo de búsqueda. Confirmamos que segregar las herramientas de «Accesibilidad» y «Ayuda IA» en zonas fijas aumentaba su uso.

• High-Fidelity (Diseño Visual): Aplicamos la identidad del MNAC (tipografías editoriales, modo oscuro) para elevar la percepción de valor, transformando un «árbol de contenidos» en una experiencia inmersiva.

  

5. INNOVACIÓN TECNOLÓGICA:
PROTOTIPADO CON AI

La validación de una «Arquitectura Adaptativa» (que cambia según el usuario) tiene una limitación en las herramientas de diseño tradicionales: Figma es estático, pero la experiencia que diseñé es dinámica.

Para superar esta barrera y entregar un producto de alta calidad, decidí integrar Google AI Studio en mi flujo de trabajo, utilizándolo como un acelerador de desarrollo para construir un MVP funcional en React.

El Proceso: De la Arquitectura al Código En lugar de programar desde cero, utilicé Google AI Studio para «traducir» mis diagramas de flujo y árboles de contenido (JSON) en componentes de interfaz complejos.

• Input: Le proporcioné a la IA la lógica de negocio definida en la fase de investigación (Reglas de roles: Laura vs. Carlos).

• Output: Obtuve una estructura de código limpia y modular (NavigationOverlays.tsx) capaz de gestionar estados lógicos que hubieran tardado semanas en programarse manualmente.

Resultado: Una Interfaz «Viva» Gracias a esta sinergia entre Diseño UX e Inteligencia Artificial, logré:

1. Validar la Lógica en Tiempo Real: No es una simulación; el prototipo realmente «piensa». Si entras como Docente, el sistema bloquea y habilita rutas específicas usando sessionStorage.

2. Calidad de Producción: El uso de IA me permitió iterar rápidamente sobre estilos (Tailwind CSS) y animaciones, logrando un acabado visual (Look & Feel) muy superior al de un prototipo académico estándar.

MVP Prototipo Link

6. CONCLUSIÓN

Este proyecto comenzó con la intención de organizar un catálogo y concluyó con la creación de un Ecosistema Digital Vivo. La transformación del inventario estático del MNAC en una Single Page Application (SPA) funcional en React ha validado que la tecnología no es solo el soporte, sino parte de la solución de diseño.

Key Insights (Aprendizajes Clave)

1. La segregación reduce la carga cognitiva Descubrí que el problema no era la «cantidad» de obras, sino la mezcla de contextos. Al implementar la Navegación Dual (Izquierda para el Arte, Derecha para el Usuario), validamos que es posible ofrecer una profundidad enciclopédica (3 niveles) sin abrumar al usuario, siempre que las herramientas de gestión no interfieran con la exploración visual.

2. El prototipo estático tiene un techo de cristal Diseñar sistemas adaptativos (que cambian según si eres Laura o Carlos) en herramientas estáticas como Figma es insuficiente. Dar el salto al código (React + Google AI Studio) fue necesario para validar la «lógica de negocio». Aprendí que, en productos complejos, el código es la única herramienta de diseño honesta: o funciona la lógica, o no funciona.

3. La Accesibilidad es una decisión Arquitectónica, no estética Integrar el «Selector de Lectura Fácil» y el «Chatbot IA» en la estructura principal demostró que la inclusión no es una feature que se añade al final. Si la arquitectura no contempla la diversidad cognitiva desde la base, el diseño visual no puede arreglarlo.

El rediseño del ecosistema MNAC demuestra que la Arquitectura de Información es la disciplina invisible que sostiene la experiencia. Hemos pasado de un modelo de «búsqueda en pajar» a un modelo de «descubrimiento asistido», donde la interfaz se anticipa a la intención del usuario. Este proyecto reafirma mi visión del Product Designer moderno: un perfil híbrido capaz de orquestar estrategia, diseño y tecnología (AI) para resolver problemas humanos complejos.

Arquitectura de la Información – Prototipo y propuesta de valor

Este proyecto consiste en el diseño de una aplicación móvil para el MNAC, orientada a facilitar el acceso a contenidos culturales y educativos mediante una arquitectura de la información clara y estructurada. La propuesta se centra en mejorar la experiencia de usuarios que buscan información específica para el estudio o el aprendizaje autónomo.

Usuario objetivo
Estudiantes como Carlos, que necesitan encontrar información clara y fiable sobre movimientos artísticos y autores concretos para preparar exámenes o trabajos académicos.

Problema / necesidad
Carlos necesita acceder rápidamente a información relevante sobre Picasso y el Cubismo, sin perderse entre contenidos dispersos o excesivamente complejos, y con una estructura que le ayude a comprender el tema de forma ordenada.

Solución propuesta
La aplicación MNAC ofrece itinerarios temáticos y fichas de contenido organizadas, que permiten al usuario explorar conceptos artísticos mediante recorridos guiados, combinando texto, imágenes y recursos complementarios.

Valor diferencial
La principal aportación de la propuesta es la organización del contenido claros, pensados desde las necesidades del usuario, reduciendo la carga cognitiva y facilitando el aprendizaje a través de una navegación intuitiva y coherente.

Flujo de navegación analizado: Búsqueda de información sobre “Picasso y el Cubismo”

El flujo seleccionado representa una de las acciones principales del usuario dentro de la aplicación: la búsqueda de información específica para el estudio.

Descripción del flujo

1. El usuario accede a la aplicación MNAC desde la pantalla inicial.

2. Desde el menú principal, selecciona la opción Exploración.

3. Dentro de Exploración, accede a la sección Itinerarios.

4. En la pantalla de itinerarios, busca y selecciona su itinerario deseado “Picasso y el Cubismo”.

5. El usuario accede a la ficha del itinerario, donde encuentra contenido estructurado: introducción, recursos visuales y texto explicativo.

6. Finalmente, puede guardar la ficha para consultarla más adelante. Incluso realizar actividades relacionadas con este tema para afianzar aun mas el contenido visto.

Enlace del prototipo

Justificación del flujo
Este flujo se ha diseñado para que el usuario llegue a la información deseada en pocos pasos, manteniendo siempre una jerarquía clara y una relación lógica entre pantallas. La navegación responde a un modelo mental sencillo, alineado con el objetivo principal del usuario: aprender y repasar contenidos de forma eficiente.

En esta fase del proyecto se realiza un análisis comparativo de referentes digitales que resuelven flujos de navegación similares a los planteados en la propuesta del Museu Nacional d’Art de Catalunya (MNAC).

Para ello, se han seleccionado dos productos digitales de referencia: Google Arts & Culture y la web del museo Tate, ambas plataformas vinculadas a la difusión cultural y educativa del arte.

Asimismo, se han definido flujos de navegación específicos para dos perfiles de usuario: un estudiante que busca información para preparar un examen y una docente que necesita recursos visuales para el aula. A partir de estos flujos, se ha llevado a cabo un análisis crítico que permite identificar aciertos, limitaciones y oportunidades de mejora relevantes para el desarrollo del proyecto del MNAC.

Diagramas de Flujo y presentación

Criterio de análisis

El análisis de los flujos de navegación se ha realizado siguiendo un enfoque de benchmarking, comparando cómo Google Arts & Culture y la web del Tate resuelven recorridos similares a los planteados en el proyecto del MNAC. El estudio se centra en flujos reales de uso, definidos a partir de dos perfiles concretos: Carlos, estudiante que busca información para preparar un examen, y Laura, docente que necesita recursos visuales para el aula.

Para garantizar una comparación sistemática, se han definido una serie de criterios comunes, aplicados de la misma manera a ambas plataformas. Estos criterios se han seleccionado en función de los objetivos educativos del proyecto y de la experiencia de navegación del usuario:

• Claridad del punto de entrada: facilidad con la que el usuario identifica desde el inicio cómo comenzar su recorrido.

• Estructura del flujo: grado en que la navegación está guiada y organizada, evitando recorridos confusos o excesivamente abiertos.

• Acompañamiento al usuario: presencia de elementos que orienten, expliquen o apoyen al usuario durante el recorrido.

• Adecuación al contexto educativo: capacidad del sistema para responder a necesidades propias de estudiantes y docentes.

• Síntesis y cierre del aprendizaje: existencia de mecanismos que ayuden a consolidar, resumir o cerrar el proceso de aprendizaje.

Estos criterios se han recogido en una tabla comparativa que permite visualizar de forma clara el grado de cumplimiento de cada plataforma.

Resultados del análisis

Los resultados del benchmarking muestran diferencias claras entre Google Arts & Culture y la web del Tate en relación con los criterios definidos, así como algunas carencias comunes a ambas plataformas.

En cuanto a la claridad del punto de entrada, ambas plataformas cumplen el criterio. Tanto Google Arts & Culture como el Tate ofrecen accesos reconocibles que permiten al usuario iniciar la navegación sin dificultad, ya sea a través del buscador o de secciones temáticas claramente identificadas.

Sin embargo, al analizar la estructura del flujo, se observan diferencias significativas. Google Arts & Culture presenta una navegación abierta y exploratoria que, si bien favorece el descubrimiento, carece de una estructura clara orientada a objetivos educativos. El usuario debe construir por sí mismo el recorrido, lo que puede generar dispersión. En cambio, la web del Tate ofrece flujos más organizados y jerarquizados, facilitando una progresión más comprensible y coherente.

En relación con el acompañamiento al usuario, Google Arts & Culture muestra una carencia notable. La plataforma ofrece abundante contenido, pero apenas guía al usuario en su recorrido ni le ayuda a interpretar o estructurar la información. El Tate, por su parte, sí proporciona un mayor acompañamiento mediante explicaciones contextualizadas y un lenguaje más pedagógico, lo que mejora la experiencia de navegación en contextos educativos.

Respecto a la adecuación al contexto educativo, los resultados refuerzan esta diferencia. Google Arts & Culture funciona principalmente como una herramienta de exploración e inspiración visual, pero no está específicamente orientada a estudiantes o docentes. La web del Tate, en cambio, responde mejor a este contexto, ofreciendo contenidos pensados para el aprendizaje y la enseñanza, aunque sin llegar a cubrir todas las necesidades prácticas del profesorado.

Finalmente, en el criterio de síntesis y cierre del aprendizaje, ninguna de las dos plataformas cumple de forma satisfactoria. Tanto Google Arts & Culture como el Tate carecen de herramientas que permitan consolidar lo aprendido, generar resúmenes, guardar recorridos personalizados o validar la comprensión del usuario. El proceso de aprendizaje queda abierto y depende en gran medida del esfuerzo externo del usuario.

En esta segunda práctica debíamos realizar 4 escenarios y sus respectivos journeys. El objetivo es comprender cómo los usuarios interactúan con la futura plataforma educativa, identificando sus necesidades reales y oportunidades de diseño basándonos en los user personas identificados.

Mediante esta práctica, se busca definir una experiencia digital más intuitiva, visual y contextualizada, que facilite tanto el aprendizaje como la enseñanza del arte catalán.

A continuación os comparto uno de los escenarios que se han trabajado. El motivo por el que he escogido este no es nada especial; simplemente me recuerda a cuando yo estudiaba historia del arte y muchas veces intenté buscar correlación entre movimientos e influencias. Me ha sido más fácil empatizar con el estudiante seguramente que con el profesorado.

Escenario

Descripción del escenario

Carlos prepara un trabajo sobre la proyección internacional del modernismo catalán. Tras revisar fuentes teóricas, se da cuenta de que le faltan ejemplos visuales para entender cómo las ideas de Gaudí o Domènech i Montaner se relacionan con movimientos como el art nouveau. Necesita encontrar material contextualizado y comparativo que le ayude a desarrollar su análisis.

Objetivo principal del escenario:

Investigar si el modernismo catalán ha tenido impacto en la arquitectura europea.

User Persona – Carlos

• Perfil: Estudiante universitario de Historia del Arte.
• Edad: 20 años.
• Objetivo: Quiere aprender historia del arte de forma clara y visual sin perder tiempo en buscadores de información dispersos.
• Necesidades: Contenidos claros, recorridos temáticos, conectar conceptos y estilos de arte…que le permitan aprender más y mejor.

User journey

Insight

Aunque los insights de la actividad se realizaron de manera conjunta y se evaluaron de forma transversal en los cuatro escenarios, en este caso podríamos destacar lo siguiente:

• Cuando el estudiante tiene dudas, contar con un asistente especializado al que acudir con preguntas e hipótesis y mantener un diálogo riguroso ayuda a interpretar y adquirir el conocimiento de manera natural.
• Las líneas temporales que indican puntos relevantes junto con sus influencias proporcionan una ayuda visual esquemática y fácil de absorber.
• Un mapa físico que muestre cómo un movimiento se expande, similar a la expansión de un imperio, permite salir del marco abstracto y facilita comprender de manera más tangible cómo sucedieron los procesos históricos.
• Herramientas que ayuden a comparar diferencias y similitudes que pueden pasar desapercibidas al estudiante son de gran utilidad.