Phase 1 – Unser Ziel
Am 9. November 2023 fand wieder der World Usability Day (WUD) in Paderborn statt. Unter dem diesjährigen Motto „Collaboration and Cooperation“ wollten wir, das Orga-Team bestehend aus TMC Amplio und adesso mobile solutions, gemeinsam mit interessierten Usabilitees, UX Professionals und Dev’s etwas Großes auf die Beine stellen.
Bereits im Sommer 2023 stand fest: „Wir wollen den WUD nutzen, um gemeinsam mit allen Freiwilligen ein digitales Produkt zu entwickeln, das einer sozialen Einrichtung aus der Region Ostwestfalen-Lippe beim Lösen eines bestehenden Problems helfen soll. Einen Tag wollen wir der Anforderungserhebung und Konzeption widmen und unsere Ergebnisse dann, eine Woche später, in einem Hackathon in die Realität umsetzen. Wichtig ist uns dabei vor allem, dass das Ergebnis des Hackathons auch einen langfristigen Nutzen bringen kann.“
Mit dieser Vision machten wir uns auf die Suche nach einem geeigneten Projekt. Durch Umfragen mit Mitarbeitenden kamen wir schließlich in Kontakt mit der Jugendhilfe Olsberg, deren Einzugsgebiet von Olsberg über Soest und Paderborn bis nach Büren reicht.
Das Projekt: Ein Messenger für die Jugendhilfe Olsberg
Die Jugendhilfe Olsberg der Kropff-Federath’schen Stiftung ist eine Einrichtung, in der junge Menschen auf ihr zukünftiges Leben vorbereitet werden. Sie bietet ein differenziertes Leistungsangebot für Kinder, Jugendliche, junge Erwachsene und Familien.
Die Jugendhilfe Olsberg stand vor der Herausforderung, einen passenden Messenger für den internen Austausch zu finden. Bestehende Messenger-Systeme kommen dafür leider aus Kosten- und Datenschutzgründen nicht in Frage. Deshalb wollten wir gemeinsam eine maßgeschneiderte Lösung schaffen, die den Arbeitsalltag der Mitarbeitenden nachhaltig erleichtert. Diese Lösung sollte als Open Source Projekt im Rahmen des WUD konzipiert und anschließend im Hackathon umgesetzt werden.
Vorbereitung auf den World Usability Day
Damit wir am WUD selbst direkt loslegen konnten, war etwas Vorbereitung nötig. In Gesprächen mit Mitarbeitenden der Jugendhilfe haben wir bereits im Vorfeld erste Anforderungen an das digitale Produkt aufgenommen und unser Wissen in Form von Benutzergruppenprofilen und Use Cases aufbereitet.
Benutzergruppenprofile, die im Human-Centered Design zum Einsatz kommen, sind verallgemeinerte Beschreibungen von Benutzergruppen und können als Basis für Fragebögen und somit für die Vorbereitung von Nutzungskontextanalysen genutzt werden. Use Cases oder Anwendungsfälle bieten einen Gesamtüberblick über die nach außen sichtbare Interaktion eines Nutzers mit einem System.
Phase 2 - World Usability Day am 9. November
Mithilfe der zuvor erarbeiteten Ergebnisse starteten wir am World Usability Day mit der Konzeption und dem Design des digitalen Produkts. Ganz im Sinne des Human-Centered Designs bezogen wir unsere primäre Zielgruppe, die Mitarbeitenden der Jugendhilfe Olsberg, von Anfang an in die Ausarbeitung ein.
Wir teilten uns in verschiedene Gruppen auf, sodass alle Teilnehmenden die Möglichkeit hatten, sich dem Thema ihrer Wahl zu widmen und so in neue Bereiche reinzuschnuppern oder ihre schon vorhandenen Kenntnisse zu nutzen und zu vertiefen.
Eine Gruppe führte anschließend Interviews durch, während eine andere Gruppe Konzepte entwickelte. Die dritte Gruppe erarbeitete parallel eine erste Designanmutung für den Messenger.
Interviews
Die Interview-Gruppe begann mit einem Vortrag, in dem eine erfahrene Kollegin die Grundlagen über User Research und Nutzerinterviews erklärte. So konnten alle Teilnehmenden der Gruppe bestens vorbereitet in die Durchführung der Interviews starten.
Ziel der Interviews war es, die aus den Vorbereitungen bereits bekannten Nutzungsanforderungen zu validieren sowie neue, unbekannte Nutzungsanforderungen aufzudecken, die die Mitarbeitenden der Jugendhilfe an den Messenger stellen. Dazu diskutierten wir zunächst über die offenen Fragen, die wir in den Interviews klären wollten und Themen, bei denen wir weitere Details benötigten. Gemeinsam erarbeiteten wir auf dieser Grundlage einen Leitfaden, der anschließend bei der Durchführung der Interviews zum Einsatz kam. Die sechs Interviews, die wir mit Mitarbeitenden aus verschiedenen Positionen und Bereichen der Jugendhilfe führten, brachten uns wertvolle Erkenntnisse über den Nutzungskontext, die vorliegenden Probleme und daraus resultierenden Anforderungen an einen Messenger.
Konzeption
Auch die Konzept-Gruppe startete mit einem Vortrag: Die Teilnehmenden erfuhren, wie eine erste Idee in ein durchdachtes Konzept überführt wird und welche Vorteile und Ziele Screenflows oder Wireflows in der Konzeption haben.
Anschließend ging es an die Ausarbeitung erster Konzeptentwürfe, bei denen die bereits aus den Vorbereitungen bekannten Nutzungsanforderungen betrachtet und diskutiert wurden. Nachdem die Interview-Gruppe ihre Erkenntnisse aus den Interviews vorgestellt hatte, konnten diese dann in die Konzeptentwürfe eingearbeitet werden. So lagen zum Abschluss mehrere Konzepte in Form von Wireframes und Screenflows vor, die die benötigten Funktionen des Messengers und die vorgesehenen Interaktionsprinzipien der Nutzer mit dem Messenger visualisierten.
Design
Zeitgleich mit den anderen Gruppen startete auch die Design-Gruppe mit einer Design Exploration. Bei einer Design Exploration erschaffen verschiedene Designer in einem kurzen Zeitraum Farbkonzepte und Screendesigns. Jeder der Beteiligten arbeitet zunächst für sich, am Ende werden die unterschiedlichen Entwürfe dann verglichen und ein gemeinsames, finales Design daraus erstellt. Durch diese Vorgehensweise können verschiedene Ideen entwickelt und ausprobiert werden.
Am Ende der zweistündigen Design Exploration wurden die besten Elemente der Entwürfe in ausgestalteten Screens kombiniert sowie ein Styleguide mit Farben, Schriften und Komponenten erstellt.
Abschluss
Zum Abschluss des World Usability Days wurden die erarbeiteten Konzepte und Designs vor allen Teilnehmenden präsentiert. Mithilfe eines Votings wurde anschließend über besonders wichtige Funktionen sowie besonders gut gelungene Konzepte abgestimmt. Auch die Mitarbeitenden der Jugendhilfe, die vor Ort waren, kamen noch einmal zu Wort und konnten ihre Meinung zu den Ergebnissen sowie weitere Wünsche loswerden. So konnten wir, ganz im Sinne des Human-Centered Design Prozesses, gewährleisten, die Anforderungen unserer primären Nutzergruppe im finalen Konzeptentwurf sowie auch im Design zu erfüllen.
Phase 3 - Hackathon vom 17. - 19. November
Mit den am World Usability Day erarbeiteten Lösungsansätzen starteten wir wenige Tage später in einen dreitägigen Hackathon. Ziel des Hackathons war es, am Ende ein erstes, funktionsfähiges Produkt "in den Händen zu halten".
Zuerst wurden das Projekt vorgestellt und die Erkenntnisse vom WUD präsentiert. Gemeinsam wurde dann die Softwarearchitektur geplant sowie eine Auswahl der Technologien, die für die Chat-Anwendung zum Einsatz kam, getroffen.
Anschließend bildeten die Teilnehmenden kleinere Teams, sodass jedes Team sich auf einen speziellen Bereich wie Setup, Datenbank oder Frontend fokussieren konnte. Parallel zur technischen Entwicklung der Anwendung wurden das Konzept und das Design im Verlauf des Hackathons weiter ausgearbeitet sowie ein auf den Messenger zugeschnittenes Datenschutz-Konzept erarbeitet.
Der Technologie-Stack für die Chat-Anwendung
Backend:
- NestJS / TypeScript
- Event-Based Architektur
- Socket.io für die Realtime Anbindung
- Swagger.io zur Dokumentation der Schnittstellen
Frontend / Admin:
- Admin Bereich wurde mit Angular 17 SSR / Hydration erstellt
- Wird durch das Backend ausgespielt
Setup:
- Vagrant zur Simulation eines Servers (Container mit einem Ubuntu Stack: MongoDB, Nginx)
- Ansible als Automatisierungswerkzeug, um den jeweiligen Server aufzusetzen, die GitHubs auszuchecken und das System zu installieren
Mobile:
- Angular 17 mit dem Ionic Framework, welches durch TailwindCSS / DaisyUI erweitert wurde
- Native Umsetzung mittels CapacitorJS
Das Ergebnis: Luminaa.chat
Alle Teams standen während des gesamten Hackathons im stetigen Austausch, sodass jederzeit alle Fachbereiche in Entscheidungen einbezogen werden konnten und nötige Anpassungen an z.B. technische Gegebenheiten unkompliziert möglich waren.
Dadurch entstand schließlich eine erste, lauffähige Version des Messenger-Dienstes, welcher zum Abschluss des Hackathons seinen Namen erhielt: Luminaa.chat.
