Lebensmittelverschwendung stellt ein zentrales ökologisches, ökonomisches und gesellschaftliches Problem dar, das gerade bei jüngeren Zielgruppen ausgeprägt ist. Digitale Lernumgebungen bieten die Möglichkeit, komplexe Themen wie Nachhaltigkeit und Lebensmittelwertschätzung altersgerecht und interaktiv zu vermitteln. Häufig weisen bestehende Angebote jedoch Defizite in der visuellen Konsistenz, der Nutzerführung und der motivationalen Aufbereitung auf, wodurch der eigentliche Lernprozess beeinträchtigt wird.
Dieses Praxisprojekt beschäftigt sich mit dem systematischen UI/UX-Redesign der bestehenden Lernplattform „FoodMindscape“, die Kindern der Klassenstufen 3–6 den nachhaltigen Umgang mit Lebensmitteln vermittelt. Ziel ist ein didaktisch fundiertes, visuell konsistentes und altersgerechtes Gestaltungskonzept, das die kognitive Belastung reduziert und die Lernmotivation nachhaltig stärkt. Die Gestaltungsentscheidungen werden dabei konsequent aus lernpsychologischen und medienpädagogischen Grundlagen abgeleitet, unter anderem der Cognitive Load Theory, der Selbstbestimmungstheorie sowie der Cognitive Theory of Multimedia Learning.
Als Grundlage dienen eine Zielgruppenanalyse sowie eine heuristische Evaluation des Ist-Zustands nach den Usability-Prinzipien von Nielsen. Aufbauend darauf wurde ein umfassendes Design-System entwickelt, das ein tokenbasiertes Farbsystem, Typografie, Layout- und Abstandsregeln, UI-Komponenten samt Zuständen sowie Accessibility-Richtlinien umfasst. Ergänzt wird das Konzept durch die Leitfigur „Sprossi“, die als narratives Element Orientierung, Motivation und emotionale Anschlussfähigkeit bietet. Die Umsetzung erfolgte in Form eines klickbaren High-Fidelity-Prototyps in Figma, der die zentralen Anwendungsbereiche Landingpage, Dashboard, Modulübersicht sowie Quiz inklusive Feedback-Zustände abbildet und mittels heuristischer Expertenprüfung und eines kognitiven Walkthroughs formativ evaluiert wird.