Gamification UX
Ux- und Ui-Design für die Bildungsplattform Madrasa
Im Rahmen der MBRGI-Initiativen wurden wir dazu gebracht, an ihrer Madrasa-Bildungsplattform mitzuarbeiten. Ziel der Zusammenarbeit war es, das Benutzererlebnis spielerisch zu gestalten und sie dadurch zu mehr und häufigerem Üben zu ermutigen, indem man sie in einen Wettbewerb miteinander versetzt.
Wir stellten uns den Gamification-Prozess vor, die verschiedenen Bildschirme, um unsere Ziele zu erreichen und gleichzeitig der Plattform und den pädagogischen und kulturellen Besonderheiten des Projekts zu folgen.
Heute bietet Madrasa Millionen von Benutzern kostenlosen Zugang zu Mathematik- und Naturwissenschaftskursen auf Arabisch und Englisch.
Ux: Startseite Wireframind, V1. Madrasa-Homepage-Konzept: E-Learning für alle.
Das Bild zeigt das Wireframe einer ersten Version der Homepage von Madrasa, einer Online-Bildungsplattform. Zu den Schlüsselelementen gehören Abschnitte, die Benutzerprofilen, Neuigkeiten und der Präsentation von Gewinnern oder Wettbewerben gewidmet sind. In der Mitte bietet ein Abschnitt namens „Learning Path“ eine Suchmaschine und interaktive Fortschrittskarten mit zugewiesenen Punkten. Im unteren Teil finden Sie Informationen zu Vision, Zielen und Funktionen der Plattform sowie Download-Links für die Android- und iOS-Apps.
Ui: Finalisierung der Profilseite. Dynamische Madrasa-Homepage.
Das Bild zeigt eine finalisierte Version der Homepage der Madrasa-E-Learning-Plattform. Oben lädt ein Banner die Benutzer dazu ein, die Besten ihres Landes zu sein, begleitet von einer Hervorhebung der Gewinner und Auszeichnungen. Der mittlere Abschnitt bietet einen interaktiven „Lernpfad“ mit farbenfrohen Kategorien und Fortschrittspunkten. Eine Box hebt ein inspirierendes Zitat von Mohammed Bin Rashid Al Maktoum hervor. Unten beschreibt die Plattform ihre Mission, Vision und Ziele, begleitet von Links zum Herunterladen der Apps auf iOS und Android, allesamt mit einer violetten und weißen Farbpalette für ein attraktives und professionelles Design versehen.
Ui: Erstellung von Popups. Auswahl des Avatars. Avatar-Anpassung – Madrasa.
Das Bild zeigt ein Popup-Fenster der Madrasa-Plattform, das der Avatar-Anpassung gewidmet ist. Der Hauptbereich bietet eine Auswahl illustrierter Dinosaurier-Ikonen mit verschiedenen Accessoires und Themen. Jedes Symbol wird von einer Legende begleitet, die die Anzahl der Punkte angibt, die zum Freischalten erforderlich sind. Bereits entsperrte Elemente sind farbig, während gesperrte Elemente grau mit dem Symbol „Gesperrt“ sind. Die Benutzeroberfläche mit violettem Hintergrund ist einfach und ansprechend und ermutigt Benutzer zur Interaktion und zur Personalisierung ihrer Erfahrung auf der Plattform.
Ux: Wireframing der Profilseite. Interaktives Benutzerprofil auf Madrasa.
Das Bild zeigt ein Modell der Seite „Mein Profil“ auf der Bildungsplattform Madrasa. Oben werden das Level und der Spitzname des Benutzers sowie eine Schaltfläche zum Verbessern seines Rangs angezeigt. Der Bereich „Tägliche Lektion“ bietet ein Lehrvideo mit der Möglichkeit, nach dem Ansehen Punkte zu sammeln. Weiter unten wird eine Sammlung von Abzeichen präsentiert, die die Leistungen des Benutzers in verschiedenen Kategorien anzeigen. Schließlich können Sie mit den Listen „Beobachtungsliste“ und „Meine letzten 5 Lektionen“ die angesehenen oder noch anzusehenden Videos mit zugehörigen Punkten für jeden Inhalt verfolgen. Das Design ist intuitiv und legt Wert auf Interaktivität und Engagement der Lernenden.
Ui: Erstellung des Karten-Popups. Top 10 Madrasa-Benutzer in Ägypten.
Das Bild zeigt ein Mock-up der Top-10-Benutzerrankings auf der Madrasa-Bildungsplattform für Ägypten. Jeder Rang, vom 1. bis zum 10. Platz, wird von einem Benutzer-Spitznamen, einem Avatar und einer Angabe der Anzahl der abgeschlossenen Videos begleitet (hier 50 Videos für jeden Benutzer). Die Rangliste ist in zwei Spalten unterteilt, mit klarem Design und markanten violetten Farben. Oben wird der Name des Landes mit seiner Nationalflagge angezeigt, was den Wettbewerbs- und Gemeinschaftscharakter der Plattform verstärkt.
Ui: Finalisierung meines Profilmodells. Benutzerprofilseite auf Madrasa.
Das Bild zeigt die Profilseite eines Benutzers auf der Bildungsplattform Madrasa. Oben werden Rang und Punkte mit einer ikonischen goldenen Trophäe angezeigt. Der nächste Abschnitt enthält eine tägliche Lektion, komplett mit einem Lehrvideo und Punkten, die Sie für das Ansehen sammeln können. Weiter unten werden im Abschnitt „Abzeichen“ verschiedene Auszeichnungen angezeigt, die Sie erhalten haben oder die freigeschaltet werden müssen, mit farbigen Symbolen. Schließlich kann der Benutzer seine „Beobachtungsliste“ und seine „letzten 5 Lektionen“ einsehen, geordnet nach Kategorie und gesammelten Punkten. Die Seite ist mit einem klaren Design und violetten Akzenten gestaltet, typisch für Madrasas grafische Charta.
Ui; Finalisierung des Lernpfadmodells. Bildungstour auf Madrasa.
Dieses Bild stellt den Abschnitt „Lernpfad“ der Madrasa dar. Oben auf der Seite erscheint eine Nachricht, die dem Benutzer zu seinem aktuellen Rang und seinen Punkten gratuliert. Im zentralen Bereich werden verschiedene Bildungswege („Pfadliste“) mit Angaben zu den zu sammelnden Punkten, der Anzahl der Videos und der voraussichtlichen Bearbeitungszeit aufgeführt. Unten zeigt ein Videoplayer eine Beispiellektion mit erziehungswissenschaftlichen Inhalten. Auf der rechten Seite ermöglicht eine „Path Watch List“ dem Benutzer, seinen Lernfortschritt zu verfolgen. Das Layout ist klar und intuitiv, akzentuiert durch Lilatöne, die der visuellen Identität der Plattform entsprechen.
Benutzeroberfläche: Bestenlistenmodell. Ranglisten und Leistungen auf Madrasa.
Dieses Bild zeigt den Bestenlistenbereich von Madrasa, in dem Benutzer Bestenlisten basierend auf den gesammelten Punkten anzeigen können. Im oberen Teil wird eine Glückwunschnachricht mit dem Rang und den Punkten des aktuellen Benutzers angezeigt. Die Hauptbestenliste zeigt die 100 besten Benutzer mit ihren Rängen, Punkten und Avataren. Weiter unten sind bestimmte Rankings nach Kategorien (A, B, C) mit farbigen Registerkarten für jedes Segment unterteilt. Der untere Abschnitt veranschaulicht die „Top 10 nach Ländern“ anhand einer interaktiven Karte arabischer Länder, auf der violette Markierungen aktive Standorte anzeigen. Die violette und blaue Farbpalette spiegelt die visuelle Identität von Madrasa wider und sorgt für ein klares und ansprechendes Benutzererlebnis.
Ux: Startseite Wireframind, V2. Mockup der Madrasa-Homepage (Version 2).
Dieses Bild zeigt ein Wireframe einer geplanten Madrasa-Homepage mit einem klaren und organisierten Layout. Der obere Teil enthält einen Aufruf zum Handeln für einen Wettbewerb und die Gewinner, gefolgt von einem Abschnitt zur Auswahl eines Lernbereichs. Ein weiterer Bereich bietet Bildungswege in Form von Karten und Fortschrittsanzeigen. Benutzer können ihren Fortschritt auch über eine Anmelde- oder Kontoerstellungsschaltfläche verfolgen. Weiter unten beschreibt ein „Über“-Abschnitt die Mission, Vision und Ziele von Madrasa, während Sie über Schaltflächen mobile Anwendungen herunterladen können. Das Layout umfasst abgerundete Formen und fließende Übergänge, was eine angenehme und intuitive Navigation unterstützt.
