Meine Rolle
UX/UI Design, Research, Full Stack Entwicklung
Teammitglieder
2
Entstanden
Im Rahmen des Projektmodul Web im 3. Semester 2022/23
Links
Methodik
What?
Im Rahmen des Projektmoduls Web bestand die Aufgabe darin, gesellschaftlich relevante Probleme zu identifizieren, mit denen Geflüchtete in Deutschland konfrontiert sind, und darauf basierend eine digitale Lösung zu entwickeln. Unser Team konzentrierte sich auf das Thema Bildung und erkannte, dass viele geflüchtete Kinder Schwierigkeiten haben, nach der Grundschule in weiterführende Bildungssysteme integriert zu werden. Ziel war es, eine Web-Anwendung zu entwickeln, die diesen Kindern den Zugang zu individueller Lernunterstützung erleichtert.
How?
Für die Projektentwicklung folgten wir einem nutzerzentrierten, iterativen Designprozess. Wir starteten mit einer qualitativen Recherche und führten ein Interview mit einer Praktikantin an einer Grundschule, um reale Herausforderungen im Alltag geflüchteter Kinder zu verstehen. Darauf aufbauend entwickelten wir Personas, eine Stakeholdermap und erste Wireframes, bevor wir das Konzept in einem Figma-Prototypen visualisierten und schließlich mit React.js technisch umsetzten.
Why?
Bildung ist ein entscheidender Faktor für Integration und Chancengleichheit. Unsere Recherche zeigte, dass Grundschulen oft engagiert und integrativ arbeiten, der Zugang zu weiterführender Bildung für geflüchtete Kinder jedoch stark eingeschränkt bleibt. Vor allem Sprachbarrieren und fehlende Unterstützung im häuslichen Umfeld erschweren den schulischen Erfolg. Dadurch entsteht ein Bedarf an niedrigschwelligen, freiwilligen Lernangeboten, die sowohl flexibel als auch individuell sind.
Insights
Aus der Recherche und dem geführten Interview mit einer Praktikantin in einer Grundschule ergaben sich folgende zentrale Erkenntnisse:
Grundschulen nicht Hauptproblem
Kinder sind meist motiviert und erhalten dort Unterstützung.
Schwierigkeiten beginnen beim Übergang
Der Übertritt auf weiterführende Schulen stellt eine große Hürde dar.
Sprachbarrieren der Eltern
Viele Eltern können ihre Kinder nicht beim Lernen unterstützen, weil sie kaum Deutsch sprechen.
Direktes Feedback
Farbliche Icons, animierte Rückmeldungen und generiertes Feedback unterstützen den Lernprozess durch klare Rückmeldung.
Hohe Fluktuation
Häufige Schulwechsel während des Asylverfahrens erschweren Kontinuität im Lernen.
Soziale Integration
Kinder helfen sich gegenseitig, doch Eltern bleiben oft außen vor.
Idee
SmartTutoring ist eine digitale Plattform, die freiwillige Tutor:innen mit Grundschulkindern, insbesondere mit Fluchthintergrund, verbindet. Die Vision ist es, Bildung als verbindendes Element zu nutzen und Integration durch persönliches Lernen zu fördern. Kinder und Eltern können einfach und kostenlos passende Tutor:innen finden, die individuell unterstützen, beim Lernen, bei Sprachübungen oder bei der Vorbereitung auf den Schulübertritt. Langfristig soll SmartTutoring zu mehr Chancengleichheit und Bildungsgerechtigkeit beitragen.
smarttutoring
Fragebogen
Der Einstieg in SmartTutoring erfolgt über einen kurzen, interaktiven Fragebogen. Je nach Nutzerrolle, Eltern, Schüler:in oder Tutor:in, werden spezifische Fragen gestellt, um die individuellen Bedürfnisse bzw. Kompetenzen zu erfassen. Beispiele: Für Eltern der Kinder oder Kinder direkt: Welche Fächer bereiten Schwierigkeiten? Welche Sprache wird zu Hause gesprochen? Für Tutor:innen: Welche Fächer möchtest du unterrichten? Welche Sprachen sprichst du? Diese Informationen bilden die Grundlage für das Matching-System, das gezielt passende Lernpartnerschaften vorschlägt.
Matching-Funktion
Die Kernfunktion der Anwendung ist das Matching-System, das auf Basis der ausgefüllten Fragebögen prozentuale Übereinstimmungen zwischen Schüler:innen und Tutor:innen berechnet. Dabei werden Kriterien wie Sprache, Fächer und Verfügbarkeit berücksichtigt. Das Ergebnis wird visuell dargestellt, um auf einen Blick die beste Passung zu erkennen. Diese Funktion vereinfacht den Vermittlungsprozess und sorgt dafür, dass Kinder von Tutor:innen betreut werden, die wirklich zu ihren Bedürfnissen passen.
Profile
Jede:r Tutor:in verfügt über ein öffentliches Profil, das Einblick in die Person und Qualifikationen gibt. Angezeigt werden: der bisherige Schulweg bzw. Bildungsstand, die gesprochenen Sprachen und deren Niveau, die Fächer, in denen Unterstützung angeboten wird sowie eine kurze persönliche Vorstellung, um Vertrauen aufzubauen. Auf dem Profil befindet sich zudem ein Kontakt-Button, mit dem Eltern oder Schüler:innen den Tutor bzw. die Tutorin direkt benachrichtigen können. So wird der gesamte Prozess von der Suche bis zur ersten Kontaktaufnahme digital und unkompliziert abgebildet.
Umsetzung
Wir führten ein qualitatives Interview mit einer Praktikantin an einer Grundschule, die regelmäßig mit geflüchteten Kindern arbeitete. Sie schilderte typische Herausforderungen: häufige Schulwechsel während des Asylverfahrens, Sprachbarrieren zwischen Eltern und Schule, fehlende individuelle Förderung. Das Interview bestätigte unsere Hypothese, dass das Problem nicht im Unterricht selbst, sondern im fehlenden außerschulischen Support liegt. Diese Erkenntnis war entscheidend für die Konzeptentwicklung. Auf Basis unserer Recherche und des Interviews wurden zentrale Akteur:innen identifiziert: Geflüchtete Kinder und ihre Eltern, Tutor:innen (z. B. Studierende, Referendar:innen, Pädagog:innen) sowie Lehrkräfte und Bildungseinrichtungen, die die Plattform weiterempfehlen.
Wir entwickelten 4 Personas, um die Bedürfnisse greifbar zu machen:
Um die Bedürfnisse der Zielgruppe noch präziser zu verstehen und die Funktionen von SmartTutoring gezielt darauf abzustimmen, wurde ein Value Proposition Canvas erstellt. Diese Methode half, die Pain Points, Gains und Aufgaben der Nutzer:innen den Leistungsversprechen der Anwendung gegenüberzustellen und so einen klaren Problem–Solution-Fit zu definieren.
Style Guide
Das visuelle Design von SmartTutoring orientiert sich an den Prinzipien von Vertrauen, Seriosität und Zugänglichkeit. Ziel war es, eine ruhige, professionelle und zugleich einladende Atmosphäre zu schaffen, die sowohl Eltern als auch Tutor:innen anspricht. Die Grundfarben bestehen aus Weiß und Schwarz, um ein klares, kontrastreiches Erscheinungsbild zu erzeugen und die Lesbarkeit zu maximieren. Als Akzentfarbe wurde Rot eingesetzt, sie verleiht der Oberfläche Energie, lenkt gezielt Aufmerksamkeit auf interaktive Elemente (Buttons, Links, Hervorhebungen) und sorgt für Wiedererkennung. Grün wird dezent als Feedbackfarbe genutzt, beispielsweise zur Bestätigung erfolgreicher Aktionen, um ein positives Nutzererlebnis zu fördern.
Für Überschriften und markante Texte kommt die Serifenschrift Judson zum Einsatz, die dem Design einen seriösen, vertrauenswürdigen Charakter verleiht. Im Kontrast dazu wird Roboto als moderne, gut lesbare Systemschrift für Fließtexte verwendet, um hohe Lesbarkeit auf allen Geräten zu gewährleisten. Diese Kombination aus klassischer und moderner Schrift schafft ein harmonisches, professionelles Gesamtbild.
Die Icons stammen aus den Google Fonts Icons, die sich durch klare Linien und gute Skalierbarkeit auszeichnen. Sie fügen sich dezent in das Layout ein und unterstützen die Navigation ohne abzulenken. Das Interface folgt einem minimalistischen, reduzierten Stil. Durch abgerundete Buttons und Kanten wirken die Oberflächen weich und freundlich, wodurch die Anwendung trotz ihrer Seriosität nicht zu streng oder distanziert wirkt. Diese bewusste Schlichtheit sorgt für ein höchstes Maß an Klarheit, Barrierefreiheit und Vertrauen – zentrale Werte für eine Anwendung im Bildungs- und Integrationskontext.
Prototyping
Der Figma-Prototyp visualisierte die finalen User Flows – von der Registrierung über die Tutorensuche bis zur Kontaktaufnahme. Der Prototyp wurde interaktiv gestaltet, um das Nutzererlebnis realistisch zu testen.bHierbei lag der Fokus auf Usability, Emotionalität und einer logischen Informationsarchitektur.
Technische Umsetzung
smarttutoring besteht aus einer React-Frontend-Anwendung und einem Node.js/Express-Backend, das mit MongoDB über Mongoose kommuniziert. Die Client-Seite nutzt Material-UI-Komponenten und React Router, um verschiedene Benutzerflows für Schüler:innen und Tutor:innen abzubilden. Das Backend verwaltet Benutzerkonten, Authentifizierung per JWT sowie Fragebögen für Matching-Zwecke.
Userflow
Der Userflow von SmartTutoring veranschaulicht den Weg der Nutzer:innen von der Landingpage bis zur Nutzung der Kernfunktionen – Registrierung, Fragebogen und Matching. Er bildet die zwei Hauptpfade ab: Tutor:in finden (für Eltern oder Schüler:innen) und Tutor:in werden (für Freiwillige). Je nach Auswahl werden Nutzer:innen zu den passenden Formularen geleitet, wo sie ihre Basisdaten eingeben. Nach erfolgreicher Registrierung oder Anmeldung wird ein JWT-Token generiert und im Client gespeichert, um alle weiteren Aktionen zu authentifizieren. Im Anschluss führen die Pfade entweder zu dem Fragebogen für Schüler:innen, über den Lernbedürfnisse erfasst werden, oder dem Fragebogen für Tutor:innen, in dem Qualifikationen und Fächer hinterlegt werden. Die Daten fließen in den Matching-Prozess, der anschließend passende Tutor:innen bzw. Schüler:innen vorschlägt. Der Flow endet mit der Profil- und Match-Ansicht, wo die Nutzer:innen weitere Informationen einsehen und Kontakt aufnehmen können. Das Diagramm macht deutlich, wie klar strukturiert, rollenbasiert und geradlinig der Interaktionsfluss gestaltet ist, mit Fokus auf Usability und minimalen Hürden beim Einstieg.
Reflektion
Die größte Herausforderung lag darin, Frontend-Daten korrekt an die Datenbank zu übergeben und die Matching-Funktion technisch sauber zu implementieren. Auch das Styling mit MUI erforderte Feintuning, um ein harmonisches Design zu erzielen. Trotz dieser Hürden gelang es, eine funktionierende Anwendung zu entwickeln, die die ursprüngliche Vision greifbar macht. In Zukunft könnte das Projekt durch weitere Features (z. B. Kalender, Bewertungen, Chat) und Usability-Tests mit realen Nutzer:innen weiter verbessert werden. Das Projekt zeigte deutlich, dass digitale Bildungslösungen soziale Integration effektiv unterstützen können.