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.