02 · Product App · 2026

medienkundig

My Bachelor’s thesis, turned into a real product.

// in brief// kurz gesagt

A bilingual media-literacy platform I built with my thesis partner Jacqueline Lehmann: a public knowledge site, a learning app with nine exercise types, and an admin dashboard I kept building after the thesis was already graded.

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

A product that feels finished across all three apps: the public site, a learning app covering all nine exercise types with real progress tracking, and an admin dashboard with KPIs, a content inbox, and PostHog-linked insights — that last piece entirely self-initiated, well past the original thesis scope.

Open project ↗Projekt öffnen ↗

// selected screens// ausgewählte ansichten

15 screens

Research synthesis from scam reports and expert interviews to a prototype exercise type — 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.

Primary persona Sabine Mertens, 54, a digital immigrant confident with daily use but unsure about risk — 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.

Key research finding: general digital training is not enough, confidence rises but risk stays — 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.

Naming comparison between Digital Shield and 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.

Typography system used for the Medienkundig interface — 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 architecture across website, learning app and shared 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 and account deletion Edge Function — 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.

Anonymous session in practice: signInAnonymously code paired with the real 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.

Exercise attempt calling a Postgres RPC, paired with a real URL-parsing exercise screen — 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.

Technology stack across the Medienkundig website and learning 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.

Identity-preserving anonymous session and design system enforcement code examples — 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.

Examples of URL literacy exercises in the Medienkundig prototype — 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.

Overview of the Medienkundig exercise formats — 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 used for Medienkundig testing — 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 user test of the Medienkundig learning path — 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.