Elena de Gregorio®
Disponible para 2026
EN ES

Trabajo / Producto UX/UI / GAME TV · Retina

El canal de las tiendas, desde una sola mesa

Preparar una campaña para las pantallas de tienda pasó de unas tres horas a unos cuarenta y cinco minutos, según las dos personas de central que lo hacían cada semana. Y GAME dejó de usarla solo en casa: la vende a otras cadenas con pantallas en tienda bajo el nombre comercial Retina.

Retina es la plataforma interna de GAME TV: el sitio desde el que se decide, se monta y se emite lo que aparece en las pantallas de las 230 tiendas GAME. Un editor de secuencias con línea de tiempo, disfrazado de herramienta sencilla.

Plataforma de emisión — 2024

Proyecto 09 de 28 del archivo 09 de 09 en Diseño de producto UX/UI Ver la disciplina completa ↗

GAME TV · Retina — la pantalla de acceso, con el triángulo de neón y el logotipo GAME TV

Cliente

GAME

Disciplina

Diseño de producto UX/UI

Año

2024

Rol

UX, UI y sistema de diseño

(01) — El encargo

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.

47

Pantallas diseñadas

Con sus estados: listados, vacíos, modales y errores
6

Módulos

Edición, secuencias, tiendas, archivos, plantillas y usuarios
2

Perfiles de uso

Administrador y merchan, con permisos distintos
1

Acento de color

Un teal de neón sobre una interfaz casi negra

Por 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.

(02) — Los fundamentos

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.

Teal · base#0AB7B8Acciones, enlaces, estado activo y el neón
Teal · medio#268C8CHover y elementos secundarios
Teal · profundo#174749Superficies teñidas y degradados
Teal · sombra#0E3B3EEl extremo oscuro de los degradados
Neutro 02 · fondo#000000El lienzo de toda la herramienta
Neutro 02 · panel#101114Paneles y barras
Neutro 02 · elevado#21262CTarjetas, filas y campos
Neutro 02 · texto suave#AFB2BCTexto secundario sobre oscuro

Los 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.

Éxito#30E584Emitiendo · subida completada
Aviso#FFDB45Pendiente · solape de fechas
Información#4694FFNotas y estados neutros
Error#F2254FFallo de archivo · secuencia caída

Tipografí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.

Título · DM Sans Bold · 24/32Nueva secuencia
Cuerpo · DM Sans Medium · 16/24Secuencia Canarias — Renoves
Dato · DM Sans Regular · 13/20C.C. Alcalá Magna, Cuesta de Teatinos, s/n local 87
Etiqueta · DM Sans Medium · 11/1600:05:15 — 00:15:40

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

Tablero de color del sistema: escala de neutros claros, escala de neutros oscuros, escala teal con sus degradados y los cuatro colores de estado con sus valores
Sistema · ColorsDos neutros, un acento, cuatro 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

Tablero de tipografía del sistema: la familia DM Sans con sus pesos y párrafos de ejemplo
Sistema · TypographyDM Sans, para todo

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.

(03) — El editor

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.

El editor de Retina: biblioteca de documentos a la izquierda, previsualización del vídeo en el centro, panel de propiedades a la derecha y la línea de tiempo del canal abajo
Edición · La mesa de montajeDocumentos, previsualización, propiedades y canal
El editor con el panel de propiedades destacado por un trazo de neón: descripción, audio, fechas de inicio y fin, duración, grupo y tienda del clip
Propiedades del clipEl neón señala dónde se decide
El editor en modo audio: la forma de onda del archivo en la previsualización y su pista en la línea de tiempo del canal
Modo audioLa misma mesa, con forma de onda

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.

(04) — Secuencias y emisión

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.

Listado de secuencias: tabla con id, nombre, fecha de inicio y fecha de fin, con una fila seleccionada en teal
Secuencias · ListadoId, nombre, inicio y fin
Modal de nueva secuencia sobre el listado atenuado: nombre, fecha de inicio, fecha de fin y el enlace para seleccionar tiendas, con el trazo de neón alrededor
Nueva secuenciaTres campos y las tiendas
Modal de selección de tiendas: lista con casillas de verificación, selector de plantilla y las tiendas elegidas como fichas eliminables en la parte inferior
Selección de tiendasUna a una, por plantilla o por grupo

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.

(05) — Tiendas, archivos y usuarios

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.

Listado de tiendas: código, nombre y dirección completa de cada tienda GAME, con una fila seleccionada en teal
Tiendas · ListadoCódigo, nombre y dirección
Pantalla de importación de documentos: zona de arrastrar y soltar sobre degradado teal, con los botones de añadir imagen, vídeo y audio y el límite de 500 MB
Archivos · ImportarImagen, vídeo o audio · 500 MB
Listado de usuarios: nombre, id corporativo y perfil de cada persona — administrador o merchan — con sus acciones por fila
Usuarios · ListadoAdministrador y merchan
UX

Arquitectura y flujos

Del montaje a la emisión, sin manual
UI

47 pantallas

Editor, listados, modales y estados
DS

Sistema de diseño

Color, tipografía y componentes en Figma
ID

Lenguaje propio

El neón de GAME TV, llevado a interfaz
(06) — El resultado

De 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í.

3 h → 45 min

Preparar una campaña

Medido con las dos personas de central que lo hacían
3 → 1

Aplicaciones unificadas

Vídeo, hilo musical y campañas, en una sola plataforma
~230

Tiendas emitiendo

Toda la red GAME programa desde la plataforma
2

Empresas la han comprado

Vendida como producto bajo la marca Retina

De 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