UXMA

UXMA Boßel Tour

UXMA

Boßel Tour

FH-Kiel

UXMA Boßel Tour

Rolle

Design, Entwicklung

Rolle

Design, Entwicklung

Rolle

Design, Entwicklung

Teamgröße

Dauer

4 Monate

Dauer

4 Monate

Dauer

4 Monate

Tools

Figma, Miro

Tools

Figma, Miro

Tools

Figma, Miro

ZUM FIGMA PROJEKT

Hintergrund

Im Rahmen des Projektarbeit 2 an der FH Kiel entwickelte unser Team in Kooperation mit UXMA eine App für das jährliche Boßel-Event des Unternehmens. Ziel war es, eine mobile Anwendung zu erstellen, die den Ablauf des Events vereinfacht und dabei eine nutzerfreundliche und intuitive Bedienung ermöglicht. Die App sollte die Teamorganisation unterstützen, den aktuellen Spielstand anzeigen und den Routenverlauf der Boßelstrecke visualisieren. Neben der technischen Umsetzung standen vor allem methodische Kompetenzen wie die Entwicklung einer guten User Experience und effektive Teamarbeit im Mittelpunkt. Unterstützt durch die Expertise von UXMA erhielten wir wertvolle Einblicke in praxisrelevante Technologien und Best Practices aus der Softwareentwicklung.

Was ist Boßeln?

Boßeln ist ein traditioneller norddeutscher Volkssport, der typischerweise auf ländlichen Straßen oder Wegen gespielt
wird. Das Ziel des Spiels ist es, eine kleine Kugel, die Boßelkugel, mit möglichst wenigen Würfen über eine festgelegte
Strecke zu rollen. Teams treten gegeneinander an und versuchen, die Kugel so weit wie möglich zu werfen, wobei der
Spielverlauf oft von Zwischenrufen und Geselligkeit begleitet wird. Besonders im norddeutschen Raum wird Boßeln oft
mit Bollerwagen und gemeinsamen Pausen gespielt, was das Spiel zu einem beliebten Freizeit-Event macht.

Boßeln ist ein traditioneller norddeutscher Volkssport, der typischerweise auf ländlichen Straßen oder Wegen gespielt wird. Das Ziel des Spiels ist es, eine kleine Kugel, die Boßelkugel, mit möglichst wenigen Würfen über eine festgelegte Strecke zu rollen. Teams treten gegeneinander an und versuchen, die Kugel so weit wie möglich zu werfen, wobei der Spielverlauf oft von Zwischenrufen und Geselligkeit begleitet wird. Besonders im norddeutschen Raum wird Boßeln oft
mit Bollerwagen und gemeinsamen Pausen gespielt, was das Spiel zu einem beliebten Freizeit-Event macht.

Boßeln ist ein traditioneller norddeutscher Volkssport, der typischerweise auf ländlichen Straßen oder Wegen gespielt wird. Das Ziel des Spiels ist es, eine kleine Kugel, die Boßelkugel, mit möglichst wenigen Würfen über eine festgelegte Strecke zu rollen. Teams treten gegeneinander an und versuchen, die Kugel so weit wie möglich zu werfen, wobei der
Spielverlauf oft von Zwischenrufen und Geselligkeit begleitet wird. Besonders im norddeutschen Raum wird Boßeln oft mit Bollerwagen und gemeinsamen Pausen gespielt, was das Spiel zu einem beliebten Freizeit-Event macht.

Zusammenarbeit

Es wurde agil nach Scrum zusammengearbeitet, jedoch waren die Teamrollen aufgrund der Teamgröße flexibel
gestaltet. Jede Person war in die Entwicklung eingebunden, und der Product Owner übernahm gleichzeitig Entwickleraufgaben. Die Rolle des Scrum Masters wurde im Wechsel von verschiedenen Teammitgliedern übernommen.
Das Design wurde gemeinschaftlich entwickelt, wobei einige Mitglieder stärker involviert waren, jedoch ohne formale
Rollenzuweisungen.

Es wurde agil nach Scrum zusammengearbeitet, jedoch waren die Teamrollen aufgrund der Teamgröße flexibel gestaltet. Jede Person war in die Entwicklung eingebunden, und der Product Owner übernahm gleichzeitig Entwickleraufgaben. Die Rolle des Scrum Masters wurde im Wechsel von verschiedenen Teammitgliedern übernommen. Das Design wurde gemeinschaftlich entwickelt, wobei einige Mitglieder stärker involviert waren, jedoch ohne formale
Rollenzuweisungen.

Es wurde agil nach Scrum zusammengearbeitet, jedoch waren die Teamrollen aufgrund der Teamgröße flexibel gestaltet. Jede Person war in die Entwicklung eingebunden, und der Product Owner übernahm gleichzeitig Entwickleraufgaben. Die Rolle des Scrum Masters wurde im Wechsel von verschiedenen Teammitgliedern übernommen.
Das Design wurde gemeinschaftlich entwickelt, wobei einige Mitglieder stärker involviert waren, jedoch ohne formale
Rollenzuweisungen.

Prozess

Der Entwicklungsprozess der Boßel-App begann mit einer Contextual Research in Form einer eigenen Boßeltour, um
das Spiel und die Anforderungen besser zu verstehen. Nach der Tour wurden mit Hilfe einer User Journey Ziele und
Anforderungen für den MVP definiert.

Der Entwicklungsprozess der Boßel-App begann mit einer Contextual Research in Form einer eigenen Boßeltour, um das Spiel und die Anforderungen besser zu verstehen. Nach der Tour wurden mit Hilfe einer User Journey Ziele und Anforderungen für den MVP definiert.

Aufzählung der Anforderungen des MVPs

Das Design der App fing mit ersten Skizzen in Form eines gemeinsamen Scribblen an. Hier wurden zusammen Ideen
gesammelt und erste Papierprototypen erstellt, welche das spätere Design der App darstellten. Die Ideen wurden in
einem stetigen iterativen Prozess angepasst, bis zum finalen Papierprototypen.

Das Design der App fing mit ersten Skizzen in Form eines gemeinsamen Scribblen an. Hier wurden zusammen Ideen gesammelt und erste Papierprototypen erstellt, welche das spätere Design der App darstellten. Die Ideen wurden in einem stetigen iterativen Prozess angepasst, bis zum finalen Papierprototypen.

Das Design der App fing mit ersten Skizzen in Form eines gemeinsamen Scribblen an. Hier wurden zusammen Ideen gesammelt und erste Papierprototypen erstellt, welche das spätere Design der App darstellten. Die Ideen wurden in
einem stetigen iterativen Prozess angepasst, bis zum finalen Papierprototypen.

Vom gemeinsamen Scribblen bis hin zur finalen Darstellung des Papierprototyps mit Interactionflow

Nachdem der Papierprototyp stand, fing der erste Sprint an mit der Umsetzung der grundlegenden Funktionen
wie Wurfzähler, Wurfreihenfolge und der Landing Page alles auf Frontend Ebene. Parallel wurde an der
Umsetzung des Wireframes gearbeitet, damit frühst möglich Feedback der Projektbetreuer eingesammelt werden
konnte.

Nachdem der Papierprototyp stand, fing der erste Sprint an mit der Umsetzung der grundlegenden Funktionen wie Wurfzähler, Wurfreihenfolge und der Landing Page alles auf Frontend Ebene. Parallel wurde an der Umsetzung des Wireframes gearbeitet, damit frühst möglich Feedback der Projektbetreuer eingesammelt werden konnte.

Erste Iteration des Wireframe Prototyps

Im zweiten Sprint und dritten Sprint wurde sich dann mit der Umsetzung der Anforderungen auf Backend Ebene beschäftigt. Die geplante Datenbank Architektur wurde aufgesetzt und die restlichen Funktionen für die App wurden umgesetzt. Parallel dazu wurde an der Weboberfläche für das Erstellen der Boßeltouren gearbeitet. Im Design selber wurden leichten Anpassungen zur Verbesserung der User Experience durchgeführt.

Nach Erreichen des MVPs fand dann eine umfangreiche User-Testing-Phase bei UXMA statt. Zwei Teams, jeweils aus drei Personen, testeten die App in fünf vorgegebenen Szenarien. Die Erkenntnisse aus den Tests führten zu wertvollen Anpassungen wie einer Reduktion der Codes, klareres Wording und der Verbesserung des UI-Kontrasts. Zusätzlich entstanden auch neue Ideen für zukünftige Features.

Notierte Ergebnisse des User Testings

Testplan runterladen

Nachdem die Ergebnisse ausgewertet und priorisiert wurden, wurde die Restliche Zeit für die Umsetzung des Feedback genutzt. Neben UI-Anpassungen wurden auch neue Features integriert, die zur Verbesserung der Nutzererfahrung beitragen sollten. Dazu gehört ein QR-Code-Feature, damit User im Freien keine Codes mehr abtippen müssen, sowie die Implementierung einer stark nachgefragten Kartenfunktion, die die Boßelroute anzeigt. Zusätzlich wurde das Design der App umfassend überarbeitet, da das bisherige Design noch dem des Lo-Fi-Prototyps entsprach.

Finales Enddesign des Endprodukts

Wichtige Designentscheidungen

Bei der Mobilen Version wurde Boßel-App wurde stehts auf ein minimalistisches Design geachtet, um die Benutzer-
freundlichkeit während des Spiels zu maximieren. Ein übersichtliches und intuitives Interface sollte sicherstellen, dass
die App auch während der Boßel-Tour unter realen Bedingungen benutzbar bleibt. Darüber hinaus wurde das Design
nach den Vorgaben der Brand-Identity von UXMA gestaltet, um eine visuelle Konsistenz und Wiedererkennbarkeit der
Marke zu gewährleisten. Das Design der App wurde in vielen Iterationen basierend auf Nutzerfeedback und Tests
angepasst. Die wichtigsten Änderungen werden folgend beschrieben.

Bei der Mobilen Version wurde Boßel-App wurde stehts auf ein minimalistisches Design geachtet, um die Benutzerfreundlichkeit während des Spiels zu maximieren. Ein übersichtliches und intuitives Interface sollte sicherstellen, dass die App auch während der Boßel-Tour unter realen Bedingungen benutzbar bleibt. Darüber hinaus wurde das Design nach den Vorgaben der Brand-Identity von UXMA gestaltet, um eine visuelle Konsistenz und Wiedererkennbarkeit der Marke zu gewährleisten. Das Design der App wurde in vielen Iterationen basierend auf Nutzerfeedback und Tests angepasst. Die wichtigsten Änderungen werden folgend beschrieben.

Bei der Mobilen Version wurde Boßel-App wurde stehts auf ein minimalistisches Design geachtet, um die Benutzerfreundlichkeit während des Spiels zu maximieren. Ein übersichtliches und intuitives Interface sollte sicherstellen, dass
die App auch während der Boßel-Tour unter realen Bedingungen benutzbar bleibt. Darüber hinaus wurde das Design nach den Vorgaben der Brand-Identity von UXMA gestaltet, um eine visuelle Konsistenz und Wiedererkennbarkeit der
Marke zu gewährleisten. Das Design der App wurde in vielen Iterationen basierend auf Nutzerfeedback und Tests angepasst. Die wichtigsten Änderungen werden folgend beschrieben.

Wechseln der Rolle
In der App gibt es im Spielerbereich einen Segment Switch, mit dem man zwischen den Spielerrollen wechseln kann.
Ursprünglich bestand dieser aus einem Toggle-Switch, der als Icon präsentiert wurde und seinen Zustand beim
Draufklicken änderte. Aus den User Tests kam jedoch hervor, dass diese Lösung für den Nutzer nicht eindeutig genug
war. Daher wurde der Segment Switch implementiert, um eine klarere und intuitivere Möglichkeit zum Wechseln der
Spielerrollen bereitzustellen.

Wechseln der Rolle
In der App gibt es im Spielerbereich einen Segment Switch, mit dem man zwischen den Spielerrollen wechseln kann. Ursprünglich bestand dieser aus einem Toggle-Switch, der als Icon präsentiert wurde und seinen Zustand beim Draufklicken änderte. Aus den User Tests kam jedoch hervor, dass diese Lösung für den Nutzer nicht eindeutig genug war. Daher wurde der Segment Switch implementiert, um eine klarere und intuitivere Möglichkeit zum Wechseln der Spielerrollen bereitzustellen.

Wechseln der Rolle
In der App gibt es im Spielerbereich einen Segment Switch, mit dem man zwischen den Spielerrollen wechseln kann. Ursprünglich bestand dieser aus einem Toggle-Switch, der als Icon präsentiert wurde und seinen Zustand beim
Draufklicken änderte. Aus den User Tests kam jedoch hervor, dass diese Lösung für den Nutzer nicht eindeutig genug war. Daher wurde der Segment Switch implementiert, um eine klarere und intuitivere Möglichkeit zum Wechseln der
Spielerrollen bereitzustellen.

ToggleSwitch vs SegmentSwitch

Navigationsleiste
Im Laufe der Zeit wurden im Spielerbereich der App immer mehr Features hinzugefügt, wodurch der verfügbare Platz
begrenzt wurde. Um eine Überfüllung der Benutzeroberfläche zu vermeiden und die Navigation übersichtlich zu halten,
entschieden wir uns daher für die Implementierung einer Navigationsleiste (Nav-Bar). Diese ermöglicht eine klare Struktur
und bietet den Nutzern schnellen Zugriff auf die wichtigsten Funktionen, ohne die Oberfläche zu überladen.

Navigationsleiste
Im Laufe der Zeit wurden im Spielerbereich der App immer mehr Features hinzugefügt, wodurch der verfügbare Platz begrenzt wurde. Um eine Überfüllung der Benutzeroberfläche zu vermeiden und die Navigation übersichtlich zu halten, entschieden wir uns daher für die Implementierung einer Navigationsleiste (Nav-Bar). Diese ermöglicht eine klare Struktur und bietet den Nutzern schnellen Zugriff auf die wichtigsten Funktionen, ohne die Oberfläche zu überladen.

Navigationsleiste
Im Laufe der Zeit wurden im Spielerbereich der App immer mehr Features hinzugefügt, wodurch der verfügbare Platz begrenzt wurde. Um eine Überfüllung der Benutzeroberfläche zu vermeiden und die Navigation übersichtlich zu halten, entschied man sich daher für die Implementierung einer Navigationsleiste (Nav-Bar). Diese ermöglicht eine klare Struktur
und bietet den Nutzern schnellen Zugriff auf die wichtigsten Funktionen, ohne die Oberfläche zu überladen.

Navbar mit Team-QR-Code button

QR-Code
Die wichtigste Funktion, um dem Spiel schnell und effizient beizutreten, ist der QR-Code. Aus diesem Grund wurde der
QR-Code im Spielerbereich als Button oberhalb der Navigationsleiste (Navbar) platziert, damit er jederzeit schnell und
leicht zugänglich ist. Diese Positionierung stellt sicher, dass Nutzer ohne Umwege direkt auf die wichtigste Aktion
zugreifen können.

QR-Code
Die wichtigste Funktion, um dem Spiel schnell und effizient beizutreten, ist der QR-Code. Aus diesem Grund wurde der QR-Code im Spielerbereich als Button oberhalb der Navigationsleiste (Navbar) platziert, damit er jederzeit schnell und leicht zugänglich ist. Diese Positionierung stellt sicher, dass Nutzer ohne Umwege direkt auf die wichtigste Aktion zugreifen können.

QR-Code
Die wichtigste Funktion, um dem Spiel schnell und effizient beizutreten, ist der QR-Code. Aus diesem Grund wurde der QR-Code im Spielerbereich als Button oberhalb der Navigationsleiste (Navbar) platziert, damit er jederzeit schnell und leicht zugänglich ist. Diese Positionierung stellt sicher, dass Nutzer ohne Umwege direkt auf die wichtigste Aktion
zugreifen können.

Team-QR-Code jederzeit aufrufbar

Status
Das Status-Feature ist eine wichtige Funktion der App, da es den Spielern ermöglicht, ihren aktuellen Spielstatus zu
verfolgen. Dies trägt zusätzlich zur besseren Koordination währen der Boßeltour bei. In den User-Tests zeigte sich jedoch,
dass es Unklarheiten gab, was der jeweilige Status bedeutet. Um diese Verwirrung entgegenzuwirken, wurde das Status-
Feature in einem Slide-Menü integriert. Dies bietet mehr Fläche, um jeden Status mit einer Beschriftung zu versehen

Status
Das Status-Feature ist eine wichtige Funktion der App, da es den Spielern ermöglicht, ihren aktuellen Spielstatus zu verfolgen. Dies trägt zusätzlich zur besseren Koordination währen der Boßeltour bei. In den User-Tests zeigte sich jedoch, dass es Unklarheiten gab, was der jeweilige Status bedeutet. Um diese Verwirrung entgegenzuwirken, wurde das Status Feature in einem Slide-Menü integriert. Dies bietet mehr Fläche, um jeden Status mit einer Beschriftung zu versehen

Status
Das Status-Feature ist eine wichtige Funktion der App, da es den Spielern ermöglicht, ihren aktuellen Spielstatus zu verfolgen. Dies trägt zusätzlich zur besseren Koordination währen der Boßeltour bei. In den User-Tests zeigte sich jedoch, dass es Unklarheiten gab, was der jeweilige Status bedeutet. Um diese Verwirrung entgegenzuwirken, wurde das Status-
Feature in einem Slide-Menü integriert. Dies bietet mehr Fläche, um jeden Status mit einer Beschriftung zu versehen.

Erste Version der Statusfunktion

Zweite Version der Statusfunktion

Das Dialogfeld
Zur Bestätigung einer Aktion enthält das Dialogfeld immer zwei Buttons. Dabei gibt immer einen farbigen Button zur Bestätigung und einen farblosen zum Abbrechen der Aktion. Diese Entscheidung dient dazu, die Aufmerksamkeit des Nutzers intuitiv auf die primäre Aktion zu lenken, während die sekundäre Aktion bewusst dezent gestaltet ist. Der farbige Button signalisiert deutlich die empfohlene Handlung, wohingegen der Farblose Button dem Nutzer die Möglichkeit gibt die Aktion ohne Ablenkung abzubrechen. Diese visuelle Hierarchie soll dabei helfen, Fehlklicks zu vermeiden und Entscheidungen zu erleichtern.

Das Dialogfeld
Zur Bestätigung einer Aktion enthält immer zwei Buttons. Dabei gibt immer einen farbigen Button zur Bestätigung und einen farblosen zum Abbrechen der Aktion. Diese Entscheidung dient dazu, die Aufmerksamkeit des Nutzers intuitiv auf die primäre Aktion zu lenken, während die sekundäre Aktion bewusst dezent gestaltet ist. Der farbige Button signalisiert deutlich die empfohlene Handlung, wohingegen der Farblose Button dem Nutzer die Möglichkeit gibt die Aktion ohne Ablenkung abzubrechen. Diese visuelle Hierarchie soll dabei helfen, Fehlklicks zu vermeiden und Entscheidungen zu erleichtern.

Bestätigunsdialog

Reflexion

Die agile Zusammenarbeit im Team förderte eine offene Kommunikation und ein starkes Zusammengehörigkeitsgefühl.
Das Commitment war von allen Seiten deutlich spürbar. Ein Aspekt, der sich verbessern ließe, wäre die frühzeitige
Fertigstellung des Enddesigns, um kritische Anpassungen später im Prozess zu vermeiden. Insgesamt erfüllte die App
jedoch alle gestellten Anforderungen und konnte UXMA und uns in vielerlei Hinsicht zufriedenstellen.

Die agile Zusammenarbeit im Team förderte eine offene Kommunikation und ein starkes Zusammengehörigkeitsgefühl. Das Commitment war von allen Seiten deutlich spürbar. Ein Aspekt, der sich verbessern ließe, wäre die frühzeitige Fertigstellung des Enddesigns, um kritische Anpassungen später im Prozess zu vermeiden. Insgesamt erfüllte die App jedoch alle gestellten Anforderungen und konnte UXMA und uns in vielerlei Hinsicht zufriedenstellen.

Die agile Zusammenarbeit im Team förderte eine offene Kommunikation und ein starkes Zusammengehörigkeitsgefühl. Das Commitment war von allen Seiten deutlich spürbar. Ein Aspekt, der sich verbessern ließe, wäre die frühzeitige
Fertigstellung des Enddesigns, um kritische Anpassungen später im Prozess zu vermeiden. Insgesamt erfüllte die App jedoch alle gestellten Anforderungen und konnte UXMA und uns in vielerlei Hinsicht zufriedenstellen.

erstellt mit viel Kaffee und Framer☕

Impressum | Datenschutz

Impressum | Datenschutz | LinkedIn