02 · Product App · 2026

medienkundig

Meine Bachelorarbeit, weitergebaut zu einem echten Produkt.

// in brief// kurz gesagt

Eine zweisprachige Plattform für Medienkompetenz, gebaut mit meiner Thesis-Partnerin Jacqueline Lehmann: eine öffentliche Wissensseite, eine Lern-App mit neun Übungstypen und ein Admin-Dashboard, das ich nach der Abgabe einfach weitergebaut habe.

RoleRolle: Full Stack Dev + UX (Bachelor's thesis, with Jacqueline Lehmann)Full Stack Dev + UX (Bachelorarbeit, mit Jacqueline Lehmann)
Built withEntwickelt mit: Astro · React + Vite · TypeScript
FormatFormat: Product App

33Apps, one monorepoApps, ein Monorepo

99Exercise typesÜbungstypen

22Authors — with Jacqueline LehmannAutor:innen — mit Jacqueline Lehmann

// for whom// für wen

Adults who want to check a suspicious message, link, or claim without first becoming “good with technology.”Erwachsene, die eine verdächtige Nachricht, einen Link oder eine Behauptung prüfen wollen, ohne erst „gut mit Technik“ sein zu müssen.

// project focus// projektfokus

Teach in contextIm Kontext unterrichtenNine exercise types cover scenarios, URL reading, matching, confidence, and feedback.Neun Übungstypen decken Szenarien, URL-Lesen, Zuordnung, Sicherheitseinschätzung und Feedback ab.
Lower the first barrierDie erste Hürde senkenAnonymous sessions let people start learning and preserve progress when they later create an account.Anonyme Sessions ermöglichen einen Lernstart und bewahren Fortschritt bei späterer Kontoerstellung.
Make the product maintainableDas Produkt wartbar machenThe admin dashboard adds content operations, KPIs, and an RSS-backed warning workflow.Das Admin-Dashboard ergänzt Content Operations, KPIs und einen RSS-gestützten Warnungs-Workflow.

// inside// bestandteile

Public siteÖffentliche WebsiteGlossary and current warningsGlossar und aktuelle Warnungen
Learning appLern-AppPaths, exercises, progressPfade, Übungen, Fortschritt
AdminAdminContent operations and insightsContent Operations und Insights

// the decisions behind the screen// die entscheidungen hinter dem screen

Reduce cognitive load before teachingKognitive Last vor dem Lernen reduzieren

One prominent next step, calm spacing, plain German, and a small number of choices keep the interface from becoming another digital hurdle for the people it is meant to support.Ein klarer nächster Schritt, ruhige Abstände, verständliche Sprache und wenige Auswahlmöglichkeiten verhindern, dass die Oberfläche selbst zur digitalen Hürde wird.

Practice with immediate, explanatory feedbackÜben mit direktem, erklärendem Feedback

Exercises do more than mark an answer right or wrong. They explain the cue that matters, which supports transfer when a similar message or URL appears outside the course.Übungen markieren nicht nur richtig oder falsch. Sie erklären den entscheidenden Hinweis—das unterstützt den Transfer, wenn später eine ähnliche Nachricht oder URL auftaucht.

Accessibility is the default pathBarrierearm ist der Standardweg

Generous targets, explicit labels, strong contrast, and tested desktop/mobile breakpoints are product decisions, not a separate compliance layer added later.Große Ziele, explizite Labels, hoher Kontrast und getestete Desktop-/Mobile-Breakpoints sind Produktentscheidungen, keine nachträgliche Compliance-Schicht.

// a technical decision// eine technische entscheidung

XP written server-side through a security-definer RPCXP wird serverseitig über eine Security-Definer-RPC geschrieben

XP and streaks are never written from the browser. The client calls this RPC; Row Level Security plus security definer make sure a learner can only ever touch their own row, and only through logic the server controls.XP und Streaks werden nie im Browser geschrieben. Der Client ruft diese RPC auf; Row Level Security plus Security Definer sorgen dafür, dass Lernende immer nur ihre eigene Zeile ändern können — und nur über Logik, die der Server kontrolliert.

-- supabase/migrations/..._award_xp.sql
create or replace function award_xp(exercise_id uuid, correct boolean)
returns void
language plpgsql
security definer
set search_path = public
as $$
begin
  if not correct then
    return;
  end if;

  update progress
  set xp = xp + 10,
      streak_days = case
        when last_active_at::date = (now() - interval '1 day')::date
          then streak_days + 1
        when last_active_at::date = now()::date
          then streak_days
        else 1
      end,
      last_active_at = now()
  where user_id = auth.uid();
end;
$$;

// outcome// ergebnis

Ein Produkt, das sich über alle drei Apps hinweg fertig anfühlt: die öffentliche Website, eine Lern-App mit allen neun Übungstypen und echtem Fortschrittstracking, sowie ein Admin-Dashboard mit KPIs, Content-Inbox und PostHog-Insights — Letzteres komplett aus eigenem Antrieb, weit über den ursprünglichen Thesis-Rahmen hinaus.

Open project ↗Projekt öffnen ↗

// selected screens// ausgewählte ansichten

15 Ansichten

Recherche-Synthese von Betrugsberichten und Expert:inneninterviews bis zum Übungstyp im Prototyp — 32 scam reports, two written police interviews and an expert interview were clustered into concrete learning scenarios.32 Betrugsberichte, zwei schriftliche Polizei-Interviews und ein Expert:inneninterview wurden zu konkreten Lern-Szenarien gebündelt.

Primärpersona Sabine Mertens, 54, digital immigrant, sicher im Alltag aber unsicher bei Risiken — The primary persona is a digital immigrant who already uses digital media daily — the gap is not access, it is confidence in spotting risk.Die Primärpersona ist digital immigrant und nutzt digitale Medien bereits täglich — die Lücke ist nicht Zugang, sondern Sicherheit beim Erkennen von Risiken.

Zentrale Erkenntnis: Allgemeines Digitaltraining reicht nicht, Selbstbewusstsein steigt, Risiko bleibt — The finding that shaped the whole product: general digital-skills training raises confidence without actually lowering risk — so the prototype trains recognition specifically, not digital literacy in general.Die Erkenntnis, die das ganze Produkt geprägt hat: allgemeines Digitaltraining steigert das Selbstbewusstsein, ohne das Risiko zu senken — deshalb trainiert der Prototyp gezielt Erkennung statt allgemeiner Medienkompetenz.

Namensvergleich zwischen Digital Shield und medienkundig — A naming decision based on clarity, pronunciation and room for the product to grow beyond one narrow topic.Eine Naming-Entscheidung auf Basis von Klarheit, Aussprache und Raum für die Weiterentwicklung des Produkts.

Typografie-System der medienkundig-Oberfläche — The type system is part of the accessibility work: clear letterforms, reliable hierarchy and German-language coverage.Das Typografie-System ist Teil der Barrierearmut: klare Buchstabenformen, verlässliche Hierarchie und deutsche Sprachabdeckung.

Medienkundig-Monorepo-Architektur mit Website, Lern-App und geteilten Packages — One product system across a public Astro site, a React learning app and shared foundations.Ein Produktsystem über eine öffentliche Astro-Website, eine React-Lern-App und geteilte Foundations hinweg.

Row-Level-Security-Policies und Edge Function zur Kontolöschung — Privacy is enforced at the data layer: people can access only their own records, and account deletion is handled server-side.Datenschutz wird auf Datenebene durchgesetzt: Menschen sehen nur eigene Datensätze, und Kontolöschung läuft serverseitig.

Anonyme Sitzung in der Praxis: signInAnonymously-Code neben dem echten Consent-Screen — On first launch, an anonymous Supabase session is created automatically — people land in their first exercise with no login screen at all.Beim ersten Start wird automatisch eine anonyme Supabase-Sitzung erzeugt — Nutzer:innen landen ohne Login-Bildschirm direkt in der ersten Übung.

Übungsversuch ruft eine Postgres-RPC auf, neben einer echten URL-Erkennungs-Übung — Every exercise attempt calls a Postgres function — XP, streaks, and progress are computed server-side, never trusted from the client.Jeder Übungsversuch ruft eine Postgres-Funktion auf — XP, Serie und Fortschritt werden serverseitig berechnet, nie dem Client vertraut.

Technologie-Stack von medienkundig-Website und Lern-App — The stack deliberately separates the public site from the interactive product while keeping shared TypeScript foundations.Der Stack trennt öffentliche Website und interaktives Produkt bewusst, hält aber gemeinsame TypeScript-Foundations zusammen.

Codebeispiele für identitätserhaltende anonyme Sessions und die Durchsetzung des Designsystems — Two small implementation details with real product impact: a friction-free first visit and automated UI consistency checks.Zwei kleine Implementierungsdetails mit echtem Produkt-Impact: ein reibungsloser Erstbesuch und automatisierte UI-Konsistenzchecks.

Beispiele für URL-Übungen im medienkundig-Prototyp — Abstract safety advice becomes a small, repeatable action: recognise parts of a URL and understand why they matter.Abstrakte Sicherheitsratschläge werden zu einer kleinen, wiederholbaren Handlung: URL-Bestandteile erkennen und verstehen, warum sie wichtig sind.

Überblick der medienkundig-Übungsformate — The learning system combines selection, matching, ordering, memory, self-assessment and image marking instead of relying on one interaction pattern.Das Lernsystem kombiniert Auswahl, Zuordnung, Reihenfolge, Memory, Selbsteinschätzung und Bildmarkierung statt sich auf ein Interaktionsmuster zu verlassen.

Tobii-Pro-Fusion-Eye-Tracking-Setup im Test von medienkundig — Screen-based eye tracking made attention and hesitation observable alongside the qualitative test conversations.Bildschirmbasiertes Eye-Tracking machte Aufmerksamkeit und Zögern zusätzlich zu den qualitativen Testgesprächen beobachtbar.

Thinking-Aloud-Usertest des medienkundig-Lernpfads — Think Aloud sessions surfaced what carried the experience and the real trade-off between more explanation and less content.Thinking-Aloud-Sessions zeigten, was die Nutzung trug, und den echten Zielkonflikt zwischen mehr Erklärung und weniger Content.