Bachelorarbeit UI/UX Design KI-Integration THI

BrainVenture

Eine KI-gestützte, gamifizierte Outdoor-Quiz-Plattform, die Jugendliche dazu anregt, ihre Umgebung aktiv zu erkunden — konzipiert im Rahmen meiner Bachelorarbeit an der Technischen Hochschule Ingolstadt.

Figma UX Research Usability Testing Prototyping KI-Integration Gamification Adobe Illustrator
Prototyp ausprobieren
BrainVenture Cover

Über das Projekt

Lernen, das nach draußen geht

BrainVenture ist eine gamifizierte Outdoor-Quiz-Plattform für Schülerinnen und Schüler im Alter von 12 bis 19 Jahren. Die Idee: Statt im Klassenzimmer zu lernen, erkunden Jugendliche ihre reale Umgebung — geführt durch interaktive Quiz-Rallyes, die von Lehrkräften erstellt werden. Unterstützt durch einen integrierten KI-Assistenten und ein durchdachtes Gamification-System entsteht ein Lernerlebnis, das intrinsische Motivation fördert, ohne den pädagogischen Anspruch zu opfern.

Die Plattform besteht aus drei Komponenten: einer Schüler-App, einer Lehrer-App für die Live-Begleitung und einer Desktop-Webanwendung zur Quiz-Erstellung. Als vollständiges UX-Projekt — von der Nutzerforschung über Personas und Wireframes bis zu hochauflösenden Prototypen und Usability-Tests — ist BrainVenture das Herzstück meiner Bachelorarbeit an der Technischen Hochschule Ingolstadt. Die technische Umsetzung des interaktiven Web-Prototyps mit echter KI-Integration habe ich eigenständig implementiert.

Markenidentität & Design

Paperbook-Ästhetik trifft Abenteuergeist

Ein Designsystem, das warm, verspielt und papierartig wirkt — ohne kindlich zu sein. Entwickelt für eine Zielgruppe zwischen 12 und 19 Jahren.

Der Name BrainVenture verbindet zwei Konzepte: Brain steht für Kognition und Wissen, Venture für Abenteuer und Entdeckung. Eine einzelne Quiz-Rallye wird konsequent als "Venture" bezeichnet — sprachlich einheitlich und identitätsstiftend.

Die visuelle Sprache folgt dem "Paperbook"-Stil: warme, papierartige Texturen, handschriftliche Akzente, organische Formen und eine Farbpalette, die an Notizbücher und Erkundungstagebücher erinnert. Das System wirkt lebendig und zugänglich — aber nie infantil. Es schlägt eine Brücke zwischen schulischem Kontext und dem Versprechen von Freiheit und Abenteuer.

Das Herzstück der Markenidentität ist der Maskottchen-Charakter: ein Gehirn in Outdoor-Kleidung — mit Wanderrucksack, Kompass und Entdeckergeist. Er wurde als Vektorgrafik in Adobe Illustrator gezeichnet und anschließend mit GPT Image 2.0 in verschiedenen Kontextvarianten erweitert. Das Maskottchen taucht in der App als emotionaler Anker auf und stärkt die hedonische Qualität der Nutzererfahrung messbar.

BrainVenture Maskottchen BrainVenture Logo

Die Plattform

Drei Apps. Ein Ökosystem.

BrainVenture besteht aus einer Schüler-App, einer Lehrer-App und einer Desktop-Webanwendung — alle drei greifen nahtlos ineinander und bilden ein geschlossenes Lernökosystem.

01

Schüler-App: Einstieg & Navigation

Der Einstieg erfolgt über einen mehrstufigen Onboarding-Wizard: Neue Nutzer wählen ihre Rolle (Schüler oder Lehrer), woraufhin der Flow entsprechend verzweigt. Schüler geben Jahrgangsstufe, Anzeigename und Passwort an — eine Fortschrittsanzeige macht den aktuellen Stand jederzeit sichtbar. Social-Login über Google, Facebook oder Apple ist ebenfalls möglich.

Die Startseite ist als personalisiertes Dashboard aufgebaut: Header mit Avatar, Name und Level-Badge, tagesaktuelle Aufgaben, horizontal scrollbare Themenkategorien und ein Bereich für Ventures in der Nähe. Die persistente Bottom-Navigation mit fünf Tabs (Start, Fortschritt, Karte, QR-Scanner, Profil) ist auf allen Screens sichtbar. Die Kartenansicht zeigt den aktuellen Standort sowie umliegende Community-POIs als Bubble-Labels — im Free-Roam-Modus können Schüler diese auch ohne Lehrkraft jederzeit erkunden.

Registrierungsflow Startseite Kartenansicht Free Roam
02

Schüler-App: Quiz-Durchführung

Schüler treten einer Venture per QR-Code-Scan oder manueller PIN-Eingabe bei — beide Wege sind über Tab-Navigation erreichbar. Bevor die Venture startet, werden alle Inhalte (Aufgaben, Karten, Mediendateien) lokal gespeichert, sodass die Rallye auch bei schlechter Netzverbindung vollständig abschließbar ist. Beim Start erhalten Schüler zunächst eine Übersicht aller Stationen der Route. Ein Routen-Widget zeigt Wegstrecke und Gehzeit zur nächsten Station.

Sechs Aufgabentypen sorgen für Abwechslung: Multiple Choice mit sofortigem Feedback, Fun Facts als Wissenshäppchen zwischen den Aufgaben, Standortmarkierung auf einer eingebetteten Karte mit Akzeptanzradius-Prüfung, Freitext, Sortieraufgaben per Drag-and-Drop sowie Audio-Aufgaben. Alle Aufgaben können optional mit einem Countdown-Timer versehen werden.

QR-Scanner und PIN-Eingabe
Venture Start Stationsübersicht Routen-Widget
Multiple Choice und Fun Fact
Standortmarkierung Korrekte Markierung Falsche Markierung
Freitext, Sortierung, Audio
03

Schüler-App: KI-Assistent

Der integrierte KI-Assistent (qwen3-32B) ist während jeder Aufgabe über einen dedizierten Button aufrufbar und öffnet eine Vollbild-Chat-Oberfläche. Neben Texteingaben sind auch Sprach- und Bildeingaben möglich. Der Assistent hat Einsicht in die Fragestellungen und Lösungsmöglichkeiten — darf die Antwort jedoch nie direkt preisgeben. Stattdessen gibt er gezielte Hinweise, Denkanstöße und Hintergrundwissen, das Schüler eigenständig zur Lösung führt. Dieses Design wahrt den pädagogischen Wert der Aufgabe und senkt gleichzeitig den Frustrationslevel.

KI-Assistent Übersicht KI-Chat aktiv
04

Schüler-App: Ergebnisse & Gamification

Nach Abschluss einer Venture werden die Ergebnisse in einem Leaderboard präsentiert. Die Top-3-Plätze sind auf einem Podium hervorgehoben; niedrigere Platzierungen bleiben unscharf — ein bewusster Schutzmechanismus gegen sozialen Druck in der Gruppe. Erreicht ein Schüler durch gesammelte Erfahrungspunkte ein neues Level, erscheint ein dedizierter Level-Up-Screen mit dem neu freigeschalteten Abzeichen.

Im Fortschrittsbereich geben zwei Tabs Überblick: persönliche Quests (wiederkehrende Aufgaben, die bestimmte Aktionen in der App erfordern) und eine vollständige Level-Übersicht als Abzeichen-Grid. Die Profilseite zeigt Avatar, Level und Punktestand. Ein besonderes Gamification-Feature ist die Garderobe: Das persönliche Maskottchen kann mit gesammelten Punkten mit Accessoires und Outfits ausgestattet werden — ein Anreiz zur kontinuierlichen Nutzung.

Leaderboard und Level-Up Gelernte Inhalte
Quests Level-Übersicht Profil Garderobe
05

Lehrer-App: Live-Begleitung

Die mobile Lehrer-App ist als Supervisions-Dashboard konzipiert. Die Startseite begrüßt die Lehrkraft namentlich und zeigt alle erstellten Quizze mit Titel, Teilnehmerzahl, Dauer und Aktivitätsstatus. Ein Live-Analyse-Widget visualisiert den aktuellen Quiz-Pfad mit Fortschrittsbalken. Über den Share-Button eines Quiz-Eintrags öffnet sich direkt ein QR-Code-Sheet, das neben dem scanfähigen Code auch einen sechsstelligen alphanumerischen PIN enthält — für Situationen, in denen ein Gruppen-Scan zu umständlich wäre.

In der Kartenansicht sind alle aktiven Teilnehmer als individuelle Marker mit Initialen-Badges in Echtzeit eingezeichnet. Ein ausklappbares Panel am unteren Bildschirmrand zeigt den vollständigen Quiz-Pfad mit allen Zwischenstationen und Entfernungsangaben. Bei Bedarf kann die Lehrkraft einzelne Teilnehmer antippen, um direkt per Chat oder Anruf Kontakt aufzunehmen.

Neben der Live-Begleitung bietet die App eine vollständige mobile Auswertungsansicht. Nach Abschluss einer Venture kann die Lehrkraft Ergebnisse direkt vom Smartphone aus einsehen — aufgeschlüsselt nach Übersicht, Aufgabenperformance und Teilnehmerdetails. Ein Quiz-Auswahlmenü erlaubt den schnellen Wechsel zwischen verschiedenen Ventures.

Lehrer Dashboard QR-Code teilen
Teilnehmer-Karte Stationsliste Teilnehmer kontaktieren
Quiz auswählen Auswertung Übersicht 1 Auswertung Übersicht 2
Aufgaben-Insights Teilnehmer-Insights Lehrerprofil
06

Desktop: Quiz-Builder & KI-Erstellung

Die Desktop-Webanwendung ist das Herzstück der Inhaltserstellung. Die Startseite zeigt alle Quizze in einem responsiven Kachelraster mit Suchleiste, Filter und Sortierung. Jede Quiz-Karte zeigt Cover, Veröffentlichungsstatus, Tags, Aufgabenanzahl und Dauer. Über ein Kontextmenü kann ein Quiz dupliziert, umbenannt, gelöscht oder mit einem Einladungslink geteilt werden. Ein dedizierter Modal-Flow führt durch die Erstellung eines neuen Quiz: Titel, Cover-Bild, Tags und Sichtbarkeit werden schrittweise definiert.

Im Quiz-Editor legt eine linke Sidebar alle Aufgaben in ihrer Reihenfolge fest — per Drag-and-Drop umsortierbar. Der Editor unterstützt acht Aufgabentypen. Komplexere Typen öffnen spezialisierte Modals: etwa ein Datumsauswahl-Modal mit Toleranzbereich oder ein interaktives Standort-Modal zum Setzen des Aufgaben-GPS-Punktes per Kartenklick. Eine integrierte Vorschaufunktion rendert die aktuelle Aufgabe originalgetreu in einem iPhone-Frame, sodass die spätere Schüleransicht bereits während der Erstellung überprüft werden kann.

Die Kartenansicht des Editors ermöglicht es, Points of Interest in der Umgebung eines Zielortes zu erkunden und direkt als Aufgabenstationen zu übernehmen. Filter schränken die angezeigten POIs nach Status und Kategorie ein; ein seitlicher Drawer zeigt Detailinformationen zum ausgewählten POI. Vor der Veröffentlichung führt ein fünfstufiger Publish-Settings-Flow durch Sichtbarkeit, Leaderboard-Konfiguration, Bestehensgrenze, Klassenzuordnung und optionale Zusatzaufgaben.

Der integrierte KI-Assistent ist im Desktop-Builder deutlich mächtiger als auf dem Smartphone: Er generiert vollständige Aufgaben aller acht Typen — Multiple Choice, Freitext, Sortierung, Datumsauswahl u. a. — direkt im Editor-Kontext. Der Reasoning-Modus zeigt den Gedankengang des Modells nachvollziehbar an.

Quiz-Übersicht
Quiz Kontextmenü Quiz erstellen Modal
Eigenschaften bearbeiten Einladungscode teilen
Neues Quiz (leer) Quiz befüllt
Tag-Auswahl Cover-Bildauswahl
Leerer Quiz-Editor
Aufgabentyp-Auswahl Multiple Choice erstellen
Multiple Choice befüllt Datumsauswahl-Modal
Standort-Modal Vorschau: Info-Aufgabe
Vorschau: Multiple Choice Kartenansicht mit POIs
Ortssuche POI-Filter
POI-Detailansicht
Publish: Sichtbarkeit Publish: Leaderboards
Publish: Bestehensgrenze Publish: Klasse
Publish: Zusatzaufgaben KI: Generierungsmodus KI: Reasoning
KI: Multiple Choice KI: Freitextaufgabe
KI: Sortieraufgabe KI: Datumsaufgabe
KI: Chat-Modus
07

Desktop: Auswertungen

Das Auswertungs-Dashboard gliedert sich in drei Tabs. Der Tab Übersicht zeigt die wichtigsten KPIs als Kachelraster (Teilnehmeranzahl, Abschlussquote, Durchschnittspunktzahl, Bearbeitungszeit), eine Statusleiste für die Mindestpunktzahl-Quote, automatisch generierte Insights-Auffälligkeiten, eine Aktivitätsgrafik und die Checkpoint-Statistiken je Station. Der Tab Aufgaben listet jede Aufgabe mit Lösungsquote und Bearbeitungszeit auf — Balken machen Unterschiede in der Aufgabenschwierigkeit auf einen Blick sichtbar. Im Tab Teilnehmer werden alle Schüler nach Punktzahl sortiert aufgelistet, inklusive Status-Badge (Bestanden / Nicht bestanden / Abgebrochen). Ein Klick auf einen Teilnehmer öffnet eine Detailansicht mit allen abgegebenen Antworten — aufgeschlüsselt nach Aufgabe, inklusive Screenshot der eingereichten Antwort und automatischer Bewertung.

KPI-Übersicht Key Insights Aktivitäts-Timeline & Checkpoints Aufgaben-Performance Teilnehmerliste
Teilnehmer-Antworten 1 Teilnehmer-Antworten 2
Teilnehmer-Antworten 3

Evaluation

Exzellente Nutzerbewertungen

Beide Zielgruppen bewerteten die Plattform nach vollständigen Usability-Tests mit standardisierten Fragebögen (SUS und UEQ). Die Ergebnisse bestätigen sowohl die Gebrauchstauglichkeit als auch das positive Nutzererlebnis durchgehend auf exzellentem Niveau.

93,8 /100

SUS-Score Schüler

Exzellent

92,5 /100

SUS-Score Lehrkräfte

Exzellent

2,31 /2,5

UEQ Gesamtqualität

Hedonische Qualität +40%