Trabajo / Producto UX/UI / GAME TV · Retina
El canal de las tiendas, desde una sola mesa
Proyecto 09 de 28 del archivo 09 de 09 en Diseño de producto UX/UI Ver la disciplina completa ↗
Cientos de pantallas y ningún mando a distancia
En cada tienda GAME hay pantallas emitiendo tráilers, lanzamientos y promociones. Lo que no había era una forma central de gobernarlas: decidir qué se ve, en qué tiendas y entre qué fechas era un proceso repartido entre correos, carpetas compartidas y buena voluntad.
Retina nace para cerrar ese hueco. Es la plataforma de GAME TV: el equipo de marketing y los responsables de merchandising montan una secuencia — vídeo, imagen y audio en una línea de tiempo —, eligen las tiendas o los grupos que la van a emitir y le ponen fecha de inicio y de fin. El resto lo hace el sistema.
El reto de diseño estaba en el equilibrio: por debajo es un editor de vídeo, con canales, pistas y propiedades por clip; por encima tenía que poder usarlo alguien cuyo trabajo no es editar vídeo, sino que la campaña del viernes llegue a las 230 tiendas a la vez.
Pantallas diseñadas
Con sus estados: listados, vacíos, modales y erroresMódulos
Edición, secuencias, tiendas, archivos, plantillas y usuariosPerfiles de uso
Administrador y merchan, con permisos distintosAcento de color
Un teal de neón sobre una interfaz casi negraPor qué la interfaz es oscura
No es una preferencia estética: es la convención de las herramientas de vídeo, y aquí el contenido es el protagonista. Sobre un fondo casi negro, la previsualización y las miniaturas se ven con el color real con el que van a salir en las pantallas de tienda, y la interfaz desaparece alrededor.
Un sistema corto, fijado antes que las pantallas
Antes de dibujar el editor se fijaron los fundamentos en Figma: color, tipografía y componentes, cada uno en su tablero. Con 47 pantallas por delante, cada decisión que se toma una sola vez es una decisión que no hay que discutir 47 veces.
La paleta es deliberadamente estrecha: dos escalas de neutro — una oscura para la herramienta y una clara para superficies y documentos —, un único acento teal que señala todo lo accionable, y los cuatro colores de estado. Nada más.
Color
El teal es la marca de GAME TV y se comporta como un neón: es el trazo del triángulo del login, el borde que recorre los paneles de propiedades y el color de todo lo que se puede pulsar. Los neutros oscuros construyen la herramienta; los claros, las superficies que emergen de ella.
#0AB7B8Acciones, enlaces, estado activo y el neón#268C8CHover y elementos secundarios#174749Superficies teñidas y degradados#0E3B3EEl extremo oscuro de los degradados#000000El lienzo de toda la herramienta#101114Paneles y barras#21262CTarjetas, filas y campos#AFB2BCTexto secundario sobre oscuroLos cuatro estados
En una plataforma de emisión casi todo lo importante es el estado de algo: una secuencia en emisión, una subida en curso, un aviso de solape, un error de archivo. Cuatro colores, siempre los mismos, para que el ojo no tenga que aprender nada nuevo en cada módulo.
#30E584Emitiendo · subida completada#FFDB45Pendiente · solape de fechas#4694FFNotas y estados neutros#F2254FFallo de archivo · secuencia caídaTipografía
Una sola familia para toda la plataforma: DM Sans. Geométrica y de ojo grande, aguanta bien los cuerpos pequeños de las tablas y los códigos de tienda, y su redondez le quita dureza a una interfaz que, de serie, ya es oscura y técnica.
El tablero de color, con las dos escalas
El tablero no enseña colores sueltos: enseña las dos escalas enteras y los degradados de marca, con su valor escrito al lado. Los degradados teal — de #0AB7B8 a #0E3B3E — son los que visten las miniaturas de audio y la zona de importación, y están definidos aquí una vez, no improvisados pantalla a pantalla.
Figma · Game TV Design — Colors2 escalas · 1 acento · 4 estados
Tipografía documentada, no supuesta
DM Sans, con sus pesos y sus cuerpos de párrafo, en su propio tablero. Parece poco y es justo lo que necesita quien maqueta después: saber qué familia, qué pesos y en qué se usa cada uno, sin adivinarlo inspeccionando pantallas.
Figma · Game TV Design — Typography1 familia · 3 pesos
El neón no es decoración: es jerarquía
El trazo de neón que dibuja polígonos por la interfaz — el triángulo del login, el pentágono alrededor de las propiedades, el marco de los modales — hace un trabajo concreto: señala dónde está la acción de la pantalla. En una herramienta oscura y densa, es el equivalente a subrayar con luz la única zona que importa ahora.
Un editor de vídeo que no asusta
La pantalla central de Retina se organiza como cualquier editor profesional — y a la vez, como ninguno. A la izquierda, los documentos: todo lo que se ha importado, con su miniatura. En el centro, la previsualización con sus controles de reproducción. A la derecha, las propiedades del clip: fechas de inicio y fin, duración, grupo y tienda. Abajo, el canal: la línea de tiempo donde los clips se arrastran, se ordenan y se recortan.
La diferencia con un editor de verdad está en lo que no hay: ni efectos, ni transiciones, ni ajustes de color. Cada cosa que se quitó es un error que ya no se puede cometer a las once de la noche antes de un lanzamiento.
Vídeo, imagen y audio en el mismo gesto
Un clip de vídeo, una imagen estática y una cuña de audio se comportan igual: se arrastran del panel de documentos al canal, y sus propiedades se editan en el mismo panel derecho. Aprender un módulo es aprenderlos todos — la pista de audio sólo cambia la previsualización por su forma de onda.
De la mesa de montaje a 230 tiendas
Una secuencia es la unidad de trabajo de Retina: un montaje con nombre, fecha de inicio y fecha de fin. El listado las enseña como una tabla plana — id, nombre, inicio y fin — con búsqueda por nombre, id o fecha, porque así es como el equipo pregunta por ellas.
Crear una nueva pide exactamente tres campos, y el cuarto paso es el importante: elegir las tiendas. El selector permite marcar tienda a tienda, aplicar una plantilla guardada o tirar de grupos — Península, Canarias — y deja las elegidas a la vista como fichas que se quitan con una equis.
La decisión que evita el error grave
El error más caro de una plataforma así no es estético: es emitir la campaña equivocada en las tiendas equivocadas. Por eso las tiendas seleccionadas no se esconden detrás de un contador — quedan desplegadas como fichas visibles antes de crear la secuencia, y quitarse una cuesta un clic, no una búsqueda.
La administración, con el mismo lenguaje
Alrededor del editor hay tres módulos de gestión, y los tres hablan igual: tabla oscura, búsqueda arriba, acciones a la derecha de cada fila. Las tiendas se listan con su código, su nombre y su dirección completa, y se agrupan — Península, Canarias — para no tener que seleccionar 230 casillas cada vez.
Los archivos entran por una pantalla de importación con arrastrar y soltar, tres puertas claras — imagen, vídeo, audio — y el límite de 500 MB escrito donde se ve, no en un mensaje de error después de esperar la subida.
Y los usuarios se administran con dos perfiles: administrador, que gobierna la plataforma, y merchan, que monta y emite. Cada uno ve lo suyo, y el listado enseña el perfil de cada persona junto a su id corporativo.
Arquitectura y flujos
Del montaje a la emisión, sin manual47 pantallas
Editor, listados, modales y estadosSistema de diseño
Color, tipografía y componentes en FigmaLenguaje propio
El neón de GAME TV, llevado a interfazDe tres horas a cuarenta y cinco minutos
Preparar una campaña para las pantallas de tienda pasó de unas tres horas a unos cuarenta y cinco minutos. No es una estimación de despacho: es lo que cuentan las dos personas de central que montaban la emisión cada semana, antes y después de Retina.
Buena parte del ahorro está en la unificación: donde antes había tres aplicaciones — una para el vídeo, otra para el hilo musical y otra para las campañas — ahora hay una sola plataforma, y las 230 tiendas emiten desde ahí.
Preparar una campaña
Medido con las dos personas de central que lo hacíanAplicaciones unificadas
Vídeo, hilo musical y campañas, en una sola plataformaTiendas emitiendo
Toda la red GAME programa desde la plataformaEmpresas la han comprado
Vendida como producto bajo la marca RetinaDe herramienta interna a producto
GAME dejó de usar la plataforma solo en casa: la vende a otras cadenas con pantallas en tienda bajo el nombre comercial Retina. Al menos dos empresas la han comprado ya.
Siguiente en Diseño de producto UX/UI
Viajero, aplicación para iOS y Android