nu.Education – Design einer modernen Learning Experience Platform (LXP)

Projektüberblick
nu.Education ist eine cloudbasierte Learning Experience Platform (LXP), entwickelt von NU Technology AG.
Die Plattform unterstützt Schulen, Ausbildungsinstitutionen und Unternehmen mit KI-gestütztem, kompetenzbasiertem Lernen.
Als Designer durfte ich den kompletten Prozess des Interface-Designs begleiten – von der Bedarfsanalyse über Wireframing und Prototyping bis hin zu Usability-Tests und finalem Style.

Die Herausforderung & Komplexität

Ein LXP wie nu.Education ist kein simples Lernportal – es verbindet Lehr- und Lerninhalte mit adaptiven Prozessen, Nutzerrollen (z. B. Lernende / Lehrende / Admins), KI unterstützter Inhaltsgenerierung, Skill-Gap-Analysen, Fortschrittstracking und individuellen Empfehlungssystemen.

Dabei gilt es:

• verschiedenste Nutzergruppen zu berücksichtigen (Lernende, Lehrende, Ausbildungsinstitutionen, Admins),

• rechtliche Anforderungen / Datenschutz zu erfüllen,

• technische Restriktionen (Responsiveness, Performance, Skalierbarkeit),

• und gleichzeitig eine intuitive, ansprechende Benutzeroberfläche zu schaffen, die das adaptive Lernen unterstützt.

All das macht das Design anspruchsvoll – nicht nur visuell, sondern konzeptuell und funktional.

Mein Designprozess

1. Nutzerbedarf & Research

Zuerst habe ich Workshops und Interviews mit Stakeholdern durchgeführt: Lehrpersonen, Ausbildungsinstitutionen, Admins und Lernenden. Ziel war es zu verstehen, wie Lernen, Bewertung und Fortschritt heute funktioniert, wo Schmerzpunkte liegen, und wie adaptive Lernpfade aussehen könnten.

Aus diesen Erkenntnissen entstanden Personas und User Journeys: z. B. Lernender, der seinen Fortschritt nach Kompetenzstufen tracken will; Admin, der Kurse anlegt, Skill-Gaps definiert und Auswertungen benötigt.

2. Informationsarchitektur & Wireframing

Auf Basis der Personas und User Journeys habe ich die Informationsarchitektur der Plattform skizziert: Hauptbereiche wie Kurskatalog, Dashboard, Skill-Gap-Analyse, Assessment-Modul, Admin-Panel etc.

Darauf folgten erste Wireframes (Low-Fidelity), in denen Layouts definiert wurden: Navigation, Menüstruktur, Dashboard-Komponenten, Formulare, Tabellenansichten. Ziel war es frühzeitig Usability-Flüsse sichtbar zu machen, bevor visuelles Design ins Spiel kommt.

3. Visuelles Design & UI-Komponenten

Nach dem Wireframing entwickelte ich das High-Fidelity-Design: Farbsysteme, Typografie, Iconographie, Buttons, Formulare, Karten / Lessons-Preview, Fortschrittsbalken, Visualisierung von Skill-Lücken.

Besondere Aufmerksamkeit galt der Konsistenz – sowohl über Nutzerrollen hinweg (Lernende vs Admin) als auch im adaptiven Kontext (z. B. wie dynamische Empfehlungen sichtbar gemacht werden).

4. Prototyping

Mit Tools wie etwa Figma oder Adobe XD (je nach Projekt) erstellte ich interaktive Prototypen. Diese zeigten typische User-Flows: Registrierung / Login, Kursauswahl, Bearbeitung von Lerneinheiten, Feedback & Bewertung, Admin-Dashboard mit Statistiken.

So konnte man simulieren, wie sich Navigation & Interaktion fühlen – z. B. das Aufrufen eines Assessments, das Einsehen von Ergebnissen, oder wie eine Skill Gap Analyse visualisiert wird.

5. Nutzer-Testing / Prototype Testing

Der Prototyp wurde mit echten Nutzer:innen getestet: Lernende, Lehrpersonen, Admins. Ich moderierte Testsessions, beobachtete, wo Nutzer*innen steckenbleiben, welche Begriffe unklar sind, und wie komfortabel sie durch das Dashboard navigieren.

Feedback floss zurück in die Überarbeitung der Komponenten: umbenannte Begriffe, Anpassung der Menüstruktur, Verbesserung der Sichtbarkeit wichtiger KPIs (z. B. Prozent abgeschlossen, verbleibende Module, Hinweise bei fehlenden Kompetenzen), und Optimierung des responsiven Verhaltens (Desktop / Tablet / Mobilgeräte).

6. Iteration & Übergabe

Nach mehreren Iterationsrunden entstand die finale Design-Version, die an das Entwicklungsteam übergeben wurde – inklusive Styleguide, Design-Spezifikationen und Übergabe aller Assets. Ich begleitete die Umsetzung und unterstützte bei Fragen zur responsiven Gestaltung, Accessibility und Interaktionsdetails.

Wenn du die Plattform live erleben möchtest, klicke hier: nu.Education Web-App öffnen