Web Development & UX 2025

Teatre Nacional de Catalunya

Complete redesign of the Teatre Nacional de Catalunya digital platform with Drupal: dynamic calendar, optimized show pages and checkout in 2-3 clicks.

8 months 6 specialists 2025 tnc.cat
Services
  • Drupal Development
  • UX/UI Design
  • WCAG AA Accessibility
  • Performance Optimization
  • Content Architecture
Related services

01The challenge

The challenge

The Teatre Nacional de Catalunya manages a calendar with high editorial rotation, traffic spikes during campaigns and premieres, and the critical need to guide users to ticket purchase in 2-3 clicks without getting lost. The editorial team required fast publishing with quality control (roles, reviews, scheduling), AA accessibility compliance and stable performance on mobile devices where most traffic comes from.

02The solution

The solution

We developed a task-centered UX redesign: calendar navigation with smart filters, show pages with clear visual hierarchy (dates, cast, prices, purchase CTA) and consistent calls to action throughout the journey. We implemented Drupal with reusable components, editorial workflows with preview and version control, and a solid performance foundation with cache strategy, media optimization, lazy loading and CDN preparation.

Tech stack

How it's built

Front end

  • Twig Front-end templates
  • Tailwind CSS Styling system

Engine

Data

  • Varnish HTTP cache
  • Redis In-memory cache
  • Cloudflare CDN & security

03Architecture

How a request flows

  1. An editor publishes or updates a show's page in Drupal, with a review and preview workflow before it goes live

  2. A visitor's request passes through Cloudflare and then Varnish, which serves the page from cache when available

  3. If there is no cache, Drupal builds the page with its reusable components (dates, cast, prices), relying on Redis for frequent queries

  4. The visitor filters the listings and reaches the show's page in 2-3 clicks, thanks to the visual hierarchy of the content and the purchase CTA

  5. The CTA leads to ticket purchase, with lazy loading and optimized assets that keep LCP low even during traffic spikes from premieres and campaigns

04Measured impact

Results

  • -37% Mobile LCP
  • +18% Pages/session
  • 100% WCAG AA
  • 2.4s LCP (previously 3.8s)

Verifiable data

Metrics in detail

Clicks needed to reach ticket purchase from the homepage
2-3
Duration of the full platform redesign (months)
8
Specialists on the project team
6
Cache layers that sustain premiere and campaign traffic spikes (Cloudflare, Varnish, Redis)
3

Methodology: Project scope and delivery data (2025): duration and team come from the contract; the purchase journey and cache layers, from the deployed architecture. The redesign's performance and accessibility metrics (LCP, pages per session, WCAG AA) are in the results section of this case study.

05The process

The process

  1. Discovery

    UX audit of current site, purchase flow analysis and KPI definition

  2. Architecture

    Design of content types, taxonomies and editorial workflows

  3. Design

    UI/UX focused on conversion and WCAG AA accessibility

  4. Development

    Drupal implementation with reusable components and continuous testing

  5. Optimization

    Performance tuning, cache and preparation for traffic spikes

Your next project?

Let's talk results

Tell us your challenge. We'll respond within 24h.

Start a conversation
  • NDA available
  • Response <24h
  • Phased proposal
Next project Institut de Cultura de Barcelona Web Development & Public Sector