Auditoría UX — Catálogo de Actividades V2
Fecha: 2026-03-21 Auditor: UX Design Review (automated) Benchmarks: GetYourGuide Supplier, Viator Partner Portal, FareHarbor Dashboard, Booking.com Extranet Pantallas auditadas: 11 screenshots del flujo completo
Inventario Visual
| # | Pantalla | Screenshot | Estado |
|---|---|---|---|
| 01 | Lista de productos — Todos |  | Funcional |
| 02 | Lista filtrada — Actividades |  | Funcional |
| 03 | Detalle — Header + Badge |  | Funcional |
| 04 | Detalle — Info (scroll) |  | Funcional |
| 05 | Pestaña Opciones y Precios |  | Funcional |
| 06 | Opción expandida con precios |  | Funcional |
| 07 | Pestaña Galería |  | Funcional |
| 08 | Pestaña Programa |  | Estado vacío |
| 09 | Pestaña Disponibilidad |  | Funcional |
| 10 | Modal — Selector de tipo |  | Funcional |
| 11 | Modal — Seleccionar proveedor |  | Funcional |
Scorecard por Pantalla
Escala 1-10 por dimensión. Benchmark: plataformas líderes de la industria.
01-02: Lista de Productos
| Dimensión | Score | Notas |
|---|---|---|
| Jerarquía visual | 7/10 | Nombre prominente, proveedor secundario, badge de tipo visible. Falta precio en la card (GetYourGuide lo muestra siempre). |
| Densidad de info | 8/10 | 4 datos por card (nombre, proveedor, tipo, descripción). Equilibrado, no sobrecargado. |
| CTAs | 6/10 | Solo el botón "+" arriba a la derecha. No hay acciones rápidas por card (editar, duplicar). Viator tiene "..." menú contextual en cada card. |
| Feedback | 7/10 | Filtros chip con estado activo claro. Falta skeleton loading al cambiar filtro. |
| Consistencia | 9/10 | Mismo patrón de cards para todos los tipos. Badge de color diferencia hotel (azul) vs actividad (verde). |
| Accesibilidad | 7/10 | Buen contraste en dark mode. Filtros tienen checkbox semántico. Falta foco visible en cards. |
Score promedio: 7.3/10
Comparación industria:
- GetYourGuide Supplier: Muestra rating + precio + ventas del mes en cada card. Bukeer muestra menos datos pero es más limpio.
- FareHarbor: Usa grid con thumbnails más grandes. Bukeer usa lista horizontal que escala mejor con muchos productos.
- Viator: Incluye estado (activo/inactivo/borrador) como badge. Bukeer podría beneficiarse de esto.
03-04: Detalle de Actividad — Header + Información
| Dimensión | Score | Notas |
|---|---|---|
| Jerarquía visual | 6/10 | El carrusel de fotos domina pero una imagen es placeholder roto (fondo gris con icono). El título está debajo del carrusel, no al lado. GetYourGuide pone título + datos clave arriba, fotos al lado. |
| Densidad de info | 7/10 | Header card tiene: nombre, ciudad, tipo, proveedor, descripción. Buena cantidad. Falta rating/popularidad. |
| CTAs | 8/10 | 3 acciones claras arriba: Duplicar, Eliminar, Editar. Iconos reconocibles. |
| Feedback | 5/10 | La imagen placeholder rota da mala impresión. Debería mostrar un placeholder con icono de actividad en vez de un recuadro gris. |
| Consistencia | 8/10 | Mismo layout que detalle de hotel. Badge "Actividad" en rojo-naranja distingue el tipo. |
| Accesibilidad | 6/10 | Los botones de acción (duplicar, eliminar, editar) no tienen labels de texto, solo iconos. Necesitan tooltips más descriptivos. |
Score promedio: 6.7/10
Hallazgo crítico — Badge del Catálogo: El badge "Actividad del Catálogo Bukeer" con "85% información completada" es un diferenciador clave. Sin embargo, queda debajo del fold — el usuario tiene que hacer scroll para verlo. En GetYourGuide, los badges de verificación están siempre en el header, visibles sin scroll.
Recomendación: Mover el badge del catálogo al header card (junto a "Actividad"), no dentro del contenido de la pestaña Información.
Comparación industria:
- GetYourGuide: Badges de "Verificado" y "Bestseller" están en la parte superior, siempre visibles.
- Booking.com Extranet: El "Quality Rating" del hotel aparece junto al nombre, nunca enterrado.
- Viator: "Top Rated" badge aparece en la card de lista Y en el header de detalle.
05-06: Opciones y Precios
| Dimensión | Score | Notas |
|---|---|---|
| Jerarquía visual | 7/10 | Opciones como cards expandibles. Badge "2" en la pestaña indica cantidad. Claro y organizado. |
| Densidad de info | 6/10 | Las opciones colapsadas solo muestran nombre. Falta preview de precio sin expandir. FareHarbor muestra precio range en la línea del nombre. |
| CTAs | 7/10 | Botón editar (lápiz) + expandir (chevron) por opción. "+ Nueva opción" visible abajo. Falta botón de "Copiar opción" para crear variantes rápido. |
| Feedback | 7/10 | Animación de expansión suave. El tab badge "2" es buen feedback pasivo. |
| Eficiencia | 6/10 | Para ver precios hay que expandir cada opción individualmente. En FareHarbor, la tabla de precios es visible por defecto. |
| Consistencia | 8/10 | Patrón de expansion cards consistente con otras secciones del producto. |
Score promedio: 6.8/10
Comparación industria:
- FareHarbor: Muestra pricing grid (opción x tipo de pasajero) como tabla, no como acordeones. Más eficiente para comparar precios entre opciones.
- GetYourGuide: Cada opción muestra "desde $X" en la línea del nombre, sin necesidad de expandir.
- Viator: Pricing calendar view — muestra precios por día. Bukeer podría agregarlo en la pestaña Disponibilidad.
07: Galería
| Dimensión | Score | Notas |
|---|---|---|
| Jerarquía visual | 5/10 | Las imágenes están en el viewport pero no son visibles en el screenshot (solo se ve la estructura de la pestaña). El contenido de la galería queda debajo del header que ocupa mucho espacio vertical. |
| CTAs | 7/10 | "Eliminar", "Establecer como principal", drag & drop para reordenar. Funcional. |
| Feedback | 6/10 | Falta indicador de cuál imagen es la principal. FareHarbor marca la principal con estrella dorada. |
| Eficiencia | 6/10 | El header card se repite en todas las pestañas, consumiendo ~50% del viewport. En Viator, el header es sticky y compacto al cambiar de pestaña. |
Score promedio: 6.0/10
Recomendación: Reducir la altura del header cuando se hace scroll o se cambia de pestaña (sticky header compacto).
08: Programa (Estado vacío)
| Dimensión | Score | Notas |
|---|---|---|
| Feedback | 8/10 | Mensaje claro: "No hay programa definido. Agrega items al programa para describir el itinerario de esta actividad". Indica qué hacer. |
| Jerarquía visual | 6/10 | El estado vacío ocupa poco espacio. Podría tener un icono ilustrativo como lo hace FareHarbor. |
Score promedio: 7.0/10
09: Disponibilidad
| Dimensión | Score | Notas |
|---|---|---|
| Potencial | N/A | Pestaña presente pero no analizable en detalle desde esta captura. La presencia de la pestaña es positiva — ningún competidor menor la tiene. |
10-11: Flujo de Creación (Modal)
| Dimensión | Score | Notas |
|---|---|---|
| Jerarquía visual | 8/10 | Modal limpio. Selector de tipo con iconos + labels. Chips claros y bien espaciados. |
| Densidad de info | 9/10 | Modal minimalista. Solo pide una decisión a la vez (primero tipo, luego proveedor). Reduce carga cognitiva. |
| CTAs | 7/10 | "Cancelar" y "Continuar" bien posicionados. Falta "Continuar" deshabilitado hasta seleccionar tipo (actualmente permite continuar sin selección). |
| Feedback | 6/10 | El selector de proveedor muestra proveedores duplicados ("Hotel Plaza" x4). Necesita deduplicación o filtro por tipo de producto. |
| Eficiencia | 5/10 | El flujo legacy (proveedor primero) requiere que el usuario sepa quién es el proveedor antes de definir la actividad. GetYourGuide y FareHarbor piden primero la actividad, luego el proveedor. El flujo catálogo V2 (origen primero) es superior pero no se activó en esta sesión. |
Score promedio: 7.0/10
Hallazgo crítico — Proveedores duplicados: La lista de proveedores muestra "Hotel Plaza" 4 veces sin diferenciación. Esto confunde al usuario. Necesita:
- Deduplicación (agrupar por nombre)
- O mostrar un identificador adicional (ciudad, ID, tipo de servicio)
Resumen Ejecutivo
Score Global: 6.8/10
| Pantalla | Score | Benchmark Gap |
|---|---|---|
| Lista de productos | 7.3 | -1.5 vs GetYourGuide (falta precio en card) |
| Detalle header + info | 6.7 | -2.0 vs Booking.com (badge enterrado, imagen rota) |
| Opciones y precios | 6.8 | -1.8 vs FareHarbor (falta pricing grid) |
| Galería | 6.0 | -2.5 vs Viator (header ocupa mucho, falta indicador principal) |
| Programa (vacío) | 7.0 | -1.0 vs FareHarbor (falta icono ilustrativo) |
| Modal creación | 7.0 | -1.5 vs GetYourGuide (proveedores duplicados, flujo invertido) |
Top 5 Hallazgos Positivos
-
Badge de Catálogo bien diseñado — "Actividad del Catálogo Bukeer" con % de completitud es un diferenciador que ningún competidor tiene exactamente así. Transmite confianza y transparencia.
-
Tab system robusto — 5 pestañas (Información, Opciones y Precios, Galería, Programa, Disponibilidad) cubren todo el espectro de gestión. FareHarbor tiene 4 pestañas, GetYourGuide tiene 3.
-
Chips de filtro en lista — Los filtros por tipo con estados activos son claros y eficientes. Mejor que el dropdown que usa Viator.
-
Modal de tipo paso a paso — Pedir primero el tipo de producto reduce errores. Diseño limpio con iconos.
-
Opciones múltiples con expansión — El patrón accordion para opciones es intuitivo y escala bien. El badge numérico en la pestaña es excelente feedback.
Top 5 Oportunidades de Mejora (priorizadas por impacto)
1. Mover badge del catálogo al header (ALTO IMPACTO)
Problema: El badge "Actividad del Catálogo Bukeer" queda debajo del fold, dentro de la pestaña Información. El usuario no lo ve al abrir la ficha.
Benchmark: GetYourGuide pone "Verified" junto al título. Booking.com muestra "Quality Rating" en el header.
Recomendación: Agregar un chip compacto junto al badge "Actividad" en el header card:
City Walking Tour — Cartagena Old Town · Cartagena
[Actividad] [Catálogo Bukeer ✓]
Proveedor: Operadora Nacional Demo
Impacto: Alto — refuerza confianza inmediatamente al abrir la ficha.
2. Mostrar precio range en cards de lista (ALTO IMPACTO)
Problema: Las cards de la lista no muestran precio. El agente debe entrar a cada actividad para ver cuánto cuesta.
Benchmark: GetYourGuide muestra "desde $25" en cada card. FareHarbor muestra rango "$25 - $45".
Recomendación: Agregar "desde $22 USD" debajo de la descripción en la card, usando el min_price de account_activities.
Impacto: Alto — reduce clics para la tarea más frecuente (comparar precios).
3. Pricing grid en vez de acordeones (MEDIO IMPACTO)
Problema: Para comparar precios entre opciones, el agente debe expandir cada opción individualmente.
Benchmark: FareHarbor muestra una tabla:
| Morning Tour | Afternoon Tour |
Adult | $45 | $40 |
Child | $25 | $22 |
Recomendación: Agregar vista "Comparar precios" como toggle en la pestaña Opciones y Precios. Mantener los acordeones como vista por defecto para detalle individual.
Impacto: Medio — acelera comparación para agencias con muchas opciones.
4. Fix imagen placeholder rota (MEDIO IMPACTO)
Problema: La primera imagen del carrusel muestra un recuadro gris con icono de imagen rota. Da impresión de producto incompleto.
Benchmark: Todos los competidores usan placeholder con icono del tipo de producto y color de marca.
Recomendación: Reemplazar imagen rota con placeholder M3: fondo surfaceContainerHighest + icono hiking (actividad) centrado + texto "Sin imagen".
Impacto: Medio — primera impresión visual del producto.
5. Header compacto al hacer scroll/cambiar pestaña (BAJO IMPACTO)
Problema: El header (carrusel + card info) ocupa ~60% del viewport en todas las pestañas. Al ir a Opciones o Galería, el contenido relevante queda muy abajo.
Benchmark: Viator colapsa el header a una barra compacta (título + acciones) al hacer scroll. Booking.com hace lo mismo.
Recomendación: Implementar SliverAppBar con header que se colapsa a solo título + botones de acción al hacer scroll.
Impacto: Bajo — mejora de eficiencia, no bloquea funcionalidad.
Comparación Directa con Competidores
| Feature | Bukeer | GetYourGuide | FareHarbor | Viator |
|---|---|---|---|---|
| Cards con precio | No | Sí ("desde $X") | Sí (rango) | Sí |
| Badge verificación | Sí (en tab) | Sí (header) | No | Sí (header) |
| Multi-opción | Sí (accordion) | Sí (lista) | Sí (grid) | Sí (lista) |
| Pricing grid | No | No | Sí | No |
| Galería drag & drop | Sí | Sí | Sí | No |
| Estado vacío descriptivo | Sí | Sí | Sí (con ilustración) | No |
| Calendario disponibilidad | Sí (tab) | Sí | Sí (integrado) | Sí |
| Header compacto scroll | No | No | Sí | Sí |
| Filtros chip | Sí | Dropdown | Sí | Dropdown |
| Dark mode | Sí | No | No | No |
Ventaja competitiva de Bukeer: Dark mode nativo + filtros chip + 5 pestañas de gestión + badge de catálogo con % completitud.
Gaps principales: Precio en cards de lista + badge en header + pricing grid comparativo.
Próximos Pasos Recomendados
| Prioridad | Cambio | Esfuerzo | Impacto |
|---|---|---|---|
| P0 | Fix imagen placeholder rota | 1h | Visual inmediato |
| P1 | Mover badge catálogo al header | 2h | Confianza + diferenciación |
| P1 | Precio "desde $X" en cards de lista | 3h | Eficiencia del agente |
| P2 | Pricing grid comparativo | 8h | Power users |
| P3 | Header compacto con scroll | 4h | Usabilidad general |
| P3 | Deduplicar proveedores en modal | 2h | Reduce confusión |