Desarrollo Web & UX 2025

Teatre Nacional de Catalunya

Rediseño integral de la plataforma digital del Teatre Nacional de Catalunya con Drupal: agenda dinámica, fichas de espectáculos optimizadas y compra en 2-3 clics.

8 meses 6 especialistas 2025 tnc.cat

Servicios

Desarrollo Drupal
UX/UI Design
Accesibilidad WCAG AA
Optimización de Rendimiento
Arquitectura de Contenidos

Servicios relacionados

01El reto

El Teatre Nacional de Catalunya gestiona una agenda con alta rotación editorial, picos de tráfico en campañas y estrenos, y la necesidad crítica de guiar al usuario hacia la compra de entradas en 2-3 clics sin perderse en la navegación. El equipo editorial requería publicación rápida con control de calidad (roles, revisiones, programación), cumplimiento de accesibilidad AA y rendimiento estable en dispositivos móviles donde se concentra la mayoría del tráfico.

02La solución

Desarrollamos un rediseño UX centrado en tareas: navegación por agenda con filtros inteligentes, fichas de espectáculos con jerarquía visual clara (fechas, reparto, precios, CTA de compra) y llamadas a la acción consistentes en todo el recorrido. Implementamos Drupal con componentes reutilizables, workflows editoriales con previsualización y control de versiones, y una base de rendimiento sólida con estrategia de caché, optimización de media, lazy loading y preparación para CDN.

Stack tecnológico

Así está montado

Front

Twig Plantillas del front
Tailwind CSS Sistema de estilos

Motor

Drupal 10 CMS estructurado

Datos

Varnish Caché HTTP
Redis Caché en memoria
Cloudflare CDN y seguridad

03Arquitectura

Cómo fluye una petición

Un editor publica o actualiza la ficha de un espectáculo en Drupal, con flujo de revisión y previsualización antes de salir a producción
La petición de un visitante pasa por Cloudflare y por Varnish, que sirve la página desde caché cuando existe
Si no hay caché, Drupal construye la ficha con sus componentes reutilizables (fechas, reparto, precios) apoyándose en Redis para las consultas frecuentes
El visitante filtra la agenda y llega a la ficha del espectáculo en 2-3 clics gracias a la jerarquía visual del contenido y del CTA de compra
El CTA dirige hacia la compra de entradas, con lazy loading y assets optimizados que mantienen el LCP bajo incluso en picos de tráfico de estrenos y campañas

04Impacto medido

Resultados

-37% LCP mobile
+18% Páginas/sesión
100% WCAG AA
2.4s LCP (antes 3.8s)

Datos verificables

Métricas en detalle

Clics necesarios para llegar a la compra de entradas desde la home: 2-3
Duración del rediseño integral de la plataforma (meses): 8
Especialistas en el equipo del proyecto: 6
Capas de caché que sostienen los picos de estrenos y campañas (Cloudflare, Varnish, Redis): 3

Metodología: Datos de alcance y ejecución del proyecto (2025): la duración y el equipo salen del contrato; el recorrido de compra y las capas de caché, de la arquitectura desplegada. Las métricas de rendimiento y accesibilidad del rediseño (LCP, páginas por sesión, WCAG AA) están en la sección de resultados de este caso.

05El proceso

El proceso

Discovery

Auditoría UX del sitio actual, análisis de flujos de compra y definición de KPIs
Arquitectura

Diseño de tipologías de contenido, taxonomías y workflows editoriales
Diseño

UI/UX centrada en conversión y accesibilidad WCAG AA
Desarrollo

Implementación Drupal con componentes reutilizables y testing continuo
Optimización

Ajuste de rendimiento, caché y preparación para picos de tráfico