Project Overview
The National Heritage Service of Chile (SNPC, formerly DIBAM — Libraries, Archives and Museums Bureau) needed to unify, modernize, and strengthen its internet presence. The institution manages a cluster of websites spanning museums, libraries, archives, monuments, indigenous heritage, and intellectual property — each with inconsistent visual identities and no shared design standards.
Our team followed a Design Thinking methodology across 5 phases to deliver a functional prototype, comprehensive information architecture, web style guide, and user-tested templates for the entire website cluster.
The Challenge
- Fragmented digital identity: Multiple websites with inconsistent logos, colors, and navigation patterns
- Institutional transition: The name change from DIBAM to SNPC created identity confusion — the new entity's visual identity was undefined
- No design standards: No web style guide existed. The sites were described internally as having "deep design problems"
- Color chaos: A 3-color system for museums/libraries/archives had "degenerated" into incoherent use
- Autonomy vs. coherence: Individual units (e.g., National Museum of Fine Arts) wanted their own identity while the institution needed overall coherence
Process — Design Thinking (5 Phases)
Phase 1: Empathize — Investigation & Diagnosis
- 2-3 stakeholder workshops with project leaders
- 5 key informant interviews with front-line staff
- 6-8 user interviews with actual website users
- 10 benchmark studies (Louvre, Museo del Prado, and comparable institutions)
- Heuristic evaluation using Tognazzini's principles
Phase 2: Define — Digital Strategy
- Multi-dimensional strategy document with technical, operational, graphic, and economic components
- Customer Journey Maps
- Short, medium, and long-term product lifecycle vision
Phase 3: Ideate — Design Foundations
- Information Architecture workshops with card sorting methodology
- SEO consultancy applied to design
- Entity, interface, and navigation design
- Functionality design documented in natural language and Gherkin
Phase 4: Build — Prototype Construction
- Mockups from IA specifications: 1 main portal, 8 site type homepages, 4 index templates, and specialized pages
- Functional prototypes built for usability testing
- Atomic Design system using Pattern Lab with Twig export to Drupal 8
Phase 5: Test — User Testing
- 12 users testing across 4 segments (3 users per segment)
- Maximum 8 tasks across 3 platforms (Desktop, iOS, Android)
- Video-recorded sessions with task completion matrices
- Measured using SEQ and SUPR-Q metrics
Information Architecture — 15 Iterations
The IA went through 15 documented iterations (v2 to v15) created in OmniGraffle, with separate Garrett diagrams for:
- Main Portal (SNPC): Services, Museums, Libraries, Archives, Monuments, Indigenous Heritage, Intangible Heritage, Intellectual Property
- Libraries: National, Regional, Public libraries with services like Digital Collections, Courses, and Workshops
- Museums: Collections, exhibitions, and museum-specific content structures
- Archives: Document search, certifications, and catalogs
A color-coding system tracked approval status: green (confirmed), orange (pending), and specialized colors for backend/taxonomy elements. Client feedback was actively incorporated with documented comments on wireframes.
Web Style Guide
The style guide (29 pages, updated in 2023) established standards for the entire website cluster:
- 4 header levels for different institutional units (main portal, entities with own brand, sub-directorates, mini-sites)
- Typography: Open Sans family via Google Fonts
- Minimalist color philosophy: Content as protagonist, with neutral primary palette and institutional accent colors
- Component library: Buttons, forms, alerts, tags, navigation menus, and icons based on FontAwesome
- Referenced the U.S. Web Design System and Chile's "Government Digital Interface Design Guide"
Technical Approach
- Mobile First responsive design
- WCAG 2.1 Level AA accessibility compliance (legal obligation for Chilean government sites)
- Atomic Design System via Pattern Lab with Twig templating for Drupal 8
- SASS preprocessor with SMACSS architecture
- SEO-optimized semantic HTML
Impact
The project delivered a unified design framework for Chile's entire national heritage digital presence — establishing coherent identity standards while respecting the autonomy of individual institutions. The style guide and Atomic Design system enabled the creation and migration of a cluster of websites under a shared design language, with prototypes validated through real user testing across multiple platforms and segments.
