Lisa Gerdes - Webdesign

Prototyp Entwicklung einer interaktiven E-Learning Webanwendung

„Just In Time Academy“

Semesterarbeit im Modul „Programmieren“ im zweiten Semester, umgesetzt als Einzelprojekt. Die Entwicklung erfolgt in Visual Studio Code.

Problemstellung

Du beginnst neu als Auszubildende:r oder Quereinsteiger:in in einer Logistikfirma. Begriffe, Abläufe, Systeme, alles wirkt fremd. Du stehst vor einer Branche, in der jedes Detail zählt: Die richtigen Waren sollen zur richtigen Zeit, zum richtigen Preis am richtigen Ort ankommen.

Für viele Neueinsteigende ist genau das die erste Hürde. Es entsteht der Bedarf nach einem Lernangebot, das Orientierung gibt, Grundlagen verständlich macht und unterschiedliche Vorkenntnisse ernst nimmt.

„Die richtigen Logistik-Lerninhalte, sollen zum richtigen Zeitpunkt, im passenden Format, am passenden Ort vermittelt werden“

Konzept

Die Lerninhalte wurden auf Basis zweier Leitfaden‑Interviews entwickelt und in Personas mit unterschiedlichen Bedürfnissen überführt. Daraus entstand ein modularer Aufbau mit drei Modulen: Seefracht, Luftfracht, Lagerlogistik.

Für die Projektumsetzung wurde das Grundlagen‑Level des Seefracht‑Moduls ausgewählt und in animierten Schulungsvideos umgesetzt. Die Videos wurden in Vyond produziert und das Interface der Webanwendung in Figma gestaltet. Ergänzend wurden die prozessualen Abläufe in einem UML-Aktivitätsdiagramm visualisiert.

HTML und CSS

Das Grundgerüst der Webanwendung wurde in Figma designed und in der index.html-Datei aufgebaut. Die visuelle Gestaltung erfolgte anschließend über eine zentrale style.css-Datei, in der ein globales Designsystem mit CSS‑Variablen im :root definiert wurde. Farben, Typografie, Abstände und Rundungen ließen sich so konsistent steuern und flexibel anpassen. Darauf aufbauend entstanden wiederverwendbare Klassen für Typografie und Buttons, die in den HTML‑Dateien eingesetzt wurden, um ein einheitliches und skalierbares Interface zu gewährleisten. Beides sind Grundlagen aus dem ersten Semester im Modul Media Engineering.

index.html

style.css

Figma Wireframes

JavaScript

Die Funktionalität der Webanwendung wurde in JavaScript umgesetzt und im Verlauf des Projekts schrittweise modularisiert, um Struktur und Wartbarkeit zu verbessern. In den HTML‑Dateien wurde anschließend nur eine zentrale script.js-Datei eingebunden, die als Einstiegspunkt dient. Durch das Attribut „type=module“ im <script> Tag der HTML-Dateien wird das Skript erst ausgeführt, nachdem das HTML vollständig geladen ist. Die Navigation zwischen bestimmten Bereichen innerhalb einer HTML‑Datei erfolgt dynamisch über JavaScript. Elemente werden ein‑ oder ausgeblendet, indem gezielt die Klasse .hidden hinzugefügt oder entfernt wird.

Funktionsumfang

Nachdem sich Nutzende über das Lernangebot informiert haben, können sie über den Login ihren persönlichen Lernpfad starten. Im Dashboard werden sie mit einer individuellen Begrüßung empfangen und sehen die verfügbaren Seefracht‑Kurse. Aktuell ist das Grundlagen‑Modul freigeschaltet. Dort lässt sich das erste Kapitel Einführung in die Logistik und die Seefracht öffnen und starten.

Das Kapitel beginnt mit einem Schulungsvideo, gefolgt von fünf Fragen zum vermittelten Inhalt. Die Abfrage kombiniert verschiedene Formate: Freitext, Wahr/Falsch sowie A‑, B‑ oder C‑Auswahl. Jede Antwort wird direkt bewertet. Bei falschen Eingaben erhalten die Nutzenden kurze Denkanstöße. Die Anwendung registriert richtige und falsche Antworten und wertet sie aus. Werden mindestens drei von fünf Fragen korrekt beantwortet, gilt das Kapitel als abgeschlossen und der Fortschrittsbalken im Dashboard wächst entsprechend mit.

Hinweis: Die Webanwendung ist auf die Maße eines „MacBook Pro 16" 1728x1117“ ausgerichtet. Der Prototyp wurde nicht für unterschiedliche Bildschirmgrößen optimiert und ist daher noch nicht responsive.

Ausblick

Perspektivisch soll die Anwendung um weitere Lerninhalte erweitert werden. Da es sich bei der aktuellen Version um einen Prototypen handelt, werde ich für eine zukünftige Skalierung die bestehende Struktur prüfen und neu ausrichten müssen, um zusätzliche Module und Kapitel sauber integrieren zu können.

Schulungsvideos

Die Schulungsvideos wurden von mir inhaltlich konzipiert und mithilfe der Vyond Software umgesetzt.