Inicio Proyectos Sobre mí
UI / UX Case Study

Netflix Cinema

Diseño de un sistema de venta de entradas y reserva de menús integrado en la App de Smart TV de Netflix.

Contexto TFM Máster UX/UI
Rol E2E Product Design
Plataforma TV App (10-foot UI)
Netflix Cinema TV Interface
01. El Origen

De la idea de negocio a la pantalla

Este proyecto es la tangibilización de un Plan de Marketing previo (TFM anterior), donde definí el modelo de negocio de 'Netflix Cinema': una red de cines físicos exclusivos para estrenos de la plataforma.

El Reto UX:

Diseñar un flujo de compra complejo (butacas + menú personalizado + pago) operable únicamente con un mando de TV (navegación de 4 direcciones), sin teclado ni ratón.

02. Contexto & Benchmark

Del Streaming a la Butaca

2.1. El Problema

El proyecto nace para tangibilizar una estrategia de negocio: crear cines físicos exclusivos de Netflix. El reto es diseñar la interfaz de compra digital (TV, Web y App) que hoy no existe.

Objetivos de Negocio
  • Asistencia del 1% de suscriptores (50k personas/año).
  • Aumentar +50.000 nuevos suscriptores a la plataforma.
Objetivos Digitales
  • 70% de entradas vendidas vía App (TV/Móvil).
  • 50% de conversión de no-suscriptores en la Web.

2.2. Benchmark del Mercado

A. Streaming (VOD)

Netflix lidera (60-73% cuota) gracias a su usabilidad y contenido propio. Competidores como Prime Video y Disney+ crecen rápido, pero la principal amenaza sigue siendo la piratería.

B. Exhibición (Cines)

Las webs (Kinépolis, Yelmo, Cinesa) son funcionales pero visualmente anticuadas. Kinépolis destaca en info de accesibilidad, Cinesa en mapa visual y Yelmo falla por sobrecarga de iconos.

2.3. Propuesta de Valor:

Unificar el ecosistema digital y físico. Implementar la compra directa en TV (innovación única en el mercado) y utilizar las salas físicas para ganar prestigio (premios) y ofrecer exclusividad VIP.

03. Investigación

Comprendiendo al espectador

Investigación cualitativa mediante 7 entrevistas en profundidad a usuarios (23-32 años) activos en VOD y asistentes frecuentes al cine (>6 veces/año).

3.2. Insights Principales

01. Hábitos

Netflix es la favorita indiscutible. El PC es el dispositivo principal para gestión, pero la TV para consumo.

02. Experiencia

Valoran el "evento social" y la pantalla grande por encima de la película. Fidelidad al cine por cercanía/comodidad.

03. Pain Points

Online: Gastos de gestión y fallos técnicos.
Offline: Colas para palomitas y riesgo de "Sold Out".

04. Expectativas

Tope 10€/entrada. Esperan beneficios VIP (descuentos, combos) y funciones avanzadas (comida in-app).

3.3. User Persona

User Persona Felipe

Felipe, 26

Estudiante Máster Ciberseguridad

"Si pudiera ir a diario al cine, lo haría, pero no me da la economía... por eso Netflix es un buen amigo."

Cinéfilo Independiente Creativo

Bio & Comportamiento

Ingeniero informático y estudiante de Máster. Trabaja a tiempo parcial en comida rápida. Comparte cuentas de streaming (Netflix, HBO, Disney+) con su familia para ahorrar. Es el referente de cine en su grupo de amigos.

Motivaciones

  • Calidad de imagen/sonido superior.
  • Socializar y comentar la película.
  • Descuentos y fidelización.

Frustraciones

  • Precios abusivos en entradas.
  • Palomitas rancias o colas.
  • Retrasos en estrenos.

3.4. Customer Journey Map

Mapeado de la experiencia desde el descubrimiento en Redes Sociales hasta la descarga de la entrada.

Fase 01

Atención

Touchpoint Ve anuncio en IG y link a Blog Oficial.
Pensamiento ¿Es real? Curiosidad por si es "fake".
Curiosidad
Fase 02

Interés

Acción Entra a la App y ve el nuevo botón.
Validación Verlo en la App oficial le da confianza.
Confianza
Fase 03

Deseo

Exploración Navega el catálogo y ve tráilers.
Pain Point Duda qué elegir (Parálisis por análisis).
Indecisión
Fase 04

Acción

Selección Elige butacas y añade menú.
Pago Cargo a suscripción (Invisible).
Interés
Fase 05

Logro

Resultado Recibe QR y entradas en App móvil.
Wow Effect Es más cómodo que el PDF clásico.
Satisfacción
04. Prototipado & Design System

De la servilleta al píxel

1. Identidad Visual

Creación del isologo 'Netflix Cinema' integrando la marca en el entorno de salas oscuras.

Netflix Cinema Logo

2. Wireframes Lo-Fi

Definición de la navegación por cruceta (D-Pad).

Wireframes

3. TV Design System (10-foot UI)

A. Fundamentos Visuales Interaction & Assets
A. Paleta Principal
Primario#E50914
Secundario#1E1E1E
Terciario#F2F2F2
B. Escala Cromática
100%
80%
60%
100%
40%
60%
100%
Primario
Secundario
Terciario
Feedback UI
Éxito #46D369
Type. Escala Tipográfica
Título H1
56pt Black
Título H2
52pt Medium
Subtítulo H3
36pt Black
Etiqueta Botón
32pt Bold
Texto Cuerpo
28pt Regular
B. Componentes UI Interaction & Assets
Estados de Interacción
CTA Primario ESTADO: FOCUS
Primary Focus
CTA Primario ESTADO: REPOSO
Primary Rest
CTA Secundario ESTADO: FOCUS
Secondary
Comportamiento Poster
Poster Rest REPOSO
Poster Focus FOCUS (Escala)
Componentes de Cine
01. Iconografía Butacas
Libre
Tu Selección
Ocupada
02. Tarjetas Upselling
Palomitas ESTADO: REPOSO
Menús ESTADO: FOCUS
03. Métodos de Pago
Payment Selected ESTADO: SELECCIONADO
Payment Focus ESTADO: FOCUS (ACTIVO)
Payment Rest ESTADO: REPOSO
05. Solución UI

10-Foot Experience

Diseño adaptado a la navegación por focos (mando de TV). Sin cursor, con estados 'Active' claros y tipografía optimizada para lectura a 3 metros.

Selección de Butacas

He simplificado el mapa de la sala a una retícula intuitiva. El foco visual indica claramente la posición actual y el estado de las entradas (Libre, Ocupado, Seleccionado).

Seat Selection Interface

Reserva de Menú

Estrategia de upselling integrada. El usuario puede añadir palomitas o bebidas con un solo clic antes de confirmar el pago, replicando la experiencia física del cine.

Menu Reservation Interface
06. Prototipo Interactivo

Navega el diseño

Este prototipo de alta fidelidad es funcional. Puedes interactuar directamente con la ventana inferior para simular la experiencia de navegación con el mando de TV (haz clic para empezar).

*Si el prototipo no carga correctamente, puedes abrirlo aquí ↗

07. Test & Resultados

Validación con usuarios

Test realizado con 18 usuarios mediante Useberry. Los datos cuantitativos validaron la usabilidad.

SUS Score
83.19

System Usability Scale.
'Grado: Excelente'

NPS
38.8%

Net Promoter Score.
Alto potencial de recomendación.

08. Siguientes Pasos

Iteraciones & Roadmap

Evolución propuesta para el proyecto a nivel de experiencia (UX) y de estrategia de producto (Business).

🎨 Evolución UX/UI

  • Compra completa en Mobile Adaptar el flujo de selección de butacas y pago a dispositivos móviles (Responsive).
  • Second Screen & Wallet Uso del móvil como teclado auxiliar y almacenamiento de entradas digitales.
  • Accesibilidad (A11y) Auditoría de contrastes y tamaños para garantizar legibilidad a 3 metros (WCAG 2.1 AA).

🚀 Roadmap de Producto

  • Comandos de Voz Integración con asistentes de TV para compras rápidas.
  • Social Booking Funcionalidad para invitar amigos o pagar a medias.
  • Cinema Pass Estudiar la integración de una tarifa plana de cine físico dentro de la suscripción Netflix Premium.