Strategische UX/UI Entwicklung für mebis und Bayern Cloud Schule
Expertise
Laufzeit
Challenge
Um die digitale Bildung in Bayern zu stärken galt es, die etablierte Marke mebis nahtlos in die neue Marke Bayern Cloud Schule zu integrieren. Dies erforderte eine kluge strategische und UX-seitige Fusion, damit User die Verbindung zwischen mebis und Bayern Cloud Schule sofort verstehen. Zum anderen war es entscheidend, auf die vergangene Kritik der User an der Usability der mebis-Anwendungen einzugehen. Ziel war es, die Nutzerfreundlichkeit deutlich zu optimieren, da einige Herausforderungen im Verständnis und bei der Nutzung der Anwendungen bestanden.
Solution
In einer 2,5-jährigen Zusammenarbeit mit dem ISB und Kultusministerium entwickelten wir eine Markenstrategie für die Integration von mebis in ByCS. Um zukünftige Kooperationen und die Weiterentwicklung von ByCS mit verschiedenen Partnern zu sichern, bauten wir zudem ein umfassendes Design System auf. Darauf aufbauend wurden verschiedene Anwendungen kontinuierlich nutzerfreundlich optimiert und für künftige Anforderungen fit gemacht. Dazu zählten unter anderem die Entwicklung von Konzepten für die digitale Tafel, die KI-Integration in die Lernplattform, die Optimierung der Topbar und die Weiterentwicklung des mebis Magazins, stets in enger Abstimmung mit den technischen Implementierungspartnern des ISB.
Klare Markenstrategie für digitale Bildung
Im Sommer 2023 trat das ISB an uns heran mit der Bitte, gemeinsam den Markenkosmos der Bayern Cloud Schule inklusive der mebis Anwendungen zu analysieren und eine Empfehlung für die zukünftige Markenstrategie zu entwickeln. Hierfür initiierten wir einen gemeinsamen Markenworkshop mit Teilnehmenden des ISB und des Kultusministeriums. Gemeinsam entstand das Zielbild ein einprägsames Markenerlebnis zu schaffen, in dem das Produkt übergreifend betrachtet und ganzheitlich gedacht wird: Denn einprägsame Markenerlebnisse entstehen, wenn man Silodenken vermeidet, das Produkt übergreifend betrachtet und ganzheitlich denkt. Auf Basis der Ergebnisse aus dem Workshop erarbeiteten wir eine Markenempfehlung für die Bayern Cloud Schule und die mebis Anwendung. Unser Fokus lag auf der Definition eines stringenten Selbstbildes in Form einer Markenpyramide sowie einer Empfehlung für die künftige Positionierung und die Markennamen. Aufbauend auf unserer Markenstrategie setzte das ISB die Fusion der mebis Anwendungen in den Bayern Cloud Schule Kosmos um, bei der wir beratend unterstützten.
Einblick in die Interviews für den Markenworkshop
Präsentationsvorbereitung
Ein Design System für alle Anwendungen
Da die mebis und ByCS Anwendungen viele Divergenzen in Bezug auf Farbschemata (Light, Dark, High Contrast), Typografie und UI-Elemente aufwiesen, haben wir ein umfassendes digitales Design System konzipiert und in Figma aufgebaut. Durch die Etablierung einer klaren Struktur aus Atomen, Molekülen und Organismen gewährleisten wir eine übergreifende Einheitlichkeit auf granularer Ebene, während größere Komponenten anwendungsspezifisch adaptierbar bleiben. Dieser kollaborative Ansatz, der auch die Erweiterung des Systems mit anderen Partnern (Agenturen) vorsieht, wird durch detaillierte Dokumentationen zu jeder Komponente – inklusive Beschreibung, Verwendungszweck, Verantwortlichkeiten und aktuellem Status – unterstützt. Diese Transparenz und klare Rollenverteilung optimiert die Zusammenarbeit aller Beteiligten, von Redakteuren über Entwickler bis hin zum Kunden, und sichert eine effiziente und konsistente Weiterentwicklung der Plattform.
Entwicklungs-Workflow mit Storybook
Die Integration von Storybook in den Entwicklungsprozess bietet folgende Vorteile:
- Automatischer Neubau: Bei Codeänderungen an der Komponente wird diese automatisch neu gebaut.
- Automatisches Browser-Update: Der Browser, in dem Storybook läuft, wird automatisch aktualisiert, sodass Entwickler Änderungen sofort visuell überprüfen können.
- - Vite als Build-Tool: Der Storybook-Build-Prozess verwendet Vite anstelle der traditionellen Rollup-Pipeline. Vite zeichnet sich durch seine hohe Geschwindigkeit und effiziente Entwicklungserfahrung aus, insbesondere bei größeren Projekten.
Barrierefreie Navigation
Die technisch fundierte Implementierung einer barrierefreien Topbar ist ein wesentlicher Schritt hin zu einer inklusiven Webpräsenz. Durch die konsequente Anwendung von WCAG-Richtlinien, den Einsatz semantischen HTMLs und ARIA-Attributen sowie die Integration nutzerzentrierter Barrierefreiheitsfunktionen wird sichergestellt, dass alle Nutzer, unabhängig von ihren individuellen Fähigkeiten und den verwendeten Technologien, uneingeschränkten Zugang zu den Inhalten und Funktionen der Website haben.
KI Integration in die Lernplattform
Für die Anwendung “Lernplattform” entwickelten wir ein zukunftsweisendes Konzept zur Integration künstlicher Intelligenz direkt in den Rich Text Editor. Dies ermöglicht Schülerinnen und Schülern einen sicheren und transparenten Umgang mit KI. Gleichzeitig können Lehrkräfte die Vorteile der KI zum Erstellen von Aufgaben und Teilen von Informationen nutzen. Die implementierten Funktionen umfassen sowohl freie Prompts als auch kontextbezogene Quick-Prompts zur Texterstellung (Zusammenfassen, Übersetzen, Ausführliche Beschreibung), Audio- und Bildgenerierung. Eine transparente Anzeige des Prompt-Kontingents fördert das verantwortungsvolle Nutzen der KI. Die generierten Inhalte lassen sich nahtlos in den Editor integrieren.
In enger Kooperation mit unseren Entwicklern und den Entwicklern der Bildungsplattform entstand so ein innovatives Werkzeug, das die Relevanz von KI im Bildungsbereich adressiert und gleichzeitig höchste Datensicherheitsstandards gewährleistet.
Die technische Realisierung dieses ambitionierten Projekts erfolgte in enger Kollaboration zwischen unseren internen Entwicklungsteams und den Experten der Bildungsplattform. Dabei wurde besonderer Wert auf die nahtlose Integration in die bestehende Moodle-Architektur gelegt. Eine zentrale Rolle in der Entwicklung des KI-Tools bzw. des entsprechenden Plugins spielte die Template-Engine Mustache.
Einsatz von Mustache für flexible und wartungsfreundliche Komponenten
Mustache ist eine logic-less Template-Engine, die es ermöglicht, die Präsentationsebene klar von der Anwendungslogik zu trennen. Diese Entkopplung erwies sich als entscheidender Vorteil bei der Entwicklung der verschiedenen UI-Komponenten des KI-Tools. Durch die Verwendung von Mustache konnten wir:
Für die verschiedenen Funktionalitäten des KI-Tools, wie beispielsweise die Eingabefelder für Prompts, die Auswahlmöglichkeiten für Quick-Prompts, die Anzeige des Prompt-Kontingents und die Darstellung der generierten Inhalte, wurden modulare Mustache-Templates entwickelt. Diese Templates können mit unterschiedlichen Daten befüllt und somit flexibel in verschiedenen Kontexten innerhalb des Plugins eingesetzt werden.
Die einfache Syntax von Mustache ermöglichte eine schnelle Erstellung der benötigten UI-Elemente. Frontend-Entwickler konnten sich primär auf die Struktur und das Design der Komponenten konzentrieren, während die Anbindung an die Backend-Logik separat erfolgte.
Da Mustache keine eingebettete Logik erlaubt, sind die Templates sehr übersichtlich und leicht zu verstehen. Änderungen am Design oder der Struktur der UI-Elemente können somit ohne tiefgreifendes Verständnis der zugrundeliegenden Anwendungslogik vorgenommen werden. Dies erleichtert die zukünftige Wartung und Weiterentwicklung des KI-Tools erheblich.
Durch die Verwendung von standardisierten Templates für wiederkehrende UI-Elemente wird eine einheitliche und intuitive Benutzererfahrung über alle Funktionen des KI-Tools hinweg sichergestellt.
Ein Blick hinter die Kulissen
Die Zusammenarbeit mit Format D war ....
