Webontwikkeling & UX 2025

Teatre Nacional de Catalunya

Herontwerp van Teatre Nacional de Catalunya met Drupal: dynamische agenda, geoptimaliseerde showpagina's en checkout in 2-3 klikken.

8 maanden 6 specialisten 2025 tnc.cat

Diensten

Drupal-ontwikkeling
UX/UI Design
WCAG AA-toegankelijkheid
Performance-optimalisatie
Contentarchitectuur

Gerelateerde diensten

01De uitdaging

Het Teatre Nacional de Catalunya beheert een agenda met hoge redactionele rotatie, verkeerspieken bij campagnes en premières, en de kritieke noodzaak om gebruikers in 2-3 klikken naar ticketaankoop te leiden. Het redactieteam had snelle publicatie met kwaliteitscontrole nodig, AA-toegankelijkheid en stabiele prestaties op mobiel.

02De oplossing

We ontwikkelden een taakgericht UX-herontwerp: agendanavigatie met slimme filters, showpagina's met duidelijke visuele hiërarchie en consistente call-to-actions. We implementeerden Drupal met herbruikbare componenten, redactionele workflows en een solide performancebasis met cachestrategie en CDN-voorbereiding.

Tech stack

Zo is het gebouwd

Frontend

Twig Front-end templates
Tailwind CSS Stylingsysteem

Engine

Drupal 10 Gestructureerd CMS

Data

Varnish HTTP-cache
Redis In-memory cache
Cloudflare CDN & beveiliging

03Architectuur

Hoe een verzoek verloopt

Een redacteur publiceert of werkt de pagina van een voorstelling bij in Drupal, met een review- en previewflow voordat deze live gaat
Het verzoek van een bezoeker gaat via Cloudflare en vervolgens Varnish, dat de pagina vanuit de cache serveert wanneer die beschikbaar is
Is er geen cache, dan bouwt Drupal de pagina op met zijn herbruikbare componenten (data, cast, prijzen), waarbij Redis wordt gebruikt voor veelvoorkomende query's
De bezoeker filtert de agenda en bereikt de pagina van de voorstelling in 2-3 klikken dankzij de visuele hiërarchie van de content en de aankoop-CTA
De CTA leidt naar de ticketaankoop, met lazy loading en geoptimaliseerde assets die de LCP laag houden, zelfs bij verkeerspieken rond premières en campagnes

04Gemeten impact

Resultaten

-37% LCP mobiel
+18% Pagina's/sessie
100% WCAG AA
2.4s LCP (voorheen 3,8s)

Verifieerbare gegevens

Metrieken in detail

Benodigde klikken om vanaf de homepage tickets te kopen: 2-3
Duur van het volledige herontwerp van het platform (maanden): 8
Specialisten in het projectteam: 6
Cachelagen die de verkeerspieken bij premières en campagnes opvangen (Cloudflare, Varnish, Redis): 3

Methodologie: Gegevens over scope en uitvoering van het project (2025): de duur en het team komen uit het contract; het aankooptraject en de cachelagen uit de uitgerolde architectuur. De prestatie- en toegankelijkheidscijfers van het herontwerp (LCP, pagina's per sessie, WCAG AA) staan in de resultatensectie van deze case.

05Het proces

Het proces

Discovery

UX-audit van de huidige site, analyse van aankoopflows en KPI-definitie
Architectuur

Ontwerp van contenttypes, taxonomieën en redactionele workflows
Design

UI/UX gericht op conversie en WCAG AA-toegankelijkheid
Ontwikkeling

Drupal-implementatie met herbruikbare componenten en continue testing
Optimalisatie

Performance-tuning, cache en voorbereiding op verkeerspieken