Evaluación UI/UX de KF Streaming — qué copiar, qué superar y cómo montar una landing más amigable
Benchmark visual del catálogo kfstreaming.com (landing retail de licencias digitales) contra nuestra landing de revendedores (StreamingApps v3.8). Objetivo del cliente: que la nuestra se vea más chévere y moderna que la de ellos, replicando lo que KF hace bien y corrigiendo lo que la hace frágil — con un plan de mejoras priorizado, medible y acorde al Design System AMR (navy/púrpura, sin CDNs, COP + US$ ya activo).
Metodología
Playwright headless (Chromium 1.63): desktop 1440px full-page, hero 1440×900, ficha de producto y móvil 390px full-page de kfstreaming.com + nuestra landing en 1440px.
Lectura visual sección por sección (header, hero, proceso, catálogo, ficha, footer) + DOM/HTTP previo (títulos, 200 OK) para confirmar estructura real.
7 ejes: impacto del hero, navegación, catálogo, conversión de ficha, confianza/prueba social, móvil y fricción general — puntuados 1–10 lado a lado.
Cada hallazgo clasificado REPLICAR / SUPERAR / OMITIR con esfuerzo y fase (P0/P1/P2) listo para ejecutar sobre index.php sin romper ?t=ALD ni el toggle COP/US$.
1 · Evidencia fotográfica (5 capturas)
Capturas originales en auditorias/assets/kfstreaming/ (recortes full-page con scroll interno para lectura en pantalla).
2 · Benchmark lado a lado (7 dimensiones)
| Dimensión | KF Streaming | Nuestra landing | KF | Nosotros | Ganador / acción |
|---|---|---|---|---|---|
| Impacto del hero | Fondo casi negro + glow rojo radial, pill de marca, titular bicolor (rojo/blanco), 3 CTAs (primario/ghost/outlined) y barra de stats (23+ productos · 24/7 · 3.593+ ventas). | Banner «Invitación privada», titular bicolor navy/cyan con «Web-App» degradado, panel lateral de 3 demos en vivo con estado LIVE, chips de tipo de cliente y 2 CTAs. | 8.5 | 8.0 | KF → copiar la barra de stats con NUESTROS números |
| Navegación | Header sticky con nav de emojis (🎮 Juegos, 💳 Recargas, 🛒 Carrito…), pill «USDT 🇻🇪», carrito rojo con contador, dot verde de estado — en 1440 el nav ya envuelve a 2 líneas. | Nav compacta de pills (Planes Web-App, Demo Streaming, Demo Tienda, Demo Puntos) + CTA primario «Activar Web-App». Sin wraps, sin ruido. | 7.0 | 8.5 | NOSOTROS → no copiar emojis; añadir solo el pill de moneda (ya existe el toggle) |
| Catálogo / hallazgo | Buscador + botón, banner promo (Free Fire con código de referido), chips de categoría (Todos/Streaming/Software/Juegos), grid de 4 columnas con imagen, pill de categoría, bullets, «Desde X USDT», dot de disponibilidad y CTA a ancho completo. | No tiene catálogo de productos: es una landing B2B con secciones (demo, modelo de negocio, ejemplos de catálogo, 4 pasos del asesor, planes de desarrollo, FAQ). | 9.0 | 6.0 | KF → añadir grid de licencias destacadas con chips y «desde» |
| Ficha / conversión | Breadcrumb, variantes con precio por periodo (1 Mes 1.80 / 6 Meses 4.50 USDT), stepper de cantidad, descuento por volumen (5–9 = 5%, 10–14 = 10%…) pensado para revendedores, panel TOTAL, acordeón de descripción. | Planes de desarrollo en COP con badge «MÁS POPULAR», cupos, features con checks y CTA. Con toggle «Ver en US$». Sin stepper ni tabla de volumen. | 8.5 | 7.5 | SUPERAR → su volumen es genérico; el nuestro puede ser real (cupos/cantidades B2B) |
| Confianza / prueba social | Solo la barra de stats (3.593+ ventas). Sin testimonios, sin FAQ, sin logos de clientes, sin garantías visibles. | FAQ de 4 preguntas, demos en vivo con etiquetas (Streaming/Tienda/Puntos), separación estratégica clara, footer con v.3.8 y firma AMR TECH. | 6.5 | 7.5 | SUPERAR → añadir testimonios + métricas en vivo (a ambos les falta) |
| Móvil (390px) | Full-page 6074px: grid de 2 columnas, chips con scroll horizontal, buscador a ancho completo, header sticky. Correcto, pero la página es muy larga y los bullets se cortan con «…». | Diseño responsive por breakpoints Tailwind; el hero con panel de demos lateral colapsa bien; secciones apiladas. | 8.0 | 8.0 | EMPATE → copiar chips scrollables y grid 2 col; evitar bullets truncados |
| Fricción / amigabilidad | Precios solo en USDT, sin moneda local, sin WhatsApp flotante aparente, H1 genérico «Detalle del producto», enlaces muertos (#), pasos «¿Cómo funciona?» con la misma mascota repetida 4 veces. |
COP + US$ con auto-detección por país (TRM+4%), ruta clara de asesor en 4 pasos («el primer asesor que toma el lead queda responsable»), CTA único claro por sección. | 7.0 | 8.5 | NOSOTROS → ya ganamos en moneda; añadir float de WhatsApp para cerrar el gap |
| PROMEDIO | Catálogo excelente · confianza floja | B2B claro · falta catálogo visual | 7.8 | 7.5 | Δ 0.3 — recuperable en P0/P1 |
3 · REPLICAR — los 9 aciertos de KF que sí valen
«23+ productos · Soporte 24/7 · 3.593+ ventas» bajo los CTAs. Prueba social en el primer pliegue. Nuestros datos reales: v3.8, 3 demos en vivo, X revendedores, pedidos procesados.
Todos / Streaming / Software / Juegos con estado activo resaltado. Aplican a nuestro nav por sección (Planes, Demos, Precios, FAQ) como scroll-spy, y a un futuro catálogo de licencias.
Precio ancla («Desde 1.99 USDT»), pill de categoría sobre la imagen, bullet corto y dot verde de disponibilidad. Barato de implementar y sube la conversión del click.
Tabla «5–9 = 5%, 10–14 = 10%» en la ficha. Su versión es genérica; la nuestra puede ser real: cupos de dominio, cantidad de sitios, descuento B2B por volumen de revendedor.
− / cantidad / + con cálculo de total en vivo. Para nosotros: «¿cuántos sitios / dominios / meses quieres?» que recalcule la estimación COP/US$.
Free Fire con código de referido y fecha. Nosotros: campaña «invitación privada» con código de cupo/aliado visible y expiración (refuerza la escasez del hero).
4 cards con números ghost 01–04. Nosotros ya tenemos «4 pasos del asesor» — elevarlos visualmente con ghost numbers y conectores, mismo patrón pero con contenido propio.
Input + botón rojo «Buscar» sobre el grid. Útil cuando el catálogo pase de 12+ licencias; en P1 convive con los chips.
A 390px KF muestra 2 cards por fila con CTA a ancho completo — buen uso del espacio. Aplicar a nuestras cards de planes/demos en móvil.
4 · SUPERAR (6) y OMITIR (7) — las debilidades de KF
href="#" (Footer/legales). Cada CTA nuestro apunta a ruta real.5 · Plan para una landing más moderna y amigable (3 fases)
- 1. Barra de stats bajo el hero con números reales (v3.8 · demos · revendedores · pedidos).
- 2. Mostrar precios COP/US$ visibles en todas las cards de planes (hoy dependen de
?t=ALD). - 3. Float de WhatsApp → enlace del asesor (captura directa al CRM).
- 4. Chips/scroll-spy en el nav por sección (patrón de chips de KF, sin emojis).
- 5. Banner de campaña con código de cupo y expiración (reemplaza/ba el «invitación privada»).
- 6. Grid «Licencias destacadas» estilo KF: imagen, pill categoría, «desde», dot de disponibilidad, 1 CTA por card (2 col móvil / 4 col desktop).
- 7. Ficha con variantes (1/6/12 meses) + stepper de cantidad + tabla de volumen B2B real (cupos/dominios) con total en vivo COP/US$.
- 8. Buscador sobre el catálogo + empty-state con sugerencias.
- 9. Rediseñar «4 pasos del asesor» con ghost numbers 01–04 y conectores (contenido propio, iconos distintos).
- 10. Testimonios de revendedores (3–6) + logos/métricas en vivo (uptime, pedidos hoy).
- 11. FAQ ampliado a 6–8 preguntas (precios, comisiones, tiempos, Dropi, puntos).
- 12. Guardar accesibilidad: contraste AA en bullets, targets ≥44px, focus visible, alt reales en imágenes.
- 13. QA responsive 390/768/1440 con capturas Playwright (regresión visual).
index.php existente + Design System AMR (navy/púrpura, glassmorphism), sin CDNs (Tailwind local /assets/tailwind.min.js), sin romper ?t=ALD ni el toggle COP/US$ (commit cbdf027), sin instalar paquetes, sin romper interfaces existentes (Open/Closed), UI copy en español colombiano y commit en inglés en rama dev. Verificación: php tests/run_all_tests.php + capturas antes/después.
Bitácora del informe
- 20:05 — Instalación de Playwright Chromium (headless shell) y capturas de kfstreaming.com: hero, full-page desktop (1440×4361), ficha de producto y full-page móvil (390×6074).
- 20:10 — Captura de nuestra landing revendedores (1440×4775) y verificación HTTP de títulos de ambos sitios (KF: «Licencias digitales» · ours: «Oferta privada para revendedores»).
- 20:13 — Evaluación visual por secciones y puntuación en 7 dimensiones; clasificación de hallazgos en REPLICAR (9) / SUPERAR (6) / OMITIR (7).
- 20:16 — Blueprint de 3 fases (P0 1–2 d, P1 3–4 d, P2 2 d) con restricciones técnicas (Design System AMR, sin CDNs, COP/US$ intacto).
- 20:17 — Publicación en
auditorias/44-auditoria-ui-ux-kfstreaming-vs-streamingapps.html+ fila e incremento de contador enauditorias/index.html.