18.04.2024
Webappklikation für mehr Bildungsgerechtigkeit
Die gemeinnützige Organisation Lern-Fair bietet mithilfe einer digitalen Plattform - genauer ihrer Webapplikation - kostenlose Lernunterstützung an, indem sie ehrenamtliche Nachhilfelehrer:innen mit bildungsbenachteiligten Schüler:innen zusammenbringen. Wir unterstützen Lern-Fair bei der Entwicklung der digitalen Lernplattform.
Research & UX
Interfacedesign
Webentwicklung
<h2>Unsere Rolle</h2>
<p><a href="https://www.lern-fair.de" target="_blank" rel="noopener">Lern-Fair</a> vertraute damals wie heute auf unser <strong style="font-weight: bold; color: red;">interdisziplinäres Expertenteam</strong>. Unsere Leistungen im vorliegenden Projekt umfassten dabei:</p>
<ol>
<li>Agiles Projektmanagement</li>
<li>Research & UX</li>
<li>Technologieberatung</li>
<li>Interface Design</li>
<li>Webentwicklung</li>
</ol>
<p>Unsere Methode sieht <strong style="font-weight: bold; color: red;">regelmäßige Iterationsschleifen mithilfe von Prototypen</strong> vor. Dadurch entwickeln wir für <a href="https://www.lern-fair.de" target="_blank" rel="noopener">Lern-Fair</a> <strong style="font-weight: bold; color: red;">erstklassige Lösungen, </strong>die perfekt auf die Bedürfnisse der Nutzer:innen zugeschnitten<strong style="font-weight: bold; color: red;"> </strong>sind.</p>
<p><img src="https://typedig.uber.space/assets/06d85f50-84fb-4cf6-9336-cad8d108aaa8?width=1920&height=1280" alt="Typedigital Zunder Foto 20230628 50"></p>
<p><em>In unserem interdisziplinärem Team arbeiten erfahrene Entwickler:innen, UX-,UI-Designer:innen sowie Projektmanager:innen eng zusammen.</em></p>
<h2>Problem</h2>
<p>Während sich <a href="https://www.lern-fair.de" target="_blank" rel="noopener">Lern-Fair</a> in ihren ersten Produkt-Iterationen vor allem auf das Erstellen von Kursen und das Bilden von Lernpaaren fokussierte, fehlten essentielle Funktionalitäten, um die Lerneinheiten komplett über die Plattform abwickeln zu können.</p>
<p>Somit mussten Helfer:innen und Schüler:innen zwischen unterschiedlichen Tools wechseln, was häufig zu Fehlern oder Missverständnissen zwischen den Teilnehmenden führte.</p>
<p>Die Plattform wurde vor allem als Admin- und Verwaltungsbereich genutzt und unterstützte User:innen kaum während des eigentlichen Lern- bzw. Unterrichtsprozesses.</p>
<h2>Lösung</h2>
<p>Schüler:innen und Helfer:innen sollen darin unterstützt werden, strukturiert und langfristig miteinander zu arbeiten. Alle notwendigen Informationen und Werkzeuge müssen entsprechend den Bedürfnissen leicht und zentralisiert zugänglich gemacht werden.</p>
<p>Als <strong style="font-weight: bold; color: red;">Expert:innen für digitale Produktentwicklung</strong> erweiterten wir deshalb das bestehende Produkt, indem wir folgende Features konzeptionierten und implementierten:</p>
<ol>
<li>Termine</li>
<li>Chat</li>
<li>In-App Benachrichtigungen</li>
<li>Videokonferenzen</li>
</ol>
<p>Wir wendeten die <strong style="font-weight: bold; color: red;">agile Projektmanagementmethode Scrum</strong> an, um auf Anforderungsänderungen schnell reagieren zu können. So arbeiteten wir durch wöchentlich wiederkehrende Meetings und iterativen Schleifen eng mit Lern-Fair zusammen, um das Produkt schrittweise zu erweitern. </p>
<p>Das visuelle Erscheinungsbild der Webapplikation wurde auf Basis der bestehenden Corporate Identity angepasst und auf neue Komponenten und Screens angewendet. Dabei wurden <strong style="font-weight: bold; color: red;">bereits etablierte Interaktionsparadigmen</strong> aufgegriffen und bei Bedarf <strong style="font-weight: bold; color: red;">sinnvoll erweitert</strong>.</p>
<p>Bezüglich der Technologien setzten wir auf React Native for Web, Node.js, TypeScript, Prisma und Postgres. Um eine effiziente Lösung zu gewährleisten, bauten wir auf Zoom als Videochat, den wir <strong style="font-weight: bold; color: red;">nahtlos in die Plattform integrierten</strong>. Zur Realisierung der Chatfunktion arbeiteten wir mit TalkJS, während wir Websockets als Service für Inapp Notifications verwendeten. Die gewählten Technologien bieten eine skalierbare und Performance Lösung, die ein <strong style="font-weight: bold; color: red;">technologisch starkes Fundament für den langfristigen Erfolg der Lernplattform</strong> garantiert.</p>
<p><img src="https://typedig.uber.space/assets/e8f852d4-75b2-4787-a3d1-31032bb21c08?width=1440&height=1920" alt="Typedigital Zunder Foto 20230628 106"></p>
<p><em>Wir verwenden modernste Technologien, um auch komplexen Anforderungen gerecht zu werden.</em></p>
Ergebnis
<p>Lern-Fair bietet nun eine <strong>voll funktionsfähige Lernplattform</strong> an, auf der Nutzer:innen ihre Termine spielend leicht verwalten können und per In-App-Notification über wichtige Ereignisse informiert werden. Die gesamte Kommunikation zwischen Schüler:innen und Lehrenden läuft direkt auf der Plattform über eine <strong>integrierte Chat- und Videofunktion</strong> ab.</p>
<p>Dies resultiert in einer erheblich verbesserten Nutzererfahrung, mehr Kontrolle seitens Lern-Fair, reduzierten Support-Anfragen und besseren Google-Bewertungen.</p>
<p>Die Webapplikation wurde nun erweitert durch:</p>
<ol>
<li>Integration des Videochats</li>
<li>Integration des Chats</li>
<li>Integration der Termin-Funktion</li>
<li>In-App-Benachrichtigungen</li>
</ol>
<p>Das Design folgt den Vorgaben der Corporate Identity und erzielt <strong>hohen Wiedererkennungswert</strong> und eine <strong>verbesserte Usability</strong>.</p>
<p><img src="https://typedig.uber.space/assets/ab3d537c-f7f6-4a7d-8e6c-acaa7bfc94eb?width=1920&height=1093" alt="Mockup4 Hintergrund2 1"></p>
<p><em>Die Webapplikation verkörpert nun die Corporate Identity, verfügt über die erweiterten Features sowie eine optimierte User Experience.</em></p>
<p>Technisch wurde die Lösung als <strong style="font-weight: bold; color: red;">Open Source</strong> entwickelt. Dadurch haben auch Dritte die Möglichkeit, auf den geschriebenen Code zuzugreifen und sich im Bereich Programmierung weiterzubilden. Lern-Fair vertritt auch hier die Philosophie Wissen zu teilen und für jeden zugänglich zu machen.</p>
<p>Zusätzlich achteten wir darauf, dass die Applikation später als <strong style="font-weight: bold; color: red;">Progressive Web App</strong> genutzt werden kann. Das hat den Vorteil, dass diese - wie eine native App - auf dem Home Bildschirm abgespeichert werden kann und sich nicht wie eine Anwendung im Browser anfühlt.</p>
<p><img src="https://typedig.uber.space/assets/28521ece-394c-4ce5-aeef-cab3ab9a1277?width=1920&height=1093" alt="Mockup2 Transparent (1)"></p>
<p><em>Die Applikation kann später als Progressive Web App genutzt werden, sodass sie später auf dem Homebildschirm abgespeichert werden kann.</em></p>
<h2>Nutzerstimmen zur verbesserten App</h2>
<p><img src="https://typedig.uber.space/assets/da5ca356-52a3-4364-802d-1ec64286723b?width=1920&height=1015" alt="Nutzerstimmen Lernfair"></p>
Das sagt Lern-Fair über uns
<p>typedigital hat uns mit Professionalität, Struktur und einem offenen Mindset überzeugt. Unsere Anforderungen wurden schnell erfasst, kreativ weitergedacht und agil umgesetzt. Wir sind überaus zufrieden mit den Ergebnissen und glücklich, dass wir unseren Nutzer:innen eine neue Lernplattform bieten können!</p>
Co-Founder von Lern-Fair
Haben wir dein Interesse geweckt?
Lass uns gemeinsam Großartiges schaffen!
Jonathan Stütz
Co-Founder & Design Lead
