Bachelorarbeit: Konzeption und Entwicklung einer benutzerorientierten Webanwendung für unternehmensinterne Zitate mit Slack-Integration
22. April 2025 - basecom
Unser Kollege Sid Wannik hat im Rahmen seiner Bachelorarbeit bei basecom eine neue Zitatesammlung entwickelt, da die bestehende Lösung aufgrund einer wenig benutzerfreundlichen Oberfläche kaum genutzt wurde. Die Webanwendung wurde benutzerfreundlicher gestaltet und in Slack integriert, sodass Mitarbeitende Zitate einfach teilen, bewerten und kommentieren können, um die Nutzung und Interaktivität zu steigern.
Mein Weg zu basecom
Während meines Auslandssemesters im Frühling 2024 begann ich mit der Suche
nach einem passenden Unternehmen für das Ablegen meiner Bachelorarbeit. Bei
meiner Suche bin ich durch einen Kommilitonen auf basecom aufmerksam
geworden, da dieser in dem Zeitraum gerade seine Bachelorarbeit dort geschrieben
hatte. Nach einer Recherche zu basecom ist mir dann schnell klar geworden, dass
ich dort ebenfalls meine Bachelorarbeit schreiben will. Nach dem erfolgreichen
Bewerbungsprozess konnte ich die Bachelorarbeit dann am 01.09.2024 bei
basecom beginnen.
nach einem passenden Unternehmen für das Ablegen meiner Bachelorarbeit. Bei
meiner Suche bin ich durch einen Kommilitonen auf basecom aufmerksam
geworden, da dieser in dem Zeitraum gerade seine Bachelorarbeit dort geschrieben
hatte. Nach einer Recherche zu basecom ist mir dann schnell klar geworden, dass
ich dort ebenfalls meine Bachelorarbeit schreiben will. Nach dem erfolgreichen
Bewerbungsprozess konnte ich die Bachelorarbeit dann am 01.09.2024 bei
basecom beginnen.
Problemstellung
basecom legt Wert darauf, dass Mitarbeitenden Raum für Spaß am Arbeitsplatz
gegeben wird. Dafür stellt basecom der Belegschaft eine unternehmensinterne
Zitatesammlung zur Verfügung, mit der Mitarbeitende in der Lage sind, humorvolle
oder erinnerungswürdige Zitate aus dem Arbeitsalltag festzuhalten und mit Kolleg*innen
zu teilen. Die Zitatesammlung wird derzeit allerdings kaum von der Belegschaft
genutzt, was laut den Verantwortlichen vorrangig auf die wenig benutzerfreundliche
Oberfläche zurückzuführen ist. Dadurch ist die Aufgabe definiert worden, die aktuelle
Zitatesammlung durch ein neues benutzerfreundliches Tool abzulösen.
gegeben wird. Dafür stellt basecom der Belegschaft eine unternehmensinterne
Zitatesammlung zur Verfügung, mit der Mitarbeitende in der Lage sind, humorvolle
oder erinnerungswürdige Zitate aus dem Arbeitsalltag festzuhalten und mit Kolleg*innen
zu teilen. Die Zitatesammlung wird derzeit allerdings kaum von der Belegschaft
genutzt, was laut den Verantwortlichen vorrangig auf die wenig benutzerfreundliche
Oberfläche zurückzuführen ist. Dadurch ist die Aufgabe definiert worden, die aktuelle
Zitatesammlung durch ein neues benutzerfreundliches Tool abzulösen.
Idee
Um die Unternehmenswerte von basecom zu fördern und die Gemeinschaft
innerhalb der Belegschaft zu stärken, sollte eine modernisierte Zitatesammlung in
Form einer benutzerorientierten Webanwendung mit einer zusätzlichen Integration in
den Messenger-Dienst Slack entwickelt werden. Dadurch könnten Mitarbeitende
Zitate aus dem Arbeitsalltag sowohl über die Webanwendung als auch über Slack
posten und mit Kolleg*innen teilen. Des Weiteren sollte die Zitatesammlung neben dem
Posten von Zitaten um weitere Funktionalitäten erweitert werden, wie beispielsweise
das Bewerten und Kommentieren oder die Ermittlung des Zitats des Monats.
innerhalb der Belegschaft zu stärken, sollte eine modernisierte Zitatesammlung in
Form einer benutzerorientierten Webanwendung mit einer zusätzlichen Integration in
den Messenger-Dienst Slack entwickelt werden. Dadurch könnten Mitarbeitende
Zitate aus dem Arbeitsalltag sowohl über die Webanwendung als auch über Slack
posten und mit Kolleg*innen teilen. Des Weiteren sollte die Zitatesammlung neben dem
Posten von Zitaten um weitere Funktionalitäten erweitert werden, wie beispielsweise
das Bewerten und Kommentieren oder die Ermittlung des Zitats des Monats.
Konzeption & Umsetzung
Für die Webanwendung wurde das Metaframework Nuxt.js verwendet. Mit Nuxt.js
konnten sowohl das Frontend als auch das Backend der Webanwendung im
gleichen Projekt entwickelt werden. Die Slack-App wurde mit dem Framework Slack-
Bolt umgesetzt und für die Datenbank wurde die Technologie Supabase eingesetzt.
Für die Konzeption der Software wurden verschiedene Ebenen des C4-Modells
entworfen. Die nachfolgende Abbildung stellt die zweite Ebene dar und zeigt, wie die
Stakeholder mit der Anwendung kommunizieren und wie die Container innerhalb der
Anwendung strukturiert sind.
konnten sowohl das Frontend als auch das Backend der Webanwendung im
gleichen Projekt entwickelt werden. Die Slack-App wurde mit dem Framework Slack-
Bolt umgesetzt und für die Datenbank wurde die Technologie Supabase eingesetzt.
Für die Konzeption der Software wurden verschiedene Ebenen des C4-Modells
entworfen. Die nachfolgende Abbildung stellt die zweite Ebene dar und zeigt, wie die
Stakeholder mit der Anwendung kommunizieren und wie die Container innerhalb der
Anwendung strukturiert sind.
-1.png?width=658&height=390&name=image%20(1)-1.png)
Die Softwarearchitektur der Zitatesammlung hat das Ziel verfolgt, dass die
Webanwendung unabhängig von Slack funktionsfähig ist, damit Slack in der Zukunft
durch einen anderen Messenger-Dienst ersetzt werden könnte. Dafür wurde im Nuxt
Backend eine REST-API implementiert, damit sowohl das Frontend als auch die
Slack-App auf Zitate zugreifen können. Weiterhin wurde ein Controller implementiert,
der eingehende API-Anfragen des Frontends als auch der Slack-App verarbeitet.
Durch die Abstrahierung über Interfaces werden dann Zitate vom Controller an den
SupabaseService oder den SlackService weitergeleitet. Der SupabaseService
implementiert die CRUD-Operationen über die Supabase-API und der SlackService
implementiert die Kommunikation mit der Slack-App. Durch diese Architektur bleibt
die vollständige Funktionsfähigkeit der Webanwendung bestehen, auch wenn die Slack-App ausfallen sollte. Zudem wird durch die Verwendung von Interfaces die Austauschbarkeit von Slack ermöglicht, indem der SlackService durch einen neuen Service ersetzt und an das Interface angebunden wird. Der Aufbau ist in der nachfolgenden Abbildung dargestellt.
Webanwendung unabhängig von Slack funktionsfähig ist, damit Slack in der Zukunft
durch einen anderen Messenger-Dienst ersetzt werden könnte. Dafür wurde im Nuxt
Backend eine REST-API implementiert, damit sowohl das Frontend als auch die
Slack-App auf Zitate zugreifen können. Weiterhin wurde ein Controller implementiert,
der eingehende API-Anfragen des Frontends als auch der Slack-App verarbeitet.
Durch die Abstrahierung über Interfaces werden dann Zitate vom Controller an den
SupabaseService oder den SlackService weitergeleitet. Der SupabaseService
implementiert die CRUD-Operationen über die Supabase-API und der SlackService
implementiert die Kommunikation mit der Slack-App. Durch diese Architektur bleibt
die vollständige Funktionsfähigkeit der Webanwendung bestehen, auch wenn die Slack-App ausfallen sollte. Zudem wird durch die Verwendung von Interfaces die Austauschbarkeit von Slack ermöglicht, indem der SlackService durch einen neuen Service ersetzt und an das Interface angebunden wird. Der Aufbau ist in der nachfolgenden Abbildung dargestellt.
.png?width=509&height=593&name=image%20(2).png)
Die Benutzeroberflächen der Webanwendung und der Slack-App wurden anhand
der sieben Interaktionsprinzipien der ISO 9241-110 konzipiert. Für die
Webanwendung wurde ein Prototyp mit Figma erstellt und für die Slack-App eine
Benutzeroberfläche mit dem Block Kit Builder entworfen. Die konzipierten
Benutzeroberflächen wurden dann jeweils mit Nuxt und Slack-Bolt umgesetzt.
Wie eingangs erwähnt, wird durch die Integration in Slack ermöglicht, dass Nutzer*innen
auch über Slack Zitate anlegen können und neue Zitate in einem dedizierten
Channel angezeigt werden. In der nachfolgenden Abbildung ist die beispielhafte Ausgabe eines Zitats in Slack zu sehen.
Ein Ausschnitt der Webanwendung ist in der nachfolgenden Abbildung zu sehen.
Usability-Tests
Für die Evaluation der Zitatesammlung wurden insgesamt 5 Usability-Tests
durchgeführt. Dafür wurde ein Testskript entworfen, welches als Leitfaden für die
Moderation diente. Das Testskript bestand aus einem Pre-Session-Interview, 9
Testaufgaben und einem Post-Session-Interview. Die Usability-Tests wurden mit 2
Teilnehmenden remote über Zoom und mit den anderen 3 Teilnehmenden in den
Räumlichkeiten von basecom durchgeführt. Die Ergebnisse der Usability-Tests
wurden dokumentiert und tabellarisch festgehalten. Eine anschließende Auswertung
hat ergeben, dass die Zitatesammlung bereits als benutzerfreundliches System
eingestuft werden kann, aber durch gezielte Anpassungen weiteres
Optimierungspotenzial besteht.
durchgeführt. Dafür wurde ein Testskript entworfen, welches als Leitfaden für die
Moderation diente. Das Testskript bestand aus einem Pre-Session-Interview, 9
Testaufgaben und einem Post-Session-Interview. Die Usability-Tests wurden mit 2
Teilnehmenden remote über Zoom und mit den anderen 3 Teilnehmenden in den
Räumlichkeiten von basecom durchgeführt. Die Ergebnisse der Usability-Tests
wurden dokumentiert und tabellarisch festgehalten. Eine anschließende Auswertung
hat ergeben, dass die Zitatesammlung bereits als benutzerfreundliches System
eingestuft werden kann, aber durch gezielte Anpassungen weiteres
Optimierungspotenzial besteht.
Fazit
Die entwickelte Software für die neue Zitatesammlung erfüllt alle aufgestellten Muss-
Kriterien. Lediglich das Kann-Kriterium, welches eine Admin-Benutzeroberfläche für
die Moderation der Zitatesammlung beinhaltete, konnte aufgrund fehlender zeitlicher
Ressourcen nicht umgesetzt werden. Zudem hat die Evaluierung anhand von
Usability-Tests gezeigt, dass das entwickelte System als benutzerfreundlich
eingestuft werden kann.
Kriterien. Lediglich das Kann-Kriterium, welches eine Admin-Benutzeroberfläche für
die Moderation der Zitatesammlung beinhaltete, konnte aufgrund fehlender zeitlicher
Ressourcen nicht umgesetzt werden. Zudem hat die Evaluierung anhand von
Usability-Tests gezeigt, dass das entwickelte System als benutzerfreundlich
eingestuft werden kann.
Wie geht es jetzt weiter?
Aufgrund der erfolgreichen Zusammenarbeit während der Bachelorarbeit hat
basecom mir ermöglicht, meine berufliche Laufbahn im Unternehmen fortzuführen.
Da mir für den Abschluss meines Bachelorstudiums noch ein letztes Modul fehlt,
werde ich zunächst als Werkstudent weiter beschäftigt sein. In meiner Tätigkeit als
Werkstudent befinde ich mich in der Academy, wo ich derzeit an einem individuellen
Lernpfad arbeite, der mich für die Arbeit in einer Business-Unit vorbereitet. Sobald
das Studium abgeschlossen ist, werde ich als Junior Software Developer bei
basecom einsteigen.
basecom mir ermöglicht, meine berufliche Laufbahn im Unternehmen fortzuführen.
Da mir für den Abschluss meines Bachelorstudiums noch ein letztes Modul fehlt,
werde ich zunächst als Werkstudent weiter beschäftigt sein. In meiner Tätigkeit als
Werkstudent befinde ich mich in der Academy, wo ich derzeit an einem individuellen
Lernpfad arbeite, der mich für die Arbeit in einer Business-Unit vorbereitet. Sobald
das Studium abgeschlossen ist, werde ich als Junior Software Developer bei
basecom einsteigen.
An dieser Stelle bleibt nur zu sagen: Danke Sid für deinen ausführlichen Bericht! Wir freuen uns, dass du weiterhin Teil des Teams bist!
Wenn auch du Interesse daran hast, deine Bachelorarbeit bei basecom zu schreiben, dann informiere dich auf unserer Karriereseite www.wirsprecheninter.net. Wir freuen uns auf deine Bewerbung!
