NUX

Curatie als product, niet nog een algoritmische muur

Elke streaming-UI is een eindeloze algoritmische muur; het is de keuzestress die je verkoopt. Een benchmark van Netflix, Disney+, MUBI en Criterion legde de open plek bloot: bij geen enkel platform is een samengesteld verhaalthema de kleinste bouwsteen. Bij NUX draait alles om eindige, redactioneel samengestelde clusters — Criterion × MUBI × Apple TV.

Elke beslissing staat in dienst van die these. De redactionele opbouw keert terug bij elke collectie — een amberkleurige eyebrow, een serif-kop, een dek van twee zinnen, de naam van de curator met datum — altijd met een eindig aantal, nooit “Meer zoals dit ∞” — “Five Films on Grief” begon als het voorbeeld bij dit principe en staat nu als echte collectie live in de app. Eén gevulde amberkleurige CTA per zone, even zuinig gedoseerd als inkt tot ≤10% van elk scherm, zodat de ene Play-knop altijd meteen opvalt.

“Projection Still Life” — één symbolisch object, één amberkleurig key light, 35mm-korrel. De beeldtaal ís het kleurensysteem: de UI blijft warm bijna-zwart zodat de beelden het scherm dragen

De belofte van het eindige aantal, waargemaakt — “Five Films on Grief”, live in de app

Eén tokenset, twee variabele modi — wireframes en hi-fi zijn dezelfde schermen

De kerntechnische keuze: één semantische tokenset (surfaces, tekst, randen, acties, iconen) draagt twee Figma-variabelemodi. De wireframe-modus is een grijswaardenladder volgens HIG in Plus Jakarta Sans + Inter; de hi-fi-modus is een warme inktladder (#070606→#332E27) met papierkleurige teksttinten op 17,0:1 / 8,4:1 / 5,2:1, amberkleurige accenten in #C8922A met donkere labels op amber (7,1:1 — wit zakt naar 2,4:1), haarlijnen in plaats van schaduwen en 2,5% filmkorrel. 35 wireframe- + 46 hi-fi-schermen, dichtgetimmerd tot 0 hardcoded waarden en 0 tekstlagen zonder stijl.

De typografie doet het redactionele werk: Fraunces benoemt de content, Inter neemt alles functioneel voor zijn rekening, Newsreader draagt de lange teksten, met een display-tot-metadata-verhouding van minstens 5×. Een bibliotheek van 50+ componenten per platform dekt elke interactieve state (default/hover/pressed/focus/disabled), aangevuld met selectieve iOS 26-glazen tabbalken en een tvOS-focusmodel — witte ring en lift, één focus per scherm. Elk platform heeft zijn eigen player, en beide fidelity-modi draaien als volledig klikbare prototypes.

Figma hi-fi Desktop Home — hetzelfde tokensysteem waarop de app draait

Een placeholdervrije catalogus van echte Britse cinema met een gegenereerde beeldidentiteit

De catalogus bestaat uit echte Britse cinema — 72 films, elk met zijn poster en landschapsstills (The Third Man, Lawrence of Arabia, The Red Shoes, Black Narcissus…), waarvan er 21 end-to-end zijn ontworpen in het hi-fi-prototype, met tijdsgetrouwe castportretten en een strikte discipline van portret-in-portret en still-in-landschap. Voor vlakken zonder bestaand beeldmateriaal — genres, fictieve titels, onboarding — ontwierp ik “Projection Still Life”: één symbolisch object per genre, één amberkleurig key light, 35mm-korrel, fotografisch en bewust niet 3D, zodat het nooit botst met de redactionele inkttaal.

AI-curatie als gesprek — gegrond zodat ze geen titel kan hallucineren

Als curatie het product is, dan is de volgende stap de kijker in gewone taal een sfeer te laten beschrijven en het platform daarop te laten antwoorden. De Curator is een conciërge in de live app, bereikbaar via twee ingangen — een zwevende knop op elk scherm en een “✦ Vraag de Curator”-pil naast de Browse-zoekbalk. Typ “een gespannen noir over verraad” of tik een sfeerchip aan, en ze antwoordt in de redactionele stem van NUX met een korte noot plus echte filmkaarten. Het gesprek loopt door — “iets korter?”, “meer zoals die noir” — op hetzelfde oppervlak.

Hallucineren lukt niet: de volledige catalogus past in één prompt (geen RAG), het model geeft enkel film-id’s terug, en de server toetst die aan de echte catalogus voor er iets gerenderd wordt. Een provideradapter roept Gemini 2.0 Flash aan en valt terug op Groq (Llama 3.3) — allebei gratis tier — met de sleutels server-side, rate-limited en met begrensde input. Dezelfde engine genereert thematische redactionele rails (“Islands of the Mind”, “Portraits of Obsession”), gecachet en wekelijks ververst, en abonnees krijgen één pushmelding zodra het nieuwe programma klaarstaat. Test-first gebouwd: provider-failover, id-validatie en een prompt-injection guard zijn allemaal afgedekt.

Een speelbare belofte — de games in de catalogus zijn echt

De catalogus bestaat niet alleen uit films — hij omvat ook documentaires, games en cursussen, dus maakte ik de games écht. Neon Drift, het enige spel in de bibliotheek, is geen stilstaand beeld: druk op de titelpagina op Play en er opent een klein synthwave-canvasspel — stuur een opgelapte sterrenjager door de neonruïnes, puur op reflexen, in een eigen overlay met focus trap en oog voor reduced motion. De contenttypes zijn geen façade; de belofte wordt waargemaakt in code.

Neon Drift — een speelbaar canvasspel dat opent vanaf de titelpagina, met een eigen synthwave-identiteit

Midden in de run. Poorten schuiven aan, één tik en je bent schroot

Een responsieve React-build, live op mijn eigen infrastructuur

De volledige responsieve app staat live — Home, Browse, filmpagina’s met verankerde secties, pull-quotes van critici en eerlijke Downloads op het toestel zelf, een toetsenbordgestuurde Player met een “?”-spiekbriefje, redactionele collecties, Mijn Lijst + Verder Kijken, authenticatie, Profiel, bewerkbare smaakvoorkeuren en onboarding — React + Vite op het geëxporteerde tokensysteem, echte catalogusdata, een poster→hero View-Transition-morph, een hero-pager met posterminiaturen, hover-crossfades naar filmstills, scroll-gestuurde redactionele onthullingen en een zwevende glazen tabbalk op mobiel. Gebouwd op productieniveau: WCAG-AA-toegankelijkheid (focusbeheer, reduced motion, live regions voor schermlezers, een Curator-overlay op schermlezerniveau), een axe-gate in de testsuite, een backend-suite en CI die de echte Docker-image bouwt en rooktest, plus een geharde non-root-container — zelf gehost op mijn eigen infrastructuur (Docker · nginx · Coolify · Hetzner), automatisch uitgerold bij elke push. Vóór deze release doorliep de hele flow een adversarieel geverifieerde UX-audit: 42 bevindingen teruggebracht tot 13 grondoorzaken, allemaal opgelost, zodat ook de ongelukkige paden de waarheid vertellen. De app is een installeerbare PWA — een service-worker-offlinefallback, toevoegen aan het beginscherm, webpush met één melding per week wanneer de Curator publiceert — en een aparte marketinglanding, gebouwd op hetzelfde tokensysteem, staat ervoor op nux.ontwrpn.com.

Filmpagina’s kregen verankerde secties en pull-quotes van critici, tot op de pixel trouw aan de Figma-spec

▶Live demo

app.nux.ontwrpn.com

Openen

Live — probeer het

Mobiel — zwevende glazen tabbalk + losgekoppeld zoeken (iOS 26-patroon)

De modi-architectuur verdiende zichzelf dubbel terug: hi-fi kostte uren, geen weken, en elke late beslissing — een token-heralias, een componentfix — sloeg meteen door naar 33 schermen tegelijk. Net die discipline om tot nul ruwe waarden te auditen maakte die snelheid mogelijk

Het cijfer waarop het beoordeeld is — 15/15, “A+ Impressively exceeds expectations” (HEC Montréal / edX)

Bronnen

• Iyengar & Lepper (2000). When choice is demotivating: can one desire too much of a good thing? Journal of Personality and Social Psychology 79(6):995–1006.
• Scheibehenne, Greifeneder & Todd (2010). Can there ever be too many options? A meta-analytic review of choice overload. Journal of Consumer Research 37(3):409–425. — het keuzeoverloadeffect is omstreden en laat zich niet betrouwbaar repliceren