Auditoria UX/UI: This de Barcelona
vs. GetYourGuide, Tiqets, Viator, Fever — Abril 2026
El nuevo ecommerce del CdT tiene una base solida y una posicion de marca privilegiada como portal oficial de turismo de Barcelona. El analisis identifica areas concretas donde incorporar funcionalidades ya estandar en el mercado permitiria a TdB transformar esa ventaja de marca en ventaja de conversion. Las oportunidades mas impactantes estan en la experiencia mobile, la integracion de prueba social, y la visibilidad de disponibilidad en las paginas de producto.
Esta auditoria incorpora 70+ capturas de 5 sitios web. Los 3 benchmarks transaccionales principales (GetYourGuide, Tiqets, Viator) comparten el objetivo de venta de tickets. Fever se incluye como referencia de modelo inspiracional.
This de Barcelona
2.3
/ 5.0
GetYourGuide
4.3
/ 5.0
Tiqets
3.8
/ 5.0
Viator
3.6
/ 5.0
Fever Ref. inspiracional
3.4
/ 5.0
Nota sobre Fever: Fever opera con un modelo inspiracional, no transaccional. Se incluye como referencia complementaria, no como competidor directo del ecommerce. Los benchmarks primarios para el CdT son GYG, Tiqets y Viator, que comparten el mismo objetivo: convertir visitas en ventas de tickets.
Puntuacion por Categoria (P1–P9)
| Prior. | Categoria | TdB | GYG | Tiqets | Viator | Fever |
|---|---|---|---|---|---|---|
| P1 | Accesibilidad alto impacto | 2.0 | 4.0 | 3.4 | 3.2 | 3.0 |
| P2 | Touch e Interaccion alto impacto | 2.5 | 4.6 | 4.2 | 4.0 | 3.5 |
| P3 | Rendimiento | 3.0 | 3.9 | 3.2 | 3.0 | 2.5 |
| P4 | Estilo / Design System | 2.0 | 4.5 | 4.1 | 4.0 | 4.5 |
| P5 | Layout y Responsive | 2.0 | 4.6 | 4.4 | 4.0 | 3.5 |
| P6 | Tipografia y Color | 2.0 | 4.3 | 3.9 | 3.7 | 3.5 |
| P7 | Fluidez de la Interfaz | 2.0 | 3.5 | 3.1 | 3.5 | 3.5 |
| P8 | Formularios y Feedback | 2.0 | 4.3 | 3.9 | 4.0 | 3.0 |
| P9 | Navegacion | 3.0 | 4.6 | 4.1 | 3.9 | 3.5 |
| MEDIA GLOBAL | 2.3 | 4.3 | 3.8 | 3.7 | 3.4 |
Puntuacion Ponderada (por impacto en conversion)
Los pesos reflejan la importancia relativa de cada categoria para la conversion en un ecommerce de tickets turisticos: Touch/Mobile y Formularios/Feedback tienen peso 2x; Accesibilidad, Layout y Navegacion 1.5x; Tipografia y Fluidez de la Interfaz 0.5x.
| Prior. | Categoria | Peso | TdB | GYG | Tiqets | Viator | Fever |
|---|---|---|---|---|---|---|---|
| P1 | Accesibilidad | 1.5x | 2.0 | 4.0 | 3.4 | 3.2 | 3.0 |
| P2 | Touch e Interaccion | 2.0x | 2.5 | 4.6 | 4.2 | 4.0 | 3.5 |
| P3 | Rendimiento | 1.0x | 3.0 | 3.9 | 3.2 | 3.0 | 2.5 |
| P4 | Estilo / Design System | 1.0x | 2.0 | 4.5 | 4.1 | 4.0 | 4.5 |
| P5 | Layout y Responsive | 1.5x | 2.0 | 4.6 | 4.4 | 4.0 | 3.5 |
| P6 | Tipografia y Color | 0.5x | 2.0 | 4.3 | 3.9 | 3.7 | 3.5 |
| P7 | Fluidez de la Interfaz | 0.5x | 2.0 | 3.5 | 3.1 | 3.5 | 3.5 |
| P8 | Formularios y Feedback | 2.0x | 2.0 | 4.3 | 3.9 | 4.0 | 3.0 |
| P9 | Navegacion | 1.5x | 3.0 | 4.6 | 4.1 | 3.9 | 3.5 |
| MEDIA ARITMETICA | 2.3 | 4.3 | 3.8 | 3.6 | 3.4 | ||
| MEDIA PONDERADA | 11.5x | 2.3 | 4.3 | 3.9 | 3.8 | 3.4 |
La ponderacion apenas mueve las posiciones: el ranking se mantiene GYG > Tiqets > Viator > Fever > CdT.
Las categorias de mayor peso en conversion (Touch/Mobile P2, Formularios P8) son precisamente donde CdT tiene mas distancia con los competidores. Viator sube ligeramente (3.6 → 3.8) gracias a sus fuertes P2 y P8, mientras que Fever baja marginalmente (3.4 → 3.4) por su menor rendimiento en formularios y accesibilidad.
Top 10 Oportunidades de Mejora por Impacto
- Refinar contraste en contextos secundarios — El CTA principal (sticky bar) muestra rojo (#ac0c22) sobre blanco con ratio 7.42:1, cumpliendo WCAG AA. El ratio 2.30:1 aplica al rojo sobre navy en contextos decorativos secundarios. Oportunidad: ajustar esos elementos secundarios para consistencia de accesibilidad en toda la pagina. alto
- Enriquecer el sticky CTA mobile — La barra fija de compra ya existe, pero solo muestra precio + "Reservar". Anadir rating, badges de confianza ("Cancelacion gratuita", "Confirmacion instantanea") y disponibilidad elevaria su eficacia al nivel de GYG y Tiqets. alto impacto
- Hacer visible el calendario de disponibilidad en la PDP — El calendario existe tras click en "Reservar", pero no es visible directamente en la PDP. Hacer visible la disponibilidad directamente en la pagina de producto — sin necesidad de iniciar el proceso de reserva — como hacen GYG, Tiqets y Viator con calendarios inline, eliminaria incertidumbre y fricciones. alto impacto
- Incorporar sistema de resenas y valoraciones — La prueba social es el factor de confianza mas poderoso para turistas internacionales. Incluso ratings agregados basicos marcarian una diferencia significativa. alto impacto
- Evolucionar a layout 2-columnas con sidebar de reserva — Un widget de reserva lateral fijo (como GYG/Tiqets/Viator) permite al usuario ver opciones y precios mientras lee detalles del producto. alto
- Explorar fondo claro para areas de contenido — Manteniendo el navy como identidad de marca en header/footer, un fondo claro en el area de productos maximizaria el impacto visual de las imagenes y la legibilidad mobile al sol. alto
- Ampliar Schema.org: anadir BreadcrumbList y AggregateRating — CdT ya tiene Schema.org con Product y Offer (renderizado via JavaScript). Anadir BreadcrumbList y, cuando existan resenas, AggregateRating para mostrar estrellas en Google. Mejora directa de CTR organico. alto
- Enriquecer las tarjetas de producto — Anadir rating, duracion y badges a las tarjetas del listado (actualmente imagen + titulo + precio) daria al usuario mas informacion para decidir sin entrar en cada producto. alto
- Activar modulos de cross-sell existentes en Magento — Los modulos de cross-sell (recently viewed, related products) ya existen en la plataforma Magento pero no estan activados/populados. Activarlos y popularlos con productos relacionados crearia rutas de descubrimiento y aumentaria el ticket medio con minimo esfuerzo de desarrollo. alto
- Inspiracion: "Traveler Photos" de Viator — Una galeria de fotos de usuarios reales post-visita seria un diferenciador potente para TdB, aprovechando su posicion como portal oficial de Barcelona. inspiracion
Analisis por Arquetipos de Cliente
Seis arquetipos que representan los comportamientos de compra mas frecuentes en una plataforma de tickets turisticos. Para cada uno, analizamos que necesita de la web, como responde TdB hoy vs. la competencia, y donde esta la oportunidad.
1. El Espontaneo
Perfil: Turista en Barcelona ahora mismo, mobile, "que hacemos hoy?"
Contexto de uso: En el hotel por la manana, en la calle, en un cafe. Siempre en el movil. Conexion variable.
Lo que busca: Inspiracion inmediata, opciones para hoy/manana, decision rapida.
Contexto de uso: En el hotel por la manana, en la calle, en un cafe. Siempre en el movil. Conexion variable.
Lo que busca: Inspiracion inmediata, opciones para hoy/manana, decision rapida.
Lo que necesita de la web
| Necesidad | TdB | Competidores |
|---|---|---|
| Filtro "Disponible hoy/manana" | No disponible | GYG: si | Viator: si |
| Productos con rating para decidir rapido | Sin ratings | GYG: ratings en cada tarjeta |
| Sticky CTA para comprar en cualquier momento | Si (precio + Reservar) | GYG / Tiqets / Viator: si, mas enriquecido |
| Confirmacion instantanea | Badge "Cancelacion gratuita" (parcial) | Competidores: multiples badges |
| Pago rapido (Apple Pay, Google Pay) | No evaluado en esta auditoria | |
Experiencia actual en TdB: El hub no ofrece filtro temporal. Las tarjetas de producto solo muestran imagen + titulo + precio, sin rating ni badge de disponibilidad. No hay forma rapida de saber que se puede hacer HOY.
Oportunidad
Anadir filtro "Hoy/Manana" en el hub y categorias, ratings en tarjetas, y enriquecer el sticky CTA mobile (ya presente) con badges de confianza convertiria a TdB en la opcion preferida para compras espontaneas — aprovechando su posicion como portal oficial de la ciudad.
2. El Comprador en Destino
Perfil: Esta fisicamente frente a la atraccion (Casa Batllo, Sagrada Familia). Quiere entrar AHORA.
Contexto de uso: De pie en la calle, bajo el sol, pantalla pequena, prisa. Necesita resolver en 60 segundos.
Lo que busca: Disponibilidad inmediata, precio, skip-the-line, compra instantanea.
Contexto de uso: De pie en la calle, bajo el sol, pantalla pequena, prisa. Necesita resolver en 60 segundos.
Lo que busca: Disponibilidad inmediata, precio, skip-the-line, compra instantanea.
Lo que necesita de la web
| Necesidad | TdB | Competidores |
|---|---|---|
| Calendario con horarios disponibles visible en la PDP | Disponible tras click en "Reservar" | GYG: inline | Tiqets: inline | Viator: inline |
| "Proximo horario disponible" destacado | No | Competidores: si |
| Skip-the-line badge | No | GYG: prominente |
| Mapa/ubicacion confirmando que esta en el sitio correcto | No | Competidores: si |
| Proceso de compra en menos de 3 taps | No evaluable | GYG: progresivo excelente |
Experiencia actual en TdB: La PDP muestra precio y boton "Reservar". El calendario de disponibilidad existe pero aparece solo tras click en "Reservar", obligando al usuario a iniciar el proceso de compra para ver si hay disponibilidad. El fondo oscuro dificulta la lectura al sol.
Oportunidad
Hacer visible la disponibilidad directamente en la PDP — sin necesidad de pulsar "Reservar" — mostrando "Proximo horario: 14:30 — 3 plazas" seria un game changer. El calendario ya existe tras el click; solo necesita moverse a un paso anterior. TdB como portal oficial podria incluso ofrecer entradas de ultimo minuto exclusivas.
3. El Planificador
Perfil: En casa, 1-2 semanas antes del viaje, laptop o tablet. Construyendo itinerario.
Contexto de uso: Pantalla grande, multiples pestanas abiertas, compara entre plataformas.
Lo que busca: Catalogo completo, comparacion de opciones, planificacion de varios dias, combos con descuento.
Contexto de uso: Pantalla grande, multiples pestanas abiertas, compara entre plataformas.
Lo que busca: Catalogo completo, comparacion de opciones, planificacion de varios dias, combos con descuento.
Lo que necesita de la web
| Necesidad | TdB | Competidores |
|---|---|---|
| Catalogo amplio con filtros (categoria, precio, duracion, rating) | Filtros basicos (sort + idioma + ubicacion) | GYG: 6+ filtros |
| Opciones visibles por producto (24h/48h, con guia/sin guia) | Ocultas en acordeon | Competidores: visibles en sidebar |
| Combinaciones/packs con descuento | No | Tiqets: "Best-picked combinations" |
| Reviews para validar decision | No | Todos los competidores: si |
| Layout 2 columnas con booking sidebar | 1 columna | Todos los competidores: 2 columnas |
Experiencia actual en TdB: El catalogo de categorias funciona (42 productos en Arte y Cultura con sort). Pero las tarjetas dan poca info para decidir sin entrar en cada producto. Las PDPs no muestran opciones ni variantes. No hay combinaciones.
Oportunidad
Enriquecer tarjetas con rating + duracion + badges, mostrar variantes de producto en la PDP, y crear packs tipo "3 dias en Barcelona" aprovecharia la credibilidad de TdB como fuente oficial para la planificacion.
4. El Organizador de Grupo
Perfil: Reserva para familia (2 adultos + 2 ninos) o grupo de amigos (4-6 personas).
Contexto de uso: Necesita coordinar preferencias, presupuesto y disponibilidad de varias personas.
Lo que busca: Precios por persona/tipo (adulto, nino, senior), disponibilidad para grupos, actividades aptas para familias/grupos.
Contexto de uso: Necesita coordinar preferencias, presupuesto y disponibilidad de varias personas.
Lo que busca: Precios por persona/tipo (adulto, nino, senior), disponibilidad para grupos, actividades aptas para familias/grupos.
Lo que necesita de la web
| Necesidad | TdB | Competidores |
|---|---|---|
| Precios por tipo de participante visibles | No visibles en PDP | GYG: selector adulto/nino con precios |
| Filtro "familias" o "grupos" | No | Tiqets: "Recommended for families" |
| Indicacion de tamano maximo de grupo | No visible | Viator: si |
| Carrito con multiples productos | Tiene carrito | Competidores: tambien |
| Opciones de grupo con descuento | No visible | Algunos competidores: si |
Experiencia actual en TdB: El sistema de carrito existe pero las PDPs no muestran precios diferenciados por tipo de participante de forma visible. No hay curacion para familias.
Oportunidad
Anadir un selector de participantes (adultos/ninos/seniors) con precios dinamicos y una seccion "Barcelona en familia" curada marcaria una diferencia clara vs. los agregadores genericos.
5. El Buscador de Ofertas
Perfil: Turista con presupuesto ajustado, busca maximizar experiencias por euro.
Contexto de uso: Compara precios entre plataformas, busca descuentos, valora pases multi-atraccion.
Lo que busca: Barcelona Card, pases multiday, combos con descuento, "best price guarantee".
Contexto de uso: Compara precios entre plataformas, busca descuentos, valora pases multi-atraccion.
Lo que busca: Barcelona Card, pases multiday, combos con descuento, "best price guarantee".
Lo que necesita de la web
| Necesidad | TdB | Competidores |
|---|---|---|
| Sort por precio | Si, existe en categorias ✓ | Competidores: si |
| Comparativa de pases (que incluye cada uno, ahorro vs. individual) | Informacion en acordeones | Tiqets: selector interactivo |
| Combinaciones con descuento | No | Tiqets / Viator: si |
| Badge "Mejor precio" | No | Tiqets: "Best value" |
| Cancelacion gratuita visible | Si, en categorias ✓ | Competidores: si |
Experiencia actual en TdB: TdB tiene ventaja potencial aqui — ofrece Barcelona Card y productos oficiales. El sort por precio funciona. La badge "Cancelacion gratuita" existe. Pero la Barcelona Card PDP no comunica visualmente el ahorro vs. comprar por separado.
Oportunidad
TdB podria posicionarse como "mejor precio garantizado por ser canal oficial". Una calculadora de ahorro en la Barcelona Card ("Ahorra 47€ con 3 museos incluidos") seria un diferenciador unico.
Matriz Resumen: Necesidades por Arquetipo
| Necesidad del cliente | Espontaneo | En Destino | Planificador | Grupo | Ofertas | Premium |
|---|---|---|---|---|---|---|
| Filtro temporal (hoy/manana) | Oportunidad | Oportunidad | ◔ | ◔ | — | — |
| Ratings y reviews | Oportunidad | ◔ | Oportunidad | ◔ | ◔ | Oportunidad |
| Sticky CTA mobile (enriquecer) | Mejorable | Mejorable | — | — | ◔ | — |
| Calendario visible en PDP (sin iniciar reserva) | ◔ | Mejorable | Mejorable | Mejorable | — | — |
| Combinaciones / packs con descuento | — | — | Oportunidad | ◔ | Oportunidad | — |
| Precios por tipo de participante | — | — | ◔ | Oportunidad | ◔ | — |
| Skip-the-line / badges de urgencia | ◔ | Oportunidad | — | — | — | Oportunidad |
| Seccion "Para familias" curada | — | — | ◔ | Oportunidad | — | — |
| Calculadora de ahorro (Barcelona Card) | — | — | ◔ | — | Oportunidad | — |
| Experiencias exclusivas / VIP | — | — | — | — | — | Oportunidad |
✓ = presente en TdB · ◔ = parcial o relevante pero no critico · Mejorable = existe pero necesita mejora · Oportunidad = necesidad critica para este arquetipo, no cubierta · — = no relevante para este arquetipo
Fortaleza por Plataforma y Arquetipo
Que tan bien sirve cada plataforma a cada tipo de cliente (1-5):
| Plataforma | Espontaneo | En Destino | Planificador | Grupo | Ofertas | Premium |
|---|---|---|---|---|---|---|
| CdT | 2 | 2 | 2 | 2 | 3 | 2 |
| GYG | 5 | 5 | 5 | 4 | 3 | 4 |
| Tiqets | 4 | 4 | 4 | 3 | 4 | 3 |
| Viator | 4 | 4 | 4 | 4 | 3 | 4 |
| Fever | 4 | 3 | 2 | 2 | 2 | 5 |
Fever destaca en el Espontaneo y el Premium, pero no compite en Planificador ni Ofertas.
Su enfoque de inspiracion ("que hacer en Barcelona") con experiencias inmersivas y exclusivas (Candlelight, exposiciones interactivas) lo posiciona fuerte para quien busca "algo especial". Sin embargo, su falta de filtros estructurados, ausencia de comparacion de precios y modelo de "brand pages" (vs. PDPs tradicionales) lo hace debil para quien planifica o compara ofertas. CdT podria aprender de Fever el poder de la curacion visual y las experiencias exclusivas.
Hub / Landing — Primera Impresion
Above the Fold — Desktop
Lo que el usuario ve en los primeros 3 segundos al aterrizar en la seccion de tickets de cada sitio:
Comparativa: Primera Impresion Desktop (4-up) Oportunidad de alto impacto
This de BCN
Hero oscuro + categorias genericas. Sin productos visibles en el primer viewport. Sin filtros, sin precios, sin ratings.
GetYourGuide
Grid de productos inmediato con ratings, precios, badges "Bestseller". Filtros visibles arriba. El turista decide en segundos.
Tiqets
Hero aspiracional + "Top Things to Do" inmediato. Curacion editorial que guia al usuario. Enfoque discovery.
Fever
Fondo oscuro con carruseles visuales por categoria (Candlelight, Immersive). Imagenes grandes, ratings, precios. Inspiracion-first.
Oportunidad: mostrar productos directamente en el primer viewport.
Actualmente el hero y las categorias ocupan el primer pantallazo. Incorporar tarjetas de producto ya en el primer scroll (como hace GYG con +10 productos) o curacion editorial (como Tiqets con "Top Things to Do") captaria la atencion del turista desde el primer segundo.
Fever: como hacer funcionar el tema oscuro con impacto visual.
Fever y CdT comparten el uso de fondo oscuro, pero con resultados opuestos. Fever lo resuelve con imagenes masivas de alta calidad, carruseles horizontales por categoria y jerarquia visual fuerte (titulo + rating + precio por tarjeta). CdT usa categorias genericas con iconos sobre navy. La leccion: el tema oscuro funciona cuando el contenido visual es protagonista absoluto y la densidad de informacion por tarjeta es alta. Sin eso, el fondo oscuro dificulta la lectura y reduce la visibilidad de los productos.
Densidad de Producto — Zona de Listado
Comparativa: Zona de productos Desktop (4-up)
This de BCN
TOP 10 en carrusel (muestra 3) + ~5 tarjetas adicionales. Total visible: ~8 productos. Sin filtros, sin ratings.
GetYourGuide
Grid denso: ~20+ productos visibles con imagen, titulo, rating, reviews, precio, duracion y badges. Filtros laterales.
Tiqets
Secciones curadas: "Recommended by", "Best combinations", grid de experiencias. ~15 productos + bundles + editorial.
Fever
Carruseles horizontales por marca/tipo (Candlelight, Exhibitions). Tarjetas grandes con rating + precio. Alta densidad visual, baja densidad informativa.
Oportunidad: aumentar la densidad de productos visibles.
El TOP 10 con numeros gigantes es un elemento diferenciador interesante, pero consume mucho espacio vertical. Complementarlo con un grid mas denso debajo (con ratings y badges por tarjeta, como GYG) maximizaria las opciones visibles sin perder el caracter curado.
Categorias
ATF Desktop — Pagina de Categoria
Comparativa: Categoria Desktop ATF (5-up)
This de BCN
Breadcrumbs + titulo + filtros basicos (sort, idioma, ubicacion). Tarjetas con img + titulo + precio.
GetYourGuide
6+ filtros (precio, duracion, rating, idioma, hora, categoria). Tarjetas horizontales con 7 campos de info.
Tiqets
Curacion editorial con secciones tematicas. Sin filtros explicitos pero con buena organizacion.
Viator
Grid curado con badges de urgencia, ratings, precios y duracion en cada tarjeta.
Fever
Grid masivo de experiencias con imagenes cuadradas. Fondo claro en categoria (vs oscuro en hub). Titulo + precio + rating.
ATF Mobile — Pagina de Categoria
Comparativa: Categoria Mobile ATF (5-up)
CdT
Filtros basicos + tarjetas verticales.
GYG
Pills horizontales + cards horizontales.
Tiqets
Curacion visual clara, hero + secciones.
Viator
Grid con badges + full-width cards.
Fever
Cards verticales con imagen grande + titulo + precio. Fondo oscuro.
Tarjeta de Producto y Filtros
Campos por tarjeta de producto
| Campo | TdB | GYG | Tiqets | Viator | Fever |
|---|---|---|---|---|---|
| Imagen | Si | Si | Si | Si | Si (grande) |
| Titulo | Si | Si | Si | Si | Si |
| Precio | Si | Si | Si | Si | Si |
| Rating / estrellas | No | Si | Si | Si | Si |
| Numero de reviews | No | Si (16K+) | Parcial | Si | Parcial |
| Duracion | No | Si | Parcial | Si | No |
| Badges (Bestseller, Free cancel, etc.) | Solo "Cancelacion gratuita" | Multiples | Multiples | Multiples | Parcial |
| Total campos | 3 | 7 | 5-6 | 7 | 5 |
Filtros de categoria
| Filtro | TdB | GYG | Tiqets | Viator | Fever |
|---|---|---|---|---|---|
| Ordenar por | Si | Si | Curacion | Curacion | Curacion |
| Idioma | Si | Si | No | No | No |
| Ubicacion | Si | Si | No | No | No |
| Precio | No | Si (rango) | No | No | No |
| Duracion | No | Si | No | No | No |
| Rating | No | Si | No | No | No |
| Hora del dia | No | Si | No | No | No |
TdB tiene 3 filtros funcionales; GYG tiene 6+.
Curiosamente, TdB supera a Tiqets y Viator en filtros (ambos usan curacion editorial sin filtros explicitos). Pero GYG es el claro lider con filtros robustos que permiten al turista afinar su busqueda rapidamente.
PDP Tipo Pase (Bus Turistic)
Above the Fold — Desktop
Primer impacto de la pagina de producto del Bus Turistic en cada plataforma:
Comparativa: PDP Bus Turistic — Desktop ATF (4-up) Oportunidad de alto impacto
This de BCN
1 imagen + precio + boton "Reservar". Calendario disponible tras click. Sin rating, sin mapa, sin opciones visibles, sin highlights.
GetYourGuide
Galeria + rating (4.0, 16K+ reviews) + highlights iconos + booking sidebar con calendario + opciones 24h/48h con precios + "Free cancellation".
Tiqets
Galeria + mapa de ruta integrado + highlights + booking widget + confirmacion instantanea visible.
Viator
Galeria amplia + descripcion detallada + tabs de navegacion + "Free cancellation" prominente. Muy rico en informacion.
Oportunidad: transformar la PDP de informativa a conversional.
TdB ya tiene los elementos base (imagen de calidad, precio claro, CTA visible). El siguiente paso es enriquecer el primer viewport con highlights (que incluye, duracion, idiomas), rating y un widget de disponibilidad, como hacen los 3 competidores.
Above the Fold — Mobile
Comparativa: PDP Bus Turistic — Mobile ATF (3-up + Viator cross-sell)
CdT
Imagen + precio + boton + barra fija de compra. Oportunidad: anadir highlights y trust signals.
GYG
Galeria swipe + rating + highlights + sticky CTA bar abajo.
Tiqets
Galeria + rating + badges + sticky CTA morado con precio.
Oportunidad: enriquecer el above-the-fold mobile.
TdB muestra 3 elementos (imagen + precio + boton). Anadir rating, badges de confianza ("Cancelacion gratuita", "Confirmacion instantanea") y highlights con iconos elevaria la densidad informativa al nivel de GYG (5+) y Viator (8+ elementos en el primer viewport).
Resenas y Prueba Social
Comparativa: Zona de resenas (3-up) Oportunidad para CdT
GetYourGuide
Rating global + desglose por categoria + resenas individuales con texto y fotos de usuarios reales.
Tiqets
Puntuacion numerica + resenas de usuarios + combinaciones sugeridas. Refuerza confianza y amplia carrito.
CdT — Oportunidad
El modulo de resenas de Magento existe en el codigo pero esta vacio. La PDP pasa directamente al footer tras los acordeones. La infraestructura para resenas ya esta — solo necesita activarse.
Oportunidad: la prueba social es el trust signal #1 en ecommerce de experiencias.
Incorporar resenas y valoraciones transformaria la percepcion de confianza de TdB. El modulo de resenas de Magento esta presente en el codigo pero vacio — la infraestructura para resenas ya existe, solo necesita activarse y recopilar opiniones. Incluso empezar con ratings agregados basicos marcaria una diferencia inmediata. A medio plazo, TdB podria aprovechar su posicion como portal oficial para solicitar reviews verificadas con un sello de autenticidad unico.
Cross-sell
Comparativa: Cross-sell (2-up) Oportunidad para CdT
Tiqets
Triple cross-sell: "Best-picked combinations" (packs con ahorro) + alternativas misma atraccion + productos diferentes. Aumenta ticket medio.
CdT — Oportunidad
Los modulos de cross-sell (recently viewed, related products) existen en Magento pero no estan activados/populados. La PDP termina directamente antes del footer.
Oportunidad: activar los modulos de cross-sell existentes en Magento.
La plataforma Magento/Hyva de CdT ya incluye modulos de "recently viewed" y "related products" — solo necesitan ser activados y populados. Complementar con secciones tipo "Sagrada + Park Guell" con descuento y alternativas dentro de la misma categoria crearia nuevas oportunidades de conversion. Tiqets y Viator usan hasta 3 capas de cross-sell por PDP. Para CdT, el esfuerzo es de configuracion, no de desarrollo.
PDP Experiencia con Horario (Casa Batllo / Sagrada)
Above the Fold — Mobile
Las experiencias "timed" (con hora especifica) son las mas complejas para el usuario. Requieren seleccionar fecha, hora, y a menudo opciones de grupo. La PDP debe resolver esta complejidad sin fricciones.
Comparativa: PDP Timed — Mobile ATF (4-up)
CdT
Imagen + precio. Calendario disponible tras click en "Reservar", pero sin hora ni opciones visibles en la PDP.
GYG
Galeria + rating + highlights + sticky CTA.
Tiqets
Rating + opciones multiples + "Best value" badge.
Viator
Rating + 6 badges + galeria + descripcion extensa.
Viator Mobile — Experiencia Completa
Viator representa el benchmark maximo en informacion y prueba social mobile:
Viator PDP Mobile: Fotos de viajeros + Reviews Benchmark
Viator
ATF: rating + 6 trust badges + galeria profesional.
Viator
Reviews: estrellas + texto + fotos de viajeros + filtros + votos "helpful". El sistema mas completo del mercado.
El sistema de reviews de Viator es el benchmark absoluto.
Rating + desglose + reviews con texto + fotos de viajeros + filtros por tipo + voto helpful/unhelpful. CdT actualmente no muestra ninguno de estos 6 elementos, aunque el modulo de resenas de Magento ya existe en el codigo (vacio). Activarlo y adoptar incluso una version basica de este sistema tendria alto impacto en conversion.
Experiencia Mobile
La mayoria de usuarios de este tipo de plataforma son turistas con el movil en la mano, en Barcelona, bajo el sol. Esta es la superficie de uso mas critica.
Boton de Compra Fijo en Mobile — Comparativa
CdT ya implementa el sticky CTA — un patron critico de conversion mobile.
Los 4 sitios analizados tienen una barra fija inferior con precio + boton de compra visible en todo momento al hacer scroll. La diferencia esta en la riqueza de informacion que acompana al CTA: los competidores incluyen badges de confianza, rating o informacion de cancelacion junto al precio.
Comparativa: Calidad del boton fijo de compra en mobile (4-up) Oportunidad de mejora
GYG
Barra fija: precio + "Check availability" + trust badge. Muy completa.
Tiqets
Barra fija morada: precio + CTA + info de cancelacion. Clara y eficaz.
Viator
Boton verde "Check Availability" fijo con precio visible.
CdT
Barra fija con precio + Reservar. Oportunidad: enriquecer con rating, badges de confianza o disponibilidad.
Oportunidad: enriquecer la barra fija de compra existente.
CdT ya tiene el patron basico (precio + "Reservar"), lo cual es una base solida. El siguiente paso es anadir elementos de confianza y urgencia al sticky bar: rating del producto, badge de "Cancelacion gratuita", o disponibilidad ("Ultimo horario: 17:00"). Estos elementos reforzarian la decision de compra sin necesidad de volver arriba.
Altura Total de Pagina (PDP)
Comparativa: Altura de pagina PDP mobile
CdT
5.101px
Acordeones abiertos
Tiqets
5.993px
GetYourGuide
9.023px
Viator
16.664px
Con los acordeones abiertos, CdT (5.101px) esta cerca de Tiqets (5.993px).
La diferencia de contenido con GYG y Viator se debe principalmente a secciones que CdT tiene como infraestructura pero no activadas: reviews (modulo Magento presente pero vacio), cross-sell (modulos existentes pero sin popular) y variantes de producto. La base tecnica es solida (lazy loading con IntersectionObserver + x-defer) y soportara la activacion de estos modulos sin impacto en rendimiento.
Recomendaciones (24)
Organizadas en 3 niveles de urgencia. Cada recomendacion incluye su impacto estimado en conversion y experiencia de usuario.
INMEDIATA — 1-2 semanas
1
Hacer visible el calendario en la PDP
El calendario de disponibilidad ya existe tras click en "Reservar". La oportunidad de mayor impacto es hacerlo visible directamente en la PDP sin iniciar el proceso de reserva — como hacen GYG, Tiqets y Viator con calendarios inline. Se trata de reposicionar un componente existente, no de crearlo.
2
Activar sistema de resenas
El modulo de resenas de Magento ya existe en el codigo pero esta vacio. Activarlo y configurar: rating (estrellas), texto libre, etiquetas (familia, pareja, amigos). Version minima viable: rating numerico + 3 resenas recientes. La infraestructura ya esta — el trabajo es de activacion y recopilacion de opiniones.
3
Enriquecer tarjetas de producto + sticky bar
Anadir rating, duracion y badges ("Cancelacion gratuita", "Bestseller") a las tarjetas del listado (actualmente imagen + titulo + precio). Tambien enriquecer el sticky bar existente con rating y disponibilidad. Multiplica la informacion visible sin cambiar la estructura.
4
Highlights sin acordeon
Mostrar los 4-6 datos clave siempre visibles en PDP (duracion, que incluye, cancelacion, idiomas) como iconos + texto, estilo GYG. Mover solo FAQ y terminos completos a acordeones.
5
Activar cross-sell en Magento
Los modulos de cross-sell (recently viewed, related products) ya existen en Magento. Activarlos y popularlos con productos relacionados — seccion "Quizas tambien te interese" al final de cada PDP. Esfuerzo de configuracion, no de desarrollo.
6
Fondo claro en PDPs
Cambiar el fondo de las PDPs de navy a blanco/claro. Todos los competidores y paletas de hospitality recomiendan fondo claro. Mejora legibilidad al sol y contraste con imagenes.
7
Ampliar Schema.org
CdT ya tiene Schema.org (Product + Offer). Ampliar con BreadcrumbList y, cuando existan resenas, AggregateRating para habilitar estrellas en Google. Impacto directo en CTR organico.
8
Refinar contraste + form labels HTML
Ajustar contraste rojo/navy en contextos secundarios (el CTA principal ya pasa WCAG AA). Anadir atributos for/id en formularios para accesibilidad. Cambios CSS + HTML menores.
CORTO PLAZO — 1-3 meses
9
Mapa en PDPs
Incluir mapa interactivo en las PDPs de experiencias con ubicacion (especialmente Bus Turistic con ruta). Tiqets lo ejecuta mejor con mapa de ruta integrado.
10
Filtros mejorados
Anadir filtros de precio, duracion y disponibilidad ("Hoy", "Manana") a las paginas de categoria. Pasar de 3 filtros a 5-6 (modelo GYG).
13
Galeria swipe mobile
Reemplazar thumbnails estaticos por carrusel swipeable con dots de navegacion. Los 3 competidores usan este patron en mobile.
14
Alt text descriptivo
Reemplazar alt texts genericos/vacios por descripciones especificas ("Vista aerea del Bus Turistic de Barcelona pasando por Sagrada Familia"). Impacto SEO + accesibilidad.
15
Meta descriptions optimizadas
Crear meta descriptions unicas por PDP con precio, rating (cuando existan) y USP. Actualmente genericas o pendientes de crear.
16
Heading hierarchy
Corregir jerarquia de headings (h2 para "Menu" es incorrecto). Establecer h1 para titulo producto, h2 para secciones, h3 para subsecciones. Impacto SEO + accesibilidad.
MEDIO PLAZO — 3-6 meses
17
Combinaciones / Packs
Crear bundles tipo "Sagrada Familia + Park Guell" con descuento sobre precio individual. Modelo Tiqets "Best-picked combinations". Aumenta ticket medio significativamente.
18
Curacion editorial
Crear secciones editoriales en hub y categorias: "Imprescindibles", "Para familias", "Gratis o bajo coste", con foto de curador humano (modelo Tiqets). Anadir contexto y confianza.
19
Fotos de viajeros (UGC)
Permitir subir fotos a las resenas y crear galeria "Traveler Photos" (modelo Viator). Es el trust signal visual mas potente del mercado de tickets.
20
Rediseno hub
Rehacer la landing de tickets con productos inmediatos above-the-fold (modelo GYG), filtro temporal prominente ("Disponible hoy"), y mayor densidad de productos por pantalla.
21
Opciones visibles en PDP
Mostrar todas las variantes de producto (24h vs 48h, adulto vs nino, con guia vs sin guia) directamente en la PDP con precios visibles. Modelo GYG: progressive disclosure.
22
Rating en tarjetas de producto
Mostrar estrellas y numero de reviews en las tarjetas del listado/categoria. Depende de implementar primero el sistema de resenas (#10). Aumenta CTR significativamente.
23
Filtro de fecha
Anadir filtro "Disponible hoy/manana/esta semana" en hub y categorias. Critico para el arquetipo Espontaneo (turista que busca algo para AHORA).
24
2-column layout PDP desktop
Redisenar las PDPs desktop con layout de 2 columnas: contenido a la izquierda + booking widget sticky a la derecha (patron estandar GYG/Tiqets/Viator). Permite al usuario leer informacion mientras ve precio y CTA.
Anexo Tecnico: Accesibilidad WCAG
Analisis de accesibilidad con accesslint y reglas WCAG 2.1 AA. El texto blanco sobre navy de TdB tiene un contraste excelente (17.82:1). El CTA principal (sticky bar) muestra rojo sobre blanco (7.42:1, PASS AA). La oportunidad de mejora esta en el par rojo sobre navy en contextos secundarios, que con un ajuste de color puede cumplir el estandar AA.
Analisis de Contraste de Color
Se midieron los pares de color de mayor impacto de la paleta de TdB:
Texto Blanco / Navy
17.82 : 1
PASS AAA
Texto Blanco / Header
12.87 : 1
PASS AAA
Texto Blanco / CTA Rojo
7.42 : 1
PASS AA
CTA Rojo / Navy
2.30 : 1
FAIL — Min. 4.5:1 requerido
Link Rojo / Navy (normal text)
3.77 : 1
FAIL para texto normal
El CTA principal (sticky bar) cumple WCAG AA: rojo (#ac0c22) sobre blanco con ratio 7.42:1.
La barra fija de compra — que es el elemento de conversion principal con el que el usuario interactua — muestra boton rojo sobre fondo blanco, superando el minimo de 4.5:1. Esto reduce significativamente la severidad del hallazgo de contraste.
Oportunidad: ajustar el contraste del rojo (#ac0c22) sobre navy (#001833) en contextos secundarios, actualmente en 2.30:1.
Este ratio aplica a elementos decorativos y contextos visuales secundarios, no al CTA principal. WCAG 2.1 AA requiere un minimo de 4.5:1. Un cambio sencillo — como anadir fondo blanco tras elementos rojos en contextos navy — resolveria esto para consistencia de accesibilidad completa.
Los pares texto-fondo principales de TdB son excelentes.
Blanco sobre navy (17.82:1) y blanco sobre header (12.87:1) superan ampliamente el nivel AAA. La paleta base es correcta — el ajuste necesario es especifico del rojo sobre navy en contextos secundarios.
Schema.org y Form Labels
| Criterio | TdB | GYG | Tiqets | Viator | Fever |
|---|---|---|---|---|---|
| Schema.org / datos estructurados | ✓ Presente (Product + Offer) | Presente | Presente | Presente | SPA (Angular) |
| Form labels HTML | Solo JS (no semantico) | Probable OK | Probable OK | Probable OK | Modales (no verificable) |
| Alt text imagenes | Generico / vacio | Probable OK | Probable OK | Probable template | Probable template |
| Heading hierarchy | h2 para "Menu" | Logica | Logica | Logica | SPA (varia) |
| Skip-to-content | Presente ("Ir al contenido") | Probable | Probable | Probable | No |
| prefers-reduced-motion | Implementado (window.matchMedia) | No verificable | No verificable | No verificable | No verificable |
| Color como unico indicador | Badges con texto | Badges + estrellas | Badges + texto | Badges + texto | Badges + ratings |
CdT ya tiene Schema.org con tipos Product y Offer (renderizado via JavaScript, confirmado en Google Rich Results Test).
Los datos estructurados incluyen Product (name: "Barcelona Bus Turistic hop on hop off"), Offer (price: 29.7, currency: EUR) y multiples variantes de oferta. El rastreo automatizado no los detecto porque se renderizan client-side, pero Google si los indexa correctamente.
Oportunidad SEO: ampliar Schema.org con BreadcrumbList y AggregateRating.
Anadir BreadcrumbList mejoraria la navegacion en resultados de busqueda. Cuando se implemente el sistema de resenas, anadir AggregateRating habilitaria estrellas en Google — el elemento visual mas impactante para CTR organico.
Los form labels de TdB se gestionan via JavaScript, no HTML semantico.
Esto significa que los lectores de pantalla pueden tener dificultades para asociar campos de formulario con sus etiquetas. La solucion es sencilla: anadir atributos
for y id correspondientes en el HTML.
Nota positiva: la plataforma Magento/Hyva de CdT ya tiene la infraestructura para gran parte de las mejoras identificadas.
Schema.org ya esta implementado (Product + Offer). Los modulos de resenas, cross-sell (recently viewed, related products) y calendario de disponibilidad existen en la plataforma pero no estan activados o visibles. Esto significa que muchas de las recomendaciones de este informe son trabajo de activacion y configuracion, no de desarrollo desde cero — lo que reduce significativamente los plazos y costes de implementacion.
Auditoria UX/UI
70+ capturas analizadas (Playwright automatizado + capturas manuales mobile Viator + Fever + verificacion manual CdT sticky CTA)
Skills: ui-ux-pro-max (10 categorias, 100+ reglas) · web-design-guidelines (HTML audit) · accesslint (WCAG)
Preparado para Turisme de Barcelona · Abril 2026
Skills: ui-ux-pro-max (10 categorias, 100+ reglas) · web-design-guidelines (HTML audit) · accesslint (WCAG)
Preparado para Turisme de Barcelona · Abril 2026