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.