Portfolio

Mobile App

Mobile App

nu.Education Mobile App

nu.Education Mobile App

nu.Education Mobile Web-App – Lernen neu gedacht

Projektüberblick
Die mobile Web-App von nu.Education, entwickelt von der NU Technology AG, ist Teil der umfassenden Learning Experience Platform (LXP). Sie wurde speziell für Lernende konzipiert – mit dem Ziel, Lernen jederzeit, überall und auf jedem Gerät zugänglich zu machen.

Die App ermöglicht Lernenden, ihren individuellen Lernpfad zu verfolgen, Fortschritte zu messen und auf personalisierte Lerninhalte zuzugreifen – alles eingebettet in ein modernes, leicht verständliches Interface. Jetzt die Web-App öffnen

Die Design-Herausforderung

Eine Lernplattform für mobile Nutzung zu gestalten bedeutet weit mehr, als Inhalte einfach „responsive“ zu machen. Lernende haben unterwegs andere Bedürfnisse als im Desktop-Kontext:

  • schnelle Orientierung und klare Navigation,

  • Fokus auf Kernfunktionen (Lernmodule, Fortschritt, Aufgaben, Benachrichtigungen),

  • minimierte kognitive Belastung und Ablenkung,

  • einfache Interaktion auch auf kleinen Bildschirmen,

  • und eine zugängliche, angenehme User Experience – unabhängig vom Gerät.

Diese Anforderungen machten den Designprozess besonders komplex: Jede Entscheidung musste das Lernverhalten in kurzen, fokussierten Sessions unterstützen und gleichzeitig mit der Tiefe der Plattform im Hintergrund harmonieren.

Der Designprozess

1. Nutzerverständnis & Research

Im ersten Schritt stand das Verständnis der Lernenden im Vordergrund:
Wie lernen sie mobil? Welche Situationen (z. B. im Zug, in Pausen, abends zu Hause) prägen ihre Nutzung?
Durch Interviews, Umfragen und Nutzertests mit echten Lernenden entstand ein klares Bild: Mobile Nutzung bedeutet Mikro-Lernen – kurze, zielgerichtete Lernphasen mit hoher Effizienz.

Diese Erkenntnisse flossen in die Entwicklung von Personas wie „Lina, 22, Lernende im Gesundheitswesen“, die Inhalte in kleinen Etappen konsumiert, Fortschritte visuell nachvollziehen möchte und sich stark auf Feedback und Motivation stützt.

2. Wireframing & Informationsarchitektur

Basierend auf den Bedürfnissen der Lernenden entstand eine reduzierte Informationsarchitektur, die sich auf wenige, zentrale Module konzentriert:

  • Dashboard: Überblick über Fortschritt, anstehende Aufgaben und Lernziele

  • Lernmodule: Zugang zu Kursinhalten, Quiz, Medien

  • Fortschrittsanzeige & Badges: visuelle Motivationselemente

  • Benachrichtigungen: Reminder & Feedback

In Low-Fidelity-Wireframes wurde getestet, wie diese Elemente auf mobilen Geräten intuitiv angeordnet werden können. Besonders wichtig war hier die Balance zwischen Einfachheit und Tiefe – Lernen soll sich flüssig und leicht anfühlen, nicht überladen.

3. Visuelles Design & UI-System

Im High-Fidelity-Design wurde ein helles, fokussiertes UI entwickelt, das Lernmotivation fördert: klare Farbkontraste, weiche Übergänge, freundliche Typografie und ein konsistentes Icon-System.

Schlüsselprinzipien waren:

  • Klarheit: kein überflüssiges Element, keine visuellen Barrieren

  • Feedback: jede Aktion (z. B. abgeschlossene Lektion) wird durch Mikroanimationen oder visuelle Hinweise belohnt

  • Barrierefreiheit: optimierte Lesbarkeit, Touch-Zonen und Farbkontraste

4. Prototyping

Mit Figma wurde ein interaktiver Prototyp der mobilen Web-App erstellt. Dieser simulierte reale Nutzungsszenarien – etwa das Öffnen eines Kurses, den Abschluss einer Lerneinheit oder das Einsehen des Lernfortschritts.

Ziel war es, sicherzustellen, dass jede Interaktion sich intuitiv und motivierend anfühlt. Der Prototyp wurde so gestaltet, dass Lernende den Flow zwischen Lernen, Feedback und Fortschritt als natürlich erleben.

5. Prototype Testing

Die Prototypen wurden mit Lernenden unterschiedlicher Altersgruppen getestet. Dabei zeigte sich:

  • Lernende bevorzugen klare Fortschrittsanzeigen statt komplexer Menüs.

  • Motivationselemente wie Badges und tägliche Lernziele steigern die Nutzungshäufigkeit.

  • Das mobile Dashboard wurde mehrfach angepasst, um mit einem Blick Orientierung zu geben – Lernstand, offene Aufgaben, neue Inhalte.

Durch iterative Testzyklen entstand ein Produkt, das nicht nur funktional, sondern emotional ansprechend ist – Lernen fühlt sich positiv, leicht und belohnend an.

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

Portfolio