Überblick Der Service Umsetzung Technische Umsetzung Testing Reflektion

Meine Rolle

Design, Research, Full Stack Entwicklung

Teammitglieder

Entstanden

Im Rahmen meiner Bachelorarbeit 2025 über 5 Monate hinweg

Links

GitHub Repository Live Demo

Methodik

Next.jsFirebaseTypeScriptFigma

What?

Im Rahmen des Hochschulzertifikats „Digital“ der Hochschule München soll das Lernen von Prompt Engineering unterstützt werden. Zielgruppe sind primär Studierende nicht-technischer Studiengänge, die ihre digitalen Kompetenzen erweitern möchten, insbesondere im Bereich des Prompt Engineerings. Da für diese Zielgruppe keine regelmäßigen Vorlesungen oder Übungseinheiten angeboten werden, besteht der Bedarf an einer flexiblen, digitalen Lernumgebung, die unabhängig vom klassischen Studienrahmen genutzt werden kann.

How?

Durch ein spielerisches Lernen können Menschen erkennen, dass das Erstellen von Prompts keine unüberwindbare Hürde darstellt, sondern ein kreatives und logisches Werkzeug ist, das sie selbst beeinflussen und verstehen können. Durch gezielt eingesetzte Gamification-Elemente lassen sich Motivation und Lernfortschritt steigern, indem Herausforder-ungen mit Belohnungen, Fortschrittssystemen und interaktiven Aufgaben kombiniert werden. Auf diese Weise wird nicht nur das Interesse an der Thematik gefördert, sondern auch das Vertrauen der Lernenden in ihre Fähigkeit gestärkt, KI gezielt zu nutzen.

Why?

Trotz der zunehmenden Verbreitung generativer KI-Modelle wie ChatGPT verfügen viele Menschen noch immer nicht über ein grundlegendes Verständnis dafür, wie man mit solchen Systemen effektiv interagiert. Zwar sind diese Werkzeuge technisch leicht zugänglich, doch fehlt es häufig an systematischer Anleitung oder Schulung. Im Kontext der Future Skills, also die Fähigkeiten, die in der Arbeitswelt der Zukunft besonders wichtig sind, wird Prompt Engineering als eine zentrale Fähigkeit betrachtet. Laut dem Stifterverband für die Deutsche Wissenschaft und McKinsey & Company sind digitale und technologische Kompetenzen unverzichtbar, um den Herausforderungen des modernen Arbeitsmarktes zu begegnen.

Insights

Aus meiner umfangreichen Literaturrecherche, sowie den Anforderungen der Hochschule München ergaben sich folgende Insights:

Niedrige Einstiegshürden

Unkomplizierter Zugang durch einfache Registrierung und intuitive Bedienung.

Klare Struktur

Eine klar strukturierte Anwendung in der man sich ohne weitere Hilfe alleine zurechtfindet.

Sichtbarer Fortschritt

Fortschrittsanzeigen, ein Levelsystem und visuelle Belohnungen verdeutlichen individuelle Lernfortschritte.

Direktes Feedback

Farbliche Icons, animierte Rückmeldungen und generiertes Feedback unterstützen den Lernprozess durch klare Rückmeldung.

Flexibles Lernen

Kurze, unabhängige Lerneinheiten ermöglichen effektives Selbststudium in variabler Zeiteinteilung.

Fehlerfreundlichkeit

Wiederholmöglichkeiten, klare Hinweise und ermutigendes Design reduzieren Frustration und fördern Ausdauer.

Zur Förderung von Motivation, Engagement und Lernfortschritt werden in digitalen Lernumgebungen häufig spielebasierte Elemente und Mechanismen eingesetzt. Die in PromptAscent eingebauten Gamification-Elemente wurden so ausgewählt, dass sie zentrale psychologische Motivationsfaktoren gezielt ansprechen. Sie verknüpfen unmittelbares Feedback, sichtbaren Fortschritt und soziale Vergleichsmöglichkeiten, um sowohl intrinsische als auch extrinsische Motivation zu fördern. Die folgende Tabelle zeigt die verwendeten Elemente und ihre Wirkung.

Punkte	Dieses Prinzip nutzt behavioristische Verstärkung: Korrekte Antworten werden direkt belohnt, Fehler haben nachvollziehbare Konsequenzen
Bestenlisten	Dieses Element bedient den sozialen Vergleich und die soziale Eingebundenheit nach der Selbstbestimmungstheorie. Es schafft einen Anreiz, die eigene Leistung zu verbessern und sich im Wettbewerb zu behaupten.
Avatare	Diese Personalisierung erhöht die emotionale Bindung zur Lernumgebung und unterstützt die Selbstwahrnehmung von Fortschritt.
Abzeichen	Belohnungen wirken als extrinsische Motivation, steigern aber durch den Sammlungseffekt auch die langfristige Bindung an die Plattform.
Levels	Levels strukturieren den Fortschritt und schaffen sichtbare Etappenziele.
Feedback	Es unterstützt die Lernenden dabei, ihren Fortschritt nachzuvollziehen, Ziele zu konkretisieren, Fehler zu erkennen und ihr Lernverhalten gezielt anzupassen. Dies trägt maßgeblich zur Entwicklung von Selbstbewusstsein und kontinuierlicher Verbesserung bei.
Herausforderungen	Sie strukturieren den Lernprozess, steigern das Engagement der Lernenden und stärken ihre Problemlösungsfähigkeiten. Durch die Einbettung in einen übergeordneten erzählerischen Rahmen kann zudem ein stärkeres Gefühl von Fortschritt und Zugehörigkeit entstehen.

Idee

Eine webbasierte Lernplattform namens PromptAscent. Konzipiert auf Basis didaktischer Modelle, technisch umgesetzt und mit Testnutzenden evaluiert. Storytelling, Fortschrittssysteme, Feedback, Belohnungen und Wiederholungs-Challenges sollen Motivation und Lernfortschritt steigern. Die narrative Leitidee von PromptAscent basiert auf der Metapher eines Bergaufstiegs. Die Lernenden übernehmen die Rolle einer Bergsteigerin oder eines Bergsteigers, der Schritt für Schritt verschiedene Etappen (Lektionen und Stufen) erklimmt. Visuelle Elemente wie ein Fußspuren-Icon für die gesammelten Punkte, ein Inventar-Rucksack und animierte Hintergründe unterstützen den Fortschritt der Nutzenden. Ziel ist es, den Giphel zu erreichen, sinnbildlich für das erfolgreiche Beherrschen der Inhalte des Kurses.

PromptAscent

Aufbau der Lernplattform

Die Inhalte von PromptAscent sind hierarchisch gegliedert in Levels, Lektionen, Stufen und Aufgaben. Diese Struktur ermöglicht einen klaren Lernpfad vom Einstieg bis zur komplexen Anwendung und unterstützt durch abgestufte Herausforderungen einen kontinuierlichen Kompetenzaufbau.

Lernen mithilfe der Stufenstruktur

Die Struktur der Lektionen in PromptAscent orientiert sich an den Prinzipien der Bloom’schen Taxonomie. Jede Lektion ist in sechs aufeinander aufbauende Stufen gegliedert, die kognitive Fähigkeiten von grundlegender Wissensaufnahme bis hin zu komplexen Anwendungs- und Transferleistungen schrittweise fördern. Im Vergleich zur klassischen Bloom’schen Taxonomie wurde das Stufenmodell in PromptAscent an die Anforderungen einer gamifizierten, digitalen Lernumgebung angepasst. Während die Bloom’sche Taxonomie primär kognitive Anspruchsstufen beschreibt, verknüpft PromptAscent diese mit konkreten Aufgabentypen, Gamification-Elementen und evidenzbasierten Lernstrategien. So wurde beispielsweise die Stufe „Variieren“ eingeführt, um gezielt Interleaving zu fördern, und mit „Wiederholen“ eine Stufe ergänzt, die Spaced Repetition und Active Recall umsetzt. Die Stufe „Meistern“ kombiniert schließlich komplexe Transferaufgaben mit dem Prinzip der Desirable Diﬀiculties. Die gestufte Struktur unterstützt nicht nur die inhaltliche Progression, sondern macht durch die Treppendarstellung den Lernfortschritt visuell erfahrbar. So werden Motivation, Orientierung und ein kontinuierliches Erfolgserlebnis gefördert.

Aufgabentypen

Die Aufgaben werden bei der Übung immer untereinander angezeigt, sodass die Lernenden zu vorherigen Aufgaben hochscrollen können. In PromptAscent kommen verschiedene Aufgabentypen zum Einsatz, die je nach Stufe unterschiedlich kombiniert werden.

Aufgabentyp	Funktion	Anwendung in Stufe
Multiple Choice	Überprüfung von Fakten- und Verständniswissen.	Verstehen (1), Anwenden (2), Wiederholen (5)
Freitextfragen	Offene Antworten in eigenen Worten, zur Förderung von Elaboration und Transfer. Möglich durch die Einbindung von KI.	Verstehen (1), Anwenden (2), Reflektieren (4), Wiederholen (5), Meistern (6)
Prompting-Aufgaben	Anwendung der erlernten Techniken in praktischen Szenarien. Auch möglich durch die Einbindung von KI.	Variieren (3), Reflektieren (4), Meistern (6)
Informations-Schnipsel	Kurze, inhaltlich prägnante Einführungen oder Erklärungen oder Erklärungen zu einem Konzept.	Verstehen (1), Anwenden (2)

Abzeichen sammeln und Wettbewerb

Ein Rucksack-Icon kennzeichnet das Inventar, das Überblick über den Fortschritt gibt und freigeschaltete Inhalte wie Abzeichen und Zusammenfassungen aufbewahrt. Abzeichen werden durch das abschließen von Levels freigeschaltet und Zusammenfassungen durch das Abschließen von Lektionen. Durch das Leaderboard und die Avatar-Darstellungen wird der soziale Vergleich sowie der Wettbewerb gefördert.

Taktik durch Wiederholungs-Challenges

Ab der zweiten Lektion erscheinen zufällig platzierte Wiederholungs-Herausforderungen in Form eines glimmernden Diamanten unter der Erde mit gesammelten Aufgaben aus vorherigen Lektionen. Sie dienen der langfristigen Wissenssicherung nach dem Prinzip der Spaced Repetition. Bei erfolgreichem Abschluss erhalten Nutzende einen zeitlich begrenzten 3-fach-Punkte-Booster, der für 10 Minuten aktiv ist. Dieses Element kombiniert Kompetenzförderung mit einem taktischen Anreizsystem. Da die Herausforderung freiwillig ist, können die Lernenden selbst entscheiden, wann sie den Punkte-Booster optimal einsetzen, wodurch ihr Bedürfnis nach Autonomie gestärkt wird.

Umsetzung

Um die Zielgruppe und deren Bedürfnisse genauer zu definieren und veranschaulichen habe ich zunächst eine Stakeholder Map erstellt. Auf dieser konnte ich definieren wer die wichtigsten Stakeholder sind.

Im Weiteren habe ich die primäre Zielgruppe, die Studierende, unter die Lupe genommen und dafür Personas erstellt um mich noch mehr damit auseinander zu setzen, was deren Bedürfnisse und Interessen für diesen Kurs sind.

Wireframing

Um die geplanten Funktionalitäten, die grundlegende Navigation und erste Ideen zu visualisieren, wurden Low-Fidelity-Wireframes als erster Entwurf der Benutzeroberfläche erstellt. Mit diesem Ansatz konnte vermieden werden, den Fokus zu früh auf gestalterische Elemente wie Farben und Illustrationen zu legen, was eine effektive und schnelle Iteration der Ideen ermöglichte. Die Wireframes umfassten unter anderem: Dashboard-Ansicht: Übersicht über Fortschritt, aktuelle Lektio und Zugang zu Inventar und Leaderboard. Lektionsansicht: Stufenbasierte Progression mit klar erkennbaren Aufgabenbereichen und Fortschrittsanzeige. Aufgabenansicht: Fokus auf Interaktion (MultipleChoice-, Freitext-, Prompting-Aufgaben) mit direktem Feedback. InventarundBelohnungen: Darstellung gesammelter Abzeichen und Freischaltungen.

High-Fidelity Wireframes und User-testing

Aus diesem Prozess resultierten verschiedene Ideen und Ansätze, die zu zwei unterschiedlichen Konzepten für den Aufbau der Plattform führten. Die beiden erarbeiteten Konzepte unterschieden sich primär in der Darstellung des Lernfortschritts und in der Aufgabendarstellung. Durch die frühzeitige Visualisierung konnten Navigationsfluss und inhaltliche Struktur getestet und optimiert werden. Konzept A: Aufbau mit Stufendarstellung und isolierten Aufgaben. Die Sidebar ist einfach gehalten und enthält lediglich ein Tutorial und eine Kartenansicht des Gesamtfortschritts.

Konzept B: Der Fortschritt wird mit einer Bergillustration dargestellt, wobei die Aufgaben in einer durchgehenden, scrollbaren Ansicht präsentiert werden. Nutzende können so jederzeit zu bereits bearbeiteten Aufgaben zurückkehren. Eine feststehende Sidebar ermöglicht zudem eine schnelle Navigation zwischen den Lektionen mit kurzer Vorschau.

Zur Validierung der narrativen und funktionalen Gestaltungsideen von PromptAscent wurde nach der Erstellung der ersten Prototypen in Figma ein vergleichender Usability-Test mit Useberry durchgeführt. Ziel war es, Präferenzen hinsichtlich Aufbau, Navigation und Motivationswirkung zu ermitteln. An der Studie nahmen insgesamt 14 Personen teil. Die durchschnittliche Bearbeitungszeit betrug 15,41 Minuten und die Teilnehmenden beantworteten Fragen zu wahrgenommener Wertigkeit, Übersichtlichkeit, Motivationswirkung und Verbesserungswünschen. Die Ergebnisse der Usability-Studie zeigen deutlich, dass die Stärken der beiden getesteten Konzepte in unterschiedlichen Bereichen liegen. Während Konzept B insbesondere durch seine klare Struktur und Orientierung überzeugt, bietet Konzept A wertvolle Gamification-Elemente zur Steigerung der Motivation.

Aspekt	Konzept A	Konzept B
Stärken	Motivierendes Levelsystem, spielerischer Look, klare Fortschrittsanzeige, praktischer Aufgabenfokus	Sehr übersichtlich, klare Navigation über Sidebar, Berg-Metapher, Lektionen-Vorschau
Kritikpunkte	Teilweise unklare Struktur, fehlender Gesamtüberblick, Farb- und Schriftprobleme	Farb- und Schriftprobleme, teils zu viel Weißraum, klarere Scroll-/Navigation-Hinweise
Nutzerpräferenz (Fortschrittsübersicht)	10%	90%
Nutzerpräferenz (Aufgabendarstellung)	40%	60%
Empfohlene Übernahme	Gamification-Elemente (Levels, Motivation)	Struktur, Navigation, Orientierung (Sidebar, Vorschau)

Die Ergebnisse des Usability-Tests zeigten eine klare Präferenz für Konzept B in Bezug auf Übersichtlichkeit und Navigation (90 % bevorzugten die Fortschrittsübersicht von Konzept B). Besonders positiv hervorgehoben wurden die Sidebar-Struktur, die klare Navigation und die motivierende Bergmetapher. Für die finale Umsetzung von PromptAscent wurde eine hybride Lösung gewählt: ̈Übersicht: Darstellung in Form von Stufen aus Konzept A. Sidebar: Darstellung mit Auflistung von Lektionen aus Konzept B. Aufgabendarstellung: Struktur aus Konzept B. Die Entscheidung für die Stufendarstellung basiert auf Erkenntnissen der Small-Area Hypothese. Diese besagt, dass Menschen motivierter sind, wenn sie ihren Fortschritt in kleinen, überschaubaren Bereichen wahrnehmen, anstatt in Relation zu einem fernen Endziel.

Userflow

Um die Nutzerführung in PromptAscent klar zu strukturieren, wurde ein User Flow entworfen. Dieser beschreibt die zentralen Schritte, die Nutzende von der Anmeldung bis hin zum Abschluss einer Lektion oder eines Levels durchlaufen. Diese visuelle Darstellung ermöglicht es, alle möglichen Aktionen und Ausgänge zu berücksichtigen, sodass logische Fehler oder Barrieren frühzeitig erkannt werden können. Der Flow verdeutlicht sowohl die Einstiegswege (Login per E-Mail-Link, Profilerstellung) als auch die Navigation innerhalb der Anwendung (Home, Inventar, Leaderboard, Lektionsübersicht, Einstellungen). Außerdem werden die möglichen Ausgänge wie das Abschließen von Lektionen oder das Löschen des Accounts dargestellt.

Style Guide

Die Farbgestaltung sowie die gewählte Typografie von PromptAscent orientiert sich am etablierten Corporate Design von MUC.DAI, da die Anwendung im Rahmen eines Angebots dieser Initiative entwickelt wurde. Verwendet werden die Hausschrift Untitled Sans für Überschriften sowie, als ergänzende Systemschrift, Arial.

Für die visuellen Elemente von PromptAscent wurden bewusst der sogenannte 8-Bit- bzw. Pixel-Stil gewählt. Dieser knüpft an die Ästhetik klassischer Retro-Spiele des späten 20. Jahrhunderts an, als Entwickler:innen aufgrund begrenzter Speicher- und Rechenkapazitäten nur mit reduzierter Farbpalette und niedriger Auflösung arbeiten konnten. So entstanden mit „Super Mario Bros.“, „The Legend of Zelda“ und „Pac-Man“ Spiele, die trotz technischer Einschränkungen zentrale Prinzipien des Spieldesigns etablierten. Die Klarheit und Einfachheit des 8-Bit-Stils steigert auch heute die Benutzerfreundlichkeit, da sein gridbasierter Aufbau übersichtliche und leicht verständliche Interfaces ermöglicht. Der 8-Bit-Stil ist für PromptAscent nicht nur eine ästhetische Entscheidung, sondern auch ein Symbol: Er verweist auf den Weg von den technischen Begrenzungen früher Computerspiele hin zu den heutigen Möglichkeiten der KI, ganze Texte und Bilder zu generieren. Damit spiegelt die Gestaltung selbst die „Reise“ wider, die auch die Lernenden im Umgang mit Prompting antreten. Die Icons wurden eigenständig in Figma entworfen, inspiriert von gängigen Symbolbibliotheken wie Google Fonts und Font Awesome sowie von Ideen, die mithilfe von ChatGPT generiert wurden.

Prototyping

Als letzten Schritt vor der technischen Umsetzung habe ich die gewählten Gestaltungsprinzipien in einem Prototypen angewendet um das Gesamtbild zu sehen.

Technische Umsetzung

PromptAscent ist eine Next.js-Webanwendung (TypeScript, Tailwind) mit Firebase als Plattform-Backend. Die Lektionsinhalte liegen als statische JSON-Dateien im Frontend-Bundle. Dynamische Daten wie Konten, Fortschritt und Punkte werden in Cloud Firestore gespeichert. Die Bewertung von Antworten und Prompts erfolgt über Gemini 2.0 Flash, angesteuert serverseitig über Next.js API Routes/Server Actions. Analytics werden clientseitig erfasst. Der Gemini-API-Schlüssel wird im Google Cloud Secret Manager verwaltet und steht ausschließlich den Serverkomponenten (Next.js Server Ac- tions/Genkit) zur Verfügung.

Testing

Die Evaluation wurde im Rahmen einer explorativen Ein-Gruppen-Studie durchgeführt. Die Plattform wurde für eine begrenzte Anzahl freiwilliger Testpersonen bereitgestellt. Es gab keine Vergleichsgruppe ohne Gamification, sodass keine kausalen Rückschlüsse möglich sind. Stattdessen wird auf aggregierter Ebene interpretiert, inwiefern bestimmte Gestaltungselemente motivierend oder hinderlich wahrgenommen wurden. Aufgrund der geringen Stichprobengröße sind die quantitativen Ergebnisse nur eingeschränkt aussagekräftig. Die Erhebung kombiniert objektive Nutzungsdaten, erfasst über Google Analytics, mit subjektiven Rückmeldungen in Form von freiwilligen Umfrageaussagen im Likert-Stil.

Subjektive Daten (Likert-Umfrage)

Es wurde eine gezielte Auswahl von sechs Items aus dem Gameful Experience Questionnaire getroffen (vgl. (Högberg u. a., 2019)). Die Reduktion auf wenige, zentrale Aussagen sollte die Befragung fokussieren und die Belastung der Teilnehmenden gering halten. Abweichend vom Originalinstrument (1–7) wurden die Antworten auf einer 1–5-Likert-Skala erhoben (“Trifft gar nicht zu”–“Trifft voll und ganz zu”), um die Beantwortung zu vereinfachen. Die Feedback-Items wurden zwischen die Aufgaben der ersten Lektion eingebettet. Anfangs waren sie über die ersten drei Lektionen verteilt, wurden jedoch später zur Steigerung der Antwortquote gebündelt. Folgende Fragen wurden gestellt:

Objektive Daten (Google Analytics)

Das Nutzungsverhalten wurde mit Google Analytics erfasst (u. a. Interaktionsdauer sowie Events wie lesson_completed, leaderboard_selected, inventory_clicked). Ergänzend wurden aus der users-Collection pro Nutzendem aggregierte Fortschrittsdaten ausgewertet: Anzahl freigeschalteter Lektionen (unlockedLessons), Anzahl abgeschlossener Lektionen (completedLessons) sowie Punktesumme (totalPoints).

Feature Adoption:

Intensität der Nutzung:

Interpretation

Objektive Nutzungsdaten und subjektive Einschätzungen zeigen ein konsistentes Bild: Nutzende erleben die Plattform als motivierend, führend und immersiv, gleichzeitig kommt es in frühen Stages zu beachtlichen Drop-offs. Social/Inventar-Features werden von einem Drittel der Aktiven genutzt, Wiederholungs-Herausforderungen selten. Die Eﬀizienz steigt mit dem Fortschritt, bleibt jedoch im Median niedrig. Daraus leiten sich als Hebel ab: frühe Stages stabilisieren (klarere Mikroziele, Feedback, kleine Belohnungen), Abschlussanreize nach Freischaltungen setzen und Boss-Challenges prominenter sowie belohnender einbinden.

Reflektion

Trotz der positiven Tendenzen bestehen Entwicklungsfelder: Wiederholungslogik: Der direkte Zweit- und Drittversuch nach einer falschen Antwort kann dazu verleiten, Feedback zu übernehmen statt tatsächlich zu lernen. Nachhaltigere Wiederholungszyklen könnten die Wirksamkeit der Anwendung erhöhen. Audiovisuelles Feedback: Zusätzliche Mikro-Animationen und dezente Sounds könnten das spielerische Erlebnis weiter stützen. Zugänglichkeit: Der aktuelle Desktop-Fokus schränkt die Nutzung ein. Eine Mobile-Optimierung ist für Alltagslernen essenziell. Inhaltsflexibilität: Inhalte (Lektionen, Badges, Zusammenfassungen) sind im Frontend gebündelt. Änderungen erfordern ein Redeployment und behindern schnelle Iterationen. Evaluationsdesign: Freiwillige Testphase ohne Vergleichsgruppe und ein reduziertes, nicht verlinktes Survey-Instrument begrenzen die Aussagekraft. Individuelle Zusammenhänge zwischen Nutzung und Wahrnehmung konnten nicht geprüft werden. Prüfungsvalidität/Sicherheit: Aktuell sind Prompt-Injection-Strategien möglich (z. B. Einbettung von Instruktionen in Nutzereingaben), wodurch Lernende „schummeln“ können. Das schmälert den Bewertungsnutzen und sollte gehärtet werden.