Where to Watch: Vibe-Coded Case Study
Streaming-Guide für Deutschland
Vom ersten KI-Prototyp über Figma und Google Stitch bis hin zu einem datengestützten A/B/C-Nutzertest mit 20 Personen. Das Feedback der Tester hat das finale Interface maßgeblich geformt.
Problem Statement & Lösung
Der reale Need im deutschen Streaming-Alltag
Problem Statement
Im deutschen Streaming-Markt stehen Film- und Serienliebhaber vor einem wachsenden Problem: Immer mehr Plattformen teilen den Markt auf, während die Übersichtlichkeit verloren geht. Nutzer zahlen monatlich für mehrere Abonnements, wissen vor dem Fernsehabend jedoch oft nicht, bei welchem Dienst ihr Wunschtitel tatsächlich im Flatrate-Abo läuft oder ob er in den öffentlich-rechtlichen Mediatheken kostenlos verfügbar ist.
Herkömmliche Suchmaschinen verschärfen diesen Frust: Sie vermischen echte Inklusiv-Titel mit kostenpflichtigen Leih- und Kaufoptionen. Der Nutzer klickt auf einen Titel in der Hoffnung auf einen entspannten Filmabend, landet aber vor einer unerwarteten 3,99-Euro-Bezahlschranke.
Mögliche Lösung
Eine blitzschnelle, werbefreie und kompromisslos ehrliche Streaming-Suchmaschine für Deutschland: Where to Watch filtert sofort nach echten Flatrate-Abonnements und frei zugänglichen Mediatheken. Kostenpflichtige Leihangebote werden strikt nachrangig behandelt und transparent gekennzeichnet.
Privacy by Design und Datenschutz nach DSGVO: Die Plattform verzichtet vollständig auf Registrierungen, Tracking-Pixel und Werbe-Cookies. Persönliche Suchanfragen werden weder serverseitig gespeichert noch monetarisiert. Der Nutzer gelangt mit absoluter Datensparsamkeit und ohne Umwege direkt zum legalen Stream.
Vibe-Coding Prozess
Vier Entwicklungsstufen von der KI-Idee zur sauberen Codebase
Das Projekt entstand nicht als theoretische Designübung am Reißbrett, sondern in einem praxisnahen Vibe-Coding-Zyklus: Mit KI schnell zum funktionierenden Code kommen, visuell in Figma verfeinern und in Google Stitch modular strukturieren. Jeder Schritt löste eine konkrete technische oder gestalterische Frage.
KI-Rapid-Prototype: Datenlogik in Stunden validieren
Direkter Einstieg über KI-gestütztes Rapid Prototyping. Ziel war es nicht, Pixel zu schieben, sondern innerhalb weniger Stunden eine funktionierende Anbindung an die TMDB- und Streaming-APIs zu schaffen. Der Code validierte live, ob deutsche Flatrate- und Mediathek-Verfügbarkeiten in Echtzeit abgefragt und nach Anbietern gefiltert werden können.
Figma UI-Design: Die Kinosaal-Atmosphäre entsteht
Nach dem technischen Machbarkeitsnachweis folgte die visuelle Ausarbeitung in Figma. Hier entstand das Fundament des Designsystems: Ein tiefes Mitternachtsblau, das wie ein abgedunkelter Kinosaal wirkt und farbenfrohen Filmpostern die volle visuelle Bühne überlässt. Alle UI-Zustände für Suche, Filter und Modals wurden systematisch ausgearbeitet.
Google Stitch Scaffolding: Schlanker Vanilla-Code
Überführung der Entwürfe in sauberen, modularen Produktionscode. Statt schwerfälliger Frameworks setzt Where to Watch auf semantisches HTML5, performantes CSS Grid und schlankes Vanilla JavaScript. Das Scaffolding sorgte für eine extrem schnelle Ladezeit und ein robustes Fundament für den bevorstehenden Nutzertest.
Nutzertest-Release: Echte Testumgebung mit 3 Konzepten
Der finale Teststand wurde auf einer echten Test-Domain bereitgestellt. Integriert wurde ein interaktiver 3-Wege-Umschalter, mit dem 20 Testpersonen nahtlos zwischen den drei verschiedenen Interaktionskonzepten wechseln und ihre Usability unter realen Bedingungen bewerten konnten.
Designsystem
Die Atmosphäre eines Kinosaals im digitalen Interface
Wie überträgt man die Magie des Kinos in eine moderne Webanwendung? Where to Watch greift die visuelle Sprache führender Medienplattformen und die physische Atmosphäre eines Kinosaals auf: Das Zusammenspiel aus abgedunkelter Bühne, Projektor-Lichtkontrasten und medientypischen Bedienelementen rückt die Filminhalte kompromisslos in den Mittelpunkt.
Farbwelt
Cinema Midnight
#060918 • PrimaryDie Dunkelheit des Saals beim Erlöschen des Lichts. Schont die Augen im Heimkino und bildet das Fundament.
Cinema Surface
#0B0F24 • NeutralAbgedunkelte Kartenebene für Filmreihen und Navigationselemente mit sanfter, räumlicher Tiefe.
Projector Light
#E8ECF8 • SecondaryHelles Projektorlicht, das auf die Leinwand trifft. Lenkt den Fokus unmittelbar auf wichtige Aktionen.
Streaming Indigo
#6366F1 • AccentPrimäre Interaktionsfarbe für aktive Filter, Fokuszustände und primäre Call-to-Actions.
Slate Grey
#8B93B5 • TertiaryNeutrale Bühne für Metadaten wie Laufzeiten und Release-Jahre, konkurriert nicht mit bunten Postern.
Typografie
Space Grotesk
Inter
Medientypische Bedienelemente aus Streaming & Kino
Im Interface spiegeln sich bewährte Muster moderner Medienanwendungen wieder: Eine reduzierte Lean-Back-Navigation für schnellen Zugriff auf Startseite, Entdecken und Watchlist. Visuelle Indikatoren wie Wiedergabefortschritt und Weitersehen-Balken. Klare, farbcodierte Verfügbarkeits-Badges für Flatrates, Mediatheken und Leihoptionen leiten den Nutzer mühelos durch das Angebot.
Hohe Kontraste und barrierefreie Bedienbarkeit
Ein atmosphärischer Dark Mode darf niemals auf Kosten der Barrierefreiheit gehen. Die Farbpaarung aus Projektor-Weiß (#E8ECF8) auf Cinema Midnight (#060918) erzielt ein Kontrastverhältnis von über 14.2:1 und übertrifft damit sowohl den WCAG 2.1 AA-Standard (4.5:1) als auch die strengen AAA-Kriterien (7:1) mühelos. Auch für den Akzentton Streaming Indigo (#6366F1) wurde sichergestellt, dass interaktive Fokuszustände und Badges sofort erkennbar bleiben.
Alle interaktiven Bedienelemente erfüllen eine Mindest-Klickfläche von 44 × 44 Pixeln für Touch-Geräte. Semantische HTML5-Strukturen, konsistente ARIA-Attribute und klar definierte Tastatur-Fokusringe (:focus-visible) stellen sicher, dass Where to Watch auch mit Screenreadern und reiner Tastaturbedienung reibungslos bedienbar ist.
Das UX-Dilemma
Warum ein einziger statischer Aufbau zum Scheitern verurteilt war
Beim ersten Test des Prototyps zeigte sich der klassische Zielkonflikt: Die Startseite wollte gleichzeitig Google sein mit einer großen Suchmaske, Filterzentrale sein mit zwei Zeilen Provider und Genres, und Streamingkatalog sein mit visuellen Filmplakaten darunter.
Auf einem typischen Laptop-Bildschirm nahmen Logo, Suchleiste und Filter rund 450 Pixel Höhe ein. Mehr als die Hälfte des sichtbaren Bereichs war von Bedienelementen blockiert. Statt im stillen Kämmerlein Vermutungen anzustellen, wurden drei radikal unterschiedliche Startseiten-Konzepte gebaut und direkt gegeneinander getestet.
Die 3 Test-Konzepte
Live-Prototypen im direkten A/B/C-Vergleich
Dank Vibe-Coding war es möglich, innerhalb kürzester Zeit drei vollständig funktionale, code-basierte Prototypen zu erstellen, die direkt testbar waren. Es handelte sich bewusst nicht um statische Klick-Dummys aus Figma, sondern um echte, interaktive Webanwendungen mit Live-API-Daten, die von 20 Testpersonen unter realistischen Bedingungen vertestet werden konnten.
State-Morph
Logo und Filter weichen beim Tippen dynamisch nach oben. Die Suchergebnisse rücken sofort und ansatzlos ins Blickfeld.
Hypothese: Ein adaptives Interface gibt dem Nutzer situativ genau den Raum, den er für seine aktuelle Aufgabe benötigt.
Interaktionsmuster: Sobald ein Buchstabe ins Suchfeld getippt wird, schrumpft das Logo sanft und die Filter fahren nach oben zusammen. Der gewonnene Raum gehört sofort den Filmergebnissen.
Feedback der Tester: 9 von 20 Personen wählten dieses Konzept zu ihrem Gesamtfavoriten. Das dynamische Feedback vermittelt unmittelbar das Gefühl von Kontrolle und Reaktionsschnelligkeit.
Spotlight-Overlay
Die Startseite bleibt ruhig und fokussiert. Bei Aktivierung der Suche öffnet sich ein schwebendes Eingabefeld im Stil von macOS Spotlight.
Hypothese: Die Trennung von Hintergrund und Suche verhindert visuelle Unruhe und hält die Filmplakate im Hintergrund präsent.
Interaktionsmuster: Ein Klick auf die Suche dunkelt den Bildschirm ab und zentriert ein minimalistisches Eingabefeld in der Bildschirmmitte.
Feedback der Tester: Auf dem Desktop wurde die aufgeräumte Ästhetik geschätzt. Auf mobilen Endgeräten fiel das Konzept jedoch durch: Touch-Ziele waren zu filigran und die Tastatur verdeckte relevante Inhalte.
Viewport-Diät
Schlanke 2-Zeilen-Steuerung: Die Filmplakate starten sofort ganz oben im ersten Sichtfeld ohne jedes Scrollen.
Hypothese: Wer Filme sucht, will sofort Plakate sehen. Minimale Kopfdaten maximieren die visuelle Entdeckerfreude.
Interaktionsmuster: Logo, Suchfeld und Filter sind extrem kompakt in einer festen oberen Leiste komprimiert. Mehr als 80 Prozent der Bildschirmhöhe gehören direkt den Postern.
Feedback der Tester: Stark bei reinen Stöberern, die sich einfach inspirieren lassen wollten. Bei gezielten Suchen vermissten einige Teilnehmer jedoch Orientierung und klare Filterrückmeldungen.
Nutzertest & Daten-Analyse
Empirische Ergebnisse von 20 Testpersonen aus der Live-Evaluation
Die 20 Teilnehmer durchliefen reale Such- und Stöber-Szenarien und bewerteten die Bedienbarkeit über einen standardisierten Fragenkatalog. Die Ergebnisse ergaben ein klares und differenziertes Bild:
Konzept-Präferenz (Gesamtsieger)
Die Auswertung der 20 Nutzertests belegt eine klare Präferenz für dynamische Rückmeldungen. Konzept 1 bot den Teilnehmern die verlässlichste visuelle Orientierung beim Tippen, während Konzept 3 als extrem schneller Einstieg für reines Browsen überzeugte.
9 von 20 Stimmen machten Konzept 1 zum Gesamtfavoriten.
Größte Frustrationen beim Streaming (Fragenkatalog Q5)
Die größte Frustrationsquelle im heutigen Streaming-Alltag sind intransparente Zusatzkosten. 14 von 20 Befragten nannten es als größtes Ärgernis, wenn ein Film zwar in Suchergebnissen auftaucht, dann aber trotz bestehendem Abonnement eine Extragebühr verlangt wird.
Fragenkatalog Q5: 70 Prozent klagen über unerwartete Leihkosten.
Primäre Nutzungsintention im Test
Die Intention der Tester teilte sich in zwei Kernmodi: 60 Prozent wollten rasch prüfen, wo ein konkreter Wunschfilm streambar ist (Search Intent). 40 Prozent wollten sich treiben lassen und nach Genres oder kostenlosen Mediatheken stöbern (Browse Intent).
12 von 20 Testern suchten gezielt nach einem konkreten Film.
„Durch die Bewegung bekommt man sofort ein klares Signal, dass die Eingabe verarbeitet wird und die Seite sich anpasst.“
Feedback zu Konzept 1 (Gesamtsieger)„Das Spotlight-Overlay am Smartphone ist viel zu klein. Ich treffe die Icons kaum und das macht mich sauer.“
Feedback zu Konzept 2 (Mobil-Kritik)Design & Funktion
Mockups und visuelle Präsentation des fertigen Produkts
Aus den Testergebnissen und dem Kinosaal-Designsystem entstand das finale Release-Interface. Hier wird gezeigt, wie die Anwendung auf unterschiedlichen Geräten und in typischen Nutzungsszenarien funktioniert:
Startseite im Kinosaal-Flair
Auf dem iPad Pro und auf Desktop-Bildschirmen entfaltet das Design seine volle Wirkung. Die Filmplakate dominieren den Viewport, während die Navigations- und Filterleiste dezent am oberen Rand ruht. Ein Klick auf das Suchfeld transformiert die Ansicht flüssig, sodass Treffer ohne störende Seitenwechsel direkt geladen werden.
Mobiles Stöbern ohne Overlays
Auf dem Smartphone wurde das schwebende Spotlight-Fenster verworfen. Stattdessen reagiert die gesamte Seite im nativen Scrollfluss. Die Filter für Anbieter und Genres sind für die Daumenbedienung optimiert, und Suchergebnisse passen sich flexibel an hochformatige Bildschirme an.
Instant-Suche & Mediatheken-Filter
Nutzer können mit einem Fingertipp zwischen ihren bezahlten Abonnements und kostenlosen öffentlich-rechtlichen Mediatheken umschalten. Die Suchergebnisse werden sofort gefiltert, ohne dass die Seite neu laden muss oder verwirrende Fehlermeldungen entstehen.
Verfügbarkeiten auf einen Blick
Das Detail-Modal beantwortet die Kernfrage in Sekundenbruchteilen: Wo läuft dieser Film im Flatrate-Abo? Wo gibt es ihn kostenlos? Und wo fällt eine zusätzliche Leihgebühr an? Alle Streaming-Optionen sind übersichtlich nach Kategorien sortiert und direkt verlinkt.
Synthese & Auswirkungen
Wie die Kombination der Test-Konzepte das finale Produkt geformt hat
Kein einzelnes Konzept war isoliert perfekt. Der wahre Mehrwert des Usertests lag in der Synthese: Die Stärken aus Konzept 1 und Konzept 3 wurden zu einem neuen, stimmigen Gesamterlebnis kombiniert, das beiden Nutzungsszenarien gerecht wird.
Synthese aus Konzept 1 und Konzept 3
„Ich will sofort Plakate sehen, aber wenn ich tippe, soll die Suche den vollen Fokus bekommen.“
Das adaptive State-Morphing aus Konzept 1 wurde mit der extrem schlanken First-Fold-Struktur aus Konzept 3 verschmolzen. Filmplakate starten sofort oben im Sichtfeld, während die Filterleiste bei Texteingabe sanft nach oben weicht.
Klare Trennung von Anbietern & Genres
„Filter für Streamingdienste und Filter für Filmgenres sollten optisch sauber voneinander getrennt sein.“
Streaming-Dienste erhielten eine eigene prominente Leiste mit Marken-Icons. Genres wurden als separate, darunter liegende Schnellfilterzeile organisiert.
Radikale Kosten-Transparenz
„Ich möchte nur Titel sehen, die ich direkt in meinen Abos oder kostenlos schauen kann, keine versteckten 3,99 Euro.“
Flatrate- und Mediathek-Verfügbarkeiten werden direkt auf den Filmkarten mit deutlichen Badges markiert. Reine Kauf- und Leihangebote werden konsequent nachrangig platziert.
Mobil-Optimierung im nativen Scrollfluss
„Auf dem Smartphone will ich nicht mit kleinen Fenstern kämpfen, sondern einfach scrollen und tippen.“
Das schwebende Spotlight-Fenster aus Konzept 2 wurde für Mobilgeräte vollständig verworfen. Stattdessen reagiert die gesamte Seite im nativen Scrollfluss auf Touch-Eingaben.
Fazit & Live-Produkt
Vibe-Coding braucht empirische Erdung
Where to Watch beweist, wie wirkungsvoll der Vibe-Coding-Workflow ist, wenn er mit echten Nutzertests kombiniert wird. Mit KI-Tools lässt sich in wenigen Stunden ein funktionierender Prototyp bauen. Erst das ungeschminkte Feedback von 20 Testern deckte jedoch auf, welche Interaktionen sich natürlich anfühlen und wo Barrieren lauerten.
Das finale Produkt vereint die Geschwindigkeit einer Instant-Suche mit der visuellen Inspiration eines Kinosaals, live und voll funktionsfähig.
Vollständiger Quellcode auf GitHub
Die gesamte Implementierung von Where to Watch inklusive aller drei interaktiven Test-Prototypen, der Tailwind-Konfiguration und der clientseitigen TMDB-Integration ist als Open-Source-Projekt auf GitHub dokumentiert und frei zugänglich.