Descripción General
El Servicio Nacional del Patrimonio Cultural de Chile (SNPC, anteriormente DIBAM — Dirección de Bibliotecas, Archivos y Museos) necesitaba unificar, modernizar y fortalecer su presencia en internet. La institución gestiona un clúster de sitios web que abarcan museos, bibliotecas, archivos, monumentos, patrimonio indígena y propiedad intelectual — cada uno con identidades visuales inconsistentes y sin estándares de diseño compartidos.
Nuestro equipo siguió una metodología de Design Thinking en 5 fases para entregar un prototipo funcional, arquitectura de información integral, guía de estilos web y plantillas testeadas con usuarios para todo el clúster de sitios.
El Desafío
- Identidad digital fragmentada: Múltiples sitios web con logos, colores y patrones de navegación inconsistentes
- Transición institucional: El cambio de nombre de DIBAM a SNPC generó confusión de identidad — la identidad visual de la nueva entidad estaba indefinida
- Sin estándares de diseño: No existía guía de estilos web. Los sitios eran descritos internamente como teniendo "problemas profundos de diseño"
- Caos cromático: Un sistema de 3 colores para museos/bibliotecas/archivos se había "degenerado" en uso incoherente
- Autonomía vs. coherencia: Unidades individuales (ej. Museo Nacional de Bellas Artes) querían su propia identidad mientras la institución necesitaba coherencia general
Proceso — Design Thinking (5 Fases)
Fase 1: Empatizar — Investigación y Diagnóstico
- 2-3 talleres con stakeholders y líderes de proyecto
- 5 entrevistas a informantes clave con personal de primera línea
- 6-8 entrevistas a usuarios reales del sitio web
- 10 estudios de benchmark (Louvre, Museo del Prado e instituciones comparables)
- Evaluación heurística usando principios de Tognazzini
Fase 2: Definir — Estrategia Digital
- Documento de estrategia multidimensional con componentes técnicos, operacionales, gráficos y económicos
- Customer Journey Maps
- Visión de ciclo de vida del producto a corto, mediano y largo plazo
Fase 3: Idear — Fundamentos de Diseño
- Talleres de Arquitectura de Información con metodología de card sorting
- Consultoría SEO aplicada al diseño
- Diseño de entidades, interfaz y navegación
- Diseño funcional documentado en lenguaje natural y Gherkin
Fase 4: Construir — Prototipado
- Mockups desde especificaciones de AI: 1 portal principal, 8 homepages por tipo de sitio, 4 plantillas de índice y páginas especializadas
- Prototipos funcionales construidos para pruebas de usabilidad
- Sistema de Atomic Design usando Pattern Lab con exportación Twig a Drupal 8
Fase 5: Testear — Pruebas con Usuarios
- 12 usuarios probando en 4 segmentos (3 usuarios por segmento)
- Máximo 8 tareas en 3 plataformas (Escritorio, iOS, Android)
- Sesiones grabadas en video con matrices de completación de tareas
- Medición usando métricas SEQ y SUPR-Q
Arquitectura de Información — 15 Iteraciones
La AI pasó por 15 iteraciones documentadas (v2 a v15) creadas en OmniGraffle, con diagramas Garrett separados para:
- Portal Principal (SNPC): Servicios, Museos, Bibliotecas, Archivos, Monumentos, Pueblos Originarios, Patrimonio Inmaterial, Propiedad Intelectual
- Bibliotecas: Nacionales, Regionales, Públicas con servicios como Colecciones Digitales, Cursos y Talleres
- Museos: Colecciones, exposiciones y estructuras de contenido específicas
- Archivos: Búsqueda de documentos, certificaciones y catálogos
Un sistema de codificación por colores rastreó el estado de aprobación: verde (confirmado), naranja (pendiente), y colores especializados para elementos backend/taxonomía. La retroalimentación del cliente se incorporó activamente con comentarios documentados en wireframes.
Guía de Estilos Web
La guía de estilos (29 páginas, actualizada en 2023) estableció estándares para todo el clúster de sitios:
- 4 niveles de encabezado para diferentes unidades institucionales (portal principal, entidades con marca propia, subdirecciones, mini-sitios)
- Tipografía: Familia Open Sans vía Google Fonts
- Filosofía cromática minimalista: Contenido como protagonista, con paleta primaria neutra y colores institucionales de acento
- Biblioteca de componentes: Botones, formularios, alertas, tags, menús de navegación e iconos basados en FontAwesome
- Referencia al U.S. Web Design System y la "Guía de Diseño de Interfaces Web Institucional" del Gobierno de Chile
Enfoque Técnico
- Mobile First diseño responsive
- WCAG 2.1 Nivel AA cumplimiento de accesibilidad (obligación legal para sitios gubernamentales chilenos)
- Sistema Atomic Design vía Pattern Lab con templating Twig para Drupal 8
- SASS preprocesador con arquitectura SMACSS
- HTML semántico optimizado para SEO
Impacto
El proyecto entregó un marco de diseño unificado para toda la presencia digital del patrimonio cultural nacional de Chile — estableciendo estándares de identidad coherentes respetando la autonomía de las instituciones individuales. La guía de estilos y el sistema de Atomic Design habilitaron la creación y migración de un clúster de sitios web bajo un lenguaje de diseño compartido, con prototipos validados mediante pruebas con usuarios reales en múltiples plataformas y segmentos.
