Desenvolvimento Web e UX 2025
Teatre Nacional de Catalunya
Redesign completo da plataforma digital do Teatre Nacional de Catalunya com Drupal: agenda dinâmica, fichas de espetáculos otimizadas e compra em 2-3 cliques.
- Desenvolvimento Drupal
- UX/UI Design
- Acessibilidade WCAG AA
- Otimização de Desempenho
- Arquitetura de Conteúdos
01O desafio
O desafio
O Teatre Nacional de Catalunya gere uma agenda com alta rotação editorial, picos de tráfego em campanhas e estreias, e a necessidade crítica de guiar o utilizador até à compra de bilhetes em 2-3 cliques. A equipa editorial precisava de publicação rápida com controlo de qualidade, conformidade de acessibilidade AA e desempenho estável em dispositivos móveis.
02A solução
A solução
Desenvolvemos um redesign UX centrado em tarefas: navegação por agenda com filtros inteligentes, fichas de espetáculos com hierarquia visual clara e chamadas à ação consistentes. Implementámos Drupal com componentes reutilizáveis, workflows editoriais e uma base sólida de desempenho com estratégia de cache e preparação CDN.
Stack técnico
Como está montado
Front
- Twig Templates do front
- Tailwind CSS Sistema de estilos
Motor
Dados
- Varnish Cache HTTP
- Redis Cache em memória
- Cloudflare CDN e segurança
03Arquitetura
Como flui um pedido
-
Um editor publica ou atualiza a ficha de um espetáculo no Drupal, com fluxo de revisão e pré-visualização antes de ir para produção
-
O pedido de um visitante passa pela Cloudflare e pela Varnish, que serve a página a partir da cache quando esta existe
-
Se não houver cache, o Drupal constrói a ficha com os seus componentes reutilizáveis (datas, elenco, preços), apoiando-se na Redis para as consultas frequentes
-
O visitante filtra a agenda e chega à ficha do espetáculo em 2-3 cliques graças à hierarquia visual do conteúdo e do CTA de compra
-
O CTA conduz à compra de bilhetes, com lazy loading e assets otimizados que mantêm o LCP baixo mesmo em picos de tráfego de estreias e campanhas
04Impacto medido
Resultados
- -37% LCP mobile
- +18% Páginas/sessão
- 100% WCAG AA
- 2.4s LCP (antes 3.8s)
Dados verificáveis
Métricas em detalhe
- Cliques necessários para chegar à compra de bilhetes a partir da home
- 2-3
- Duração do redesign integral da plataforma (meses)
- 8
- Especialistas na equipa do projeto
- 6
- Camadas de cache que sustentam os picos de estreias e campanhas (Cloudflare, Varnish, Redis)
- 3
Metodologia: Dados de âmbito e execução do projeto (2025): a duração e a equipa vêm do contrato; o percurso de compra e as camadas de cache, da arquitetura implementada. As métricas de desempenho e acessibilidade do redesign (LCP, páginas por sessão, WCAG AA) estão na secção de resultados deste caso.
05O processo
O processo
-
Discovery
Auditoria UX do site atual, análise de fluxos de compra e definição de KPIs
-
Arquitetura
Design de tipos de conteúdo, taxonomias e workflows editoriais
-
Design
UI/UX centrada na conversão e na acessibilidade WCAG AA
-
Desenvolvimento
Implementação Drupal com componentes reutilizáveis e testing contínuo
-
Otimização
Ajuste de desempenho, cache e preparação para picos de tráfego
06Showcase
A plataforma
O seu próximo projeto?
Falemos de resultados
Conte-nos o seu desafio. Respondemos em 24h.
Começar a conversa- NDA disponível
- Resposta <24h
- Proposta faseada
