Desenvolupament web i UX 2025

Teatre Nacional de Catalunya

Redisseny integral del Teatre Nacional de Catalunya amb Drupal: agenda dinàmica, fitxes d'espectacles i compra en 2-3 clics.

8 mesos 6 especialistes 2025 tnc.cat

Serveis

Desenvolupament Drupal
UX/UI Design
Accessibilitat WCAG AA
Optimització de rendiment
Arquitectura de continguts

Serveis relacionats

01El repte

El Teatre Nacional de Catalunya gestiona una agenda amb alta rotació editorial, pics de trànsit en campanyes i estrenes, i la necessitat crítica de guiar l'usuari cap a la compra d'entrades en 2-3 clics sense perdre's. L'equip editorial requeria publicació ràpida amb control de qualitat (rols, revisions, programació), compliment d'accessibilitat AA i rendiment estable en dispositius mòbils on es concentra la majoria del trànsit.

02La solució

Vam desenvolupar un redisseny UX centrat en tasques: navegació per agenda amb filtres intel·ligents, fitxes d'espectacles amb jerarquia visual clara (dates, repartiment, preus, CTA de compra) i crides a l'acció consistents en tot el recorregut. Vam implementar Drupal amb components reutilitzables, workflows editorials amb previsualització i control de versions, i una base de rendiment sòlida amb estratègia de caché, optimització de media, lazy loading i preparació per a CDN.

Stack tecnològic

Així està muntat

Front

Twig Plantilles del front
Tailwind CSS Sistema d'estils

Motor

Drupal 10 CMS estructurat

Dades

Varnish Cau HTTP
Redis Cau en memòria
Cloudflare CDN i seguretat

03Arquitectura

Com flueix una petició

Un editor publica o actualitza la fitxa d'un espectacle a Drupal, amb un flux de revisió i previsualització abans de sortir a producció
La petició d'un visitant passa per Cloudflare i per Varnish, que serveix la pàgina des de la memòria cau quan existeix
Si no hi ha memòria cau, Drupal construeix la fitxa amb els seus components reutilitzables (dates, repartiment, preus) i s'ajuda de Redis per a les consultes freqüents
El visitant filtra l'agenda i arriba a la fitxa de l'espectacle en 2-3 clics gràcies a la jerarquia visual del contingut i del CTA de compra
El CTA condueix a la compra d'entrades, amb lazy loading i assets optimitzats que mantenen el LCP baix fins i tot en pics de trànsit d'estrenes i campanyes

04Impacte mesurat

Resultats

-37% LCP mòbil
+18% Pàgines/sessió
100% WCAG AA
2.4s LCP (abans 3.8s)

Dades verificables

Mètriques en detall

Clics necessaris per arribar a la compra d'entrades des de la home: 2-3
Durada del redisseny integral de la plataforma (mesos): 8
Especialistes a l'equip del projecte: 6
Capes de memòria cau que sostenen els pics d'estrenes i campanyes (Cloudflare, Varnish, Redis): 3

Metodologia: Dades d'abast i execució del projecte (2025): la durada i l'equip surten del contracte; el recorregut de compra i les capes de memòria cau, de l'arquitectura desplegada. Les mètriques de rendiment i accessibilitat del redisseny (LCP, pàgines per sessió, WCAG AA) són a la secció de resultats d'aquest cas.

05El procés

El procés

Discovery

Auditoria UX del lloc actual, anàlisi de fluxos de compra i definició de KPIs
Arquitectura

Disseny de tipologies de contingut, taxonomies i workflows editorials
Disseny

UI/UX centrada en conversió i accessibilitat WCAG AA
Desenvolupament

Implementació Drupal amb components reutilitzables i testing continu
Optimització

Ajust de rendiment, caché i preparació per a pics de trànsit