01 · Proyectos
Client confidentiel
Streaming – Plataforma por suscripción
La solicitud
Una plataforma de streaming de vídeo por suscripción de tamaño medio: 495.000 suscriptores en Francia y varios países europeos, en web, móvil, tableta y Smart TV. Rediseñaba su producto, sin lenguaje visual definido ni biblioteca, para convertir más, reducir el churn y fidelizar. Una misión de siete meses, como único diseñador, bajo acuerdo de confidencialidad.
La solución
Desde las primeras pantallas propuse construir un design system al mismo tiempo que las maquetas, con las exigencias WCAG integradas en los tokens. Entregué un kit de Figma, guidelines en PDF y un skill de Claude que controla las interfaces desarrolladas. Seis meses después del rediseño, la conversión pasa del 2,8 % al 4,1 % y el churn mensual del 7,2 % al 4,9 %.
Metodología
- Auditoría ergonómica de lo existente
- Benchmark
- Facilitación de grupos de diseño multidisciplinarios
- Modelado de recorridos de usuario
- Jerarquización de la información
- Propuesta de soluciones en wireframes
- Análisis de métricas de uso y objetivos de negocio
- Design system construido junto a las maquetas, tokens WCAG
- Diseño responsive, del móvil de 390 px a la Smart TV de 1920 px
- Guías y control de calidad de las interfaces
Auditoría de lo existente
La auditoría de la versión anterior detectó los puntos de fricción de los dos recorridos donde se producían los abandonos: la creación de cuenta y la suscripción. Para cada uno, la pantalla antes y la pantalla elegida.
Recorrido 1 · Creación de cuenta
Objetivo: crear una cuenta rápido para acceder al servicio.
Antes
Después
1.1Formulario demasiado largo
Antes: nombre, fecha de nacimiento, dirección, teléfono y correo exigidos antes de cualquier acceso.
Después: un solo campo obligatorio, el correo.
1.2Sin acceso simplificado
Antes: registro solo por formulario.
Después: «Continuar con Apple / Google» primero: cuenta creada en un gesto.
Antes
Después
1.3Reglas de contraseña ocultas
Antes: 12 caracteres, mayúscula, número y carácter especial exigidos, sin reglas visibles.
Después: reglas visibles y marcadas en directo, contraseña visible, opción sin contraseña.
Antes
Después
1.4Verificación que hace salir del sitio
Antes: un código que buscar en el correo y volver a escribir, cuenta bloqueada mientras tanto.
Después: código en la misma página, rellenado automáticamente en móvil, verificación no bloqueante.
Antes
Después
1.5Mensaje de error incomprensible
Antes: «Se ha producido un error (Error 403)».
Después: qué pasó, qué hacer, un botón de acción. Los datos se conservan.
Recorrido 2 · Suscripción
Objetivo: elegir un plan y pagar.
Antes
Después
2.1Planes difíciles de entender
Antes: tres planes con diferencias poco claras.
Después: un plan completo, solo cambia la duración, ahorro visible.
2.2Condiciones ocultas
Antes: fin de la prueba y permanencia descubiertos tarde, en letra pequeña.
Después: prueba, fecha e importe del primer pago visibles desde la elección.
Antes
Después
2.3Pago demasiado complejo
Antes: muchos campos, tarjeta escrita dos veces, sin pago exprés.
Después: Apple Pay, Google Pay, PayPal o tarjeta en tres campos.
2.4Precio que cambia al pagar
Antes: 7,99 € anunciados, otro importe al pagar.
Después: precio final con impuestos visible desde la elección y repetido sin cambios.
Antes
Después
2.5Pago rechazado sin explicación
Antes: «Tarjeta rechazada», sin motivo.
Después: motivo en lenguaje claro, ningún cargo, otro medio de pago en el momento.
Antes
Después
2.6Fechas no recordadas
Antes: ninguna fecha recordada tras suscribirse.
Después: próximos pasos con fecha, aviso antes del primer pago, baja en un clic.
Pantallas «antes» reconstruidas en wireframe a partir de la auditoría. Pantallas «después» del rediseño.
Diseño responsive
Mobile first, en seis puntos de corte. Los mismos componentes se reorganizan de un dispositivo a otro.
Base. Una columna, barra de pestañas abajo.
Rejillas de tarjetas más anchas, misma navegación.
Tres tarjetas por fila, se mantiene la barra de pestañas.
Navegación arriba, sin barra de pestañas.
Búsqueda en la cabecera, cinco tarjetas por fila.
Navegación con el mando, zona de seguridad.
Smart TV
- Lectura a 3 metros: textos y elementos más grandes.
- Navegación con el mando (D-pad): estado de foco siempre visible, sin hover.
- Zona de seguridad del 5 % (96 × 54 px) frente a los bordes recortados por algunos televisores.
- Diseñado en 1920 × 1080, exportable en 3840 × 2160 (4K).
- Registro y pago en el teléfono mediante código QR: nada que escribir con el mando.
Lo que esperaba el cliente
Seis objetivos de negocio: convertir más visitantes, reducir las bajas, fidelizar, aumentar el uso y el ingreso por suscriptor, y diferenciarse de las grandes plataformas. Los problemas detectados antes del rediseño explicaban buena parte de las pérdidas:
- una interfaz recargada, una búsqueda y unas recomendaciones poco pertinentes: encontrar qué ver llevaba tiempo;
- fichas de vídeo con poca información, lo que hacía dudar antes de reproducir;
- un registro demasiado complejo, abandonado a menudo antes de la conversión;
- una reanudación de la reproducción poco visible y una experiencia distinta en cada dispositivo;
- una gestión de la suscripción poco clara, que empujaba a darse de baja.
Los resultados, seis meses después
Conversión visitante → suscriptor
4,1 %
antes 2,8 %
Churn mensual
4,9 %
antes 7,2 %
Retención a 3 meses
79 %
antes 68 %
Net Promoter Score
+38
antes +12
| Indicador | Antes | Después |
|---|---|---|
| Abandono del registro | 56 % | 34 % |
| Clics en las recomendaciones | 12 % | 24 % |
| Tiempo de uso por semana | 4 h 20 | 6 h 10 |
| Vídeos vistos hasta el final | 42 % | 61 % |
| Satisfacción (CSAT) | 68/100 | 84/100 |
| Renovación anual | 61 % | 74 % |
| Suscriptores activos | 495.000 | 575.000 |
| Ingreso mensual estimado | 4,60 M€ | 5,38 M€ |
Dos niveles de tokens, no uno
Los valores brutos, colores, espaciados, radios, viven en una colección de primitivas. Una segunda colección, semántica, nombra las intenciones: superficie, borde, texto, estado. Los componentes solo consultan esa segunda capa. Es lo que permite cambiar un color de marca sin abrir un solo componente, y hablar con el cliente en términos de roles y no de códigos hexadecimales. La misma lógica vale más allá del color: tipografía, espaciados, radios, grosores de borde, duraciones de animación y puntos de ruptura también son variables.
bg/base apunta a color/ink/900, border/accent a color/fuchsia/500. Cambiar el fondo del producto es mover ese enlace, no abrir las pantallas.Un token semántico pone nombre a una intención. Es ese nombre, y no el color, lo que el desarrollador encuentra en el código.
Del token al componente
Los componentes están construidos con auto layout, variants y component properties, y se rellenan solo con tokens semánticos. Cuando seleccionas un modal y lees bg/overlay en su relleno en vez de un código de color, es la señal de que el sistema se sostiene: ningún valor está fijado dentro de un componente.
bg/overlay, un token y no un color.Lo que se entregó
- un kit Figma: los tokens como variables, los componentes y los patterns publicados como biblioteca de assets;
- unas guidelines en PDF: anatomía, estados, reglas de uso, restricciones de accesibilidad;
- un skill Claude de control: relee las interfaces desarrolladas y señala las desviaciones respecto a las guidelines.
El control de calidad forma parte de la entrega
Un design system se degrada en cuanto sale de Figma. El desarrollador interpreta, los casos no documentados se inventan, y seis meses después el producto ya no se parece a la biblioteca. El tercer entregable responde a eso. El skill relee las interfaces producidas, las confronta con las guidelines y devuelve las desviaciones. El control pasa a ser una etapa del desarrollo, en vez de una revisión de diseño que se va aplazando.
Accesibilidad
Las restricciones WCAG las sostienen los tokens semánticos: un par texto/superficie se valida una vez, a nivel de sistema, y todo componente que lo use hereda el contraste. Comprobar una pantalla se reduce entonces a comprobar que no ha esquivado el sistema.