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.

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.