Elena de Gregorio®
Available for 2026
EN ES

Work / Product UX/UI / GAME TV · Retina

The stores' channel, run from one desk

Preparing a campaign for the store screens went from about three hours to about forty-five minutes, according to the two people at head office who did it every week. And GAME stopped keeping it to itself: it sells it to other chains with in-store screens under the commercial name Retina.

Retina is GAME TV's internal platform: the place where what plays on the screens of the 230 GAME stores gets decided, assembled and broadcast. A timeline-based sequence editor, dressed up as a simple tool.

Broadcast platform — 2024

Project 09 of 28 in the archive 09 of 09 in Product design UX/UI See the whole discipline ↗

GAME TV · Retina — the login screen, with the neon triangle and the GAME TV wordmark

Client

GAME

Discipline

UX/UI product design

Year

2024

Role

UX, UI and design system

(01) — The brief

Hundreds of screens and no remote control

Every GAME store has screens playing trailers, releases and promotions. What it didn't have was a central way to govern them: deciding what plays, in which stores and between which dates was a process scattered across emails, shared folders and goodwill.

Retina was born to close that gap. It is the GAME TV platform: the marketing team and merchandising leads assemble a sequence — video, image and audio on a timeline —, pick the stores or groups that will play it, and give it a start and an end date. The system does the rest.

The design challenge was the balance: underneath, it is a video editor, with channels, tracks and per-clip properties; on the surface it had to be usable by someone whose job is not editing video, but making sure Friday's campaign reaches 230 stores at once.

47

Screens designed

With their states: lists, empties, modals and errors
6

Modules

Editing, sequences, stores, files, templates and users
2

User profiles

Administrator and merchandiser, with different permissions
1

Accent colour

A neon teal over a near-black interface

Why the interface is dark

It is not an aesthetic preference: it is the convention of video tools, and here the content is the star. On a near-black background, the preview and the thumbnails show the exact colour they will have on the store screens, and the interface disappears around them.

(02) — The foundations

A short system, fixed before the screens

Before drawing the editor, the foundations were fixed in Figma: colour, typography and components, each on its own board. With 47 screens ahead, every decision taken once is a decision that doesn't have to be argued 47 times.

The palette is deliberately narrow: two neutral scales — a dark one for the tool and a light one for surfaces and documents —, a single teal accent that marks everything actionable, and the four status colours. Nothing else.

Colour

The teal is the GAME TV brand and behaves like a neon light: it is the stroke of the login triangle, the outline that runs around the properties panel, and the colour of everything that can be clicked. The dark neutrals build the tool; the light ones, the surfaces that rise out of it.

Teal · base#0AB7B8Actions, links, active state and the neon
Teal · mid#268C8CHover and secondary elements
Teal · deep#174749Tinted surfaces and gradients
Teal · shadow#0E3B3EThe dark end of the gradients
Neutral 02 · background#000000The canvas of the whole tool
Neutral 02 · panel#101114Panels and bars
Neutral 02 · raised#21262CCards, rows and fields
Neutral 02 · soft text#AFB2BCSecondary text on dark

The four statuses

On a broadcast platform, almost everything that matters is the status of something: a sequence on air, an upload in progress, a date-overlap warning, a file error. Four colours, always the same, so the eye never has to learn anything new from one module to the next.

Success#30E584On air · upload complete
Warning#FFDB45Pending · date overlap
Information#4694FFNotes and neutral states
Error#F2254FFile failure · sequence down

Typography

One family for the whole platform: DM Sans. Geometric and large of eye, it holds up well at the small sizes of tables and store codes, and its roundness softens an interface that is already dark and technical by default.

Title · DM Sans Bold · 24/32New sequence
Body · DM Sans Medium · 16/24Canarias sequence — Trade-ins
Data · DM Sans Regular · 13/20C.C. Alcalá Magna, Cuesta de Teatinos, s/n local 87
Label · DM Sans Medium · 11/1600:05:15 — 00:15:40

The colour board, with both scales

The board doesn't show loose colours: it shows both full scales and the brand gradients, each with its value written beside it. The teal gradients — from #0AB7B8 to #0E3B3E — are the ones dressing the audio thumbnails and the import area, and they are defined here once, not improvised screen by screen.

Figma · Game TV Design — Colors2 scales · 1 accent · 4 statuses

The system's colour board: light neutral scale, dark neutral scale, teal scale with its gradients and the four status colours with their values
System · ColorsTwo neutrals, one accent, four statuses

Typography documented, not assumed

DM Sans, with its weights and its paragraph sizes, on its own board. It looks like little and it is exactly what whoever builds it later needs: knowing which family, which weights and what each one is for, without reverse-engineering screens.

Figma · Game TV Design — Typography1 family · 3 weights

The system's typography board: the DM Sans family with its weights and sample paragraphs
System · TypographyDM Sans, for everything

The neon is not decoration: it is hierarchy

The neon stroke drawing polygons across the interface — the login triangle, the pentagon around the properties panel, the frame of the modals — does a concrete job: it marks where the screen's action is. In a dark, dense tool, it is the equivalent of underlining with light the one area that matters right now.

(03) — The editor

A video editor that doesn't intimidate

Retina's central screen is laid out like any professional editor — and at the same time, like none of them. On the left, the documents: everything imported, each with its thumbnail. In the centre, the preview with its playback controls. On the right, the clip's properties: start and end dates, duration, group and store. At the bottom, the channel: the timeline where clips are dragged, ordered and trimmed.

The difference from a real editor lies in what isn't there: no effects, no transitions, no colour grading. Everything that was removed is a mistake that can no longer be made at eleven at night before a launch.

The Retina editor: document library on the left, video preview in the centre, properties panel on the right and the channel timeline at the bottom
Editing · The cutting deskDocuments, preview, properties and channel
The editor with the properties panel highlighted by a neon stroke: description, audio, start and end dates, duration, group and store of the clip
Clip propertiesThe neon marks where decisions happen
The editor in audio mode: the file's waveform in the preview and its track on the channel timeline
Audio modeThe same desk, as a waveform

Video, image and audio with the same gesture

A video clip, a still image and an audio spot behave the same way: they are dragged from the documents panel onto the channel, and their properties are edited in the same right-hand panel. Learning one module is learning them all — the audio track only swaps the preview for its waveform.

(04) — Sequences and broadcast

From the cutting desk to 230 stores

A sequence is Retina's unit of work: an assembly with a name, a start date and an end date. The list shows them as a flat table — id, name, start and end — with search by name, id or date, because that is how the team asks for them.

Creating a new one asks for exactly three fields, and the fourth step is the one that matters: choosing the stores. The selector lets you tick store by store, apply a saved template or reach for groups — Península, Canarias — and keeps the chosen ones in sight as chips that come off with a single cross.

Sequence list: table with id, name, start date and end date, with one row selected in teal
Sequences · ListId, name, start and end
New sequence modal over the dimmed list: name, start date, end date and the link to select stores, with the neon stroke around it
New sequenceThree fields and the stores
Store selection modal: list with checkboxes, template selector and the chosen stores as removable chips at the bottom
Store selectionOne by one, by template or by group

The decision that prevents the expensive mistake

The costliest error on a platform like this is not cosmetic: it is broadcasting the wrong campaign to the wrong stores. That is why the selected stores don't hide behind a counter — they stay laid out as visible chips before the sequence is created, and removing one costs a click, not a search.

(05) — Stores, files and users

Administration, in the same language

Around the editor sit three management modules, and all three speak alike: dark table, search at the top, actions at the right of every row. Stores are listed with their code, their name and their full address, and they group — Península, Canarias — so nobody has to tick 230 boxes each time.

Files come in through an import screen with drag and drop, three clear doors — image, video, audio — and the 500 MB limit written where it can be seen, not in an error message after the upload has already been waited on.

And users are managed with two profiles: administrator, who governs the platform, and merchandiser, who assembles and broadcasts. Each sees their own, and the list shows every person's profile next to their corporate id.

Store list: code, name and full address of every GAME store, with one row selected in teal
Stores · ListCode, name and address
Document import screen: drag-and-drop area over a teal gradient, with the add image, add video and add audio buttons and the 500 MB limit
Files · ImportImage, video or audio · 500 MB
User list: name, corporate id and profile of every person — administrator or merchandiser — with per-row actions
Users · ListAdministrator and merchandiser
UX

Architecture and flows

From assembly to broadcast, no manual needed
UI

47 screens

Editor, lists, modals and states
DS

Design system

Colour, typography and components in Figma
ID

A language of its own

The GAME TV neon, brought into the interface
(06) — The outcome

From three hours to forty-five minutes

Preparing a campaign for the store screens went from about three hours to about forty-five minutes. Not a desk estimate: it is what the two people at head office who assembled the broadcast every week report, before and after Retina.

A good part of the saving comes from unification: where there used to be three applications — one for video, one for the in-store music and one for campaigns — there is now a single platform, and the 230 stores broadcast from it.

3 h → 45 min

Preparing a campaign

Measured with the two head-office people who did it
3 → 1

Applications unified

Video, in-store music and campaigns, on one platform
~230

Stores broadcasting

The whole GAME network schedules from the platform
2

Companies have bought it

Sold as a product under the Retina brand

From internal tool to product

GAME stopped keeping the platform to itself: it sells it to other chains with in-store screens under the commercial name Retina. At least two companies have already bought it.

Next in Product design UX/UI

Traveler, app for iOS and Android