Sportsdate

Sportsdate ist eine Web-App und PWA, die in Berlin organisch mit einer engagierten, wenn auch kleinen Nutzergemeinschaft wächst. Die App wurde entwickelt, um sportliche Aktivitäten jenseits der Grenzen sozialer Medien besser zu organisieren. Sie richtet sich zunächst an Beachvolleyball-Fans, ist aber für eine Vielzahl von Sportarten gedacht.

Es gibt bereits Apps, die dabei helfen, sich in Gruppen für den Sport zu organisieren. Eine umfassende Recherche hilft uns zu verstehen, warum wir Sportsdate noch brauchen, von welchen positiven Ansätzen wir lernen können und wo wir uns abheben können.

Die ersten hypothetischen Lösungen und Detailfragen, die sich aus der bisherigen Recherche ergeben haben, wurden in schnellen Skizzen und Vergleichslisten behandelt.

In der bisherigen Auseinandersetzung sind verschiedene Anwendungsfälle der App sichtbar geworden, die aber noch nicht im Detail beschrieben wurden, was jetzt nachgeholt werden sollte. Darüber hinaus wurde eine schematische Skizze erstellt, welche UI-Komponenten die einzelnen Fälle darstellen könnten.

Nachdem der Funktionsumfang mit Hilfe der Edge Cases skizziert wurde, können verschiedene Varianten der Infoarchitektur durch Sortierung von benannten und farblich gekennzeichneten Karten miteinander verglichen werden.

Die derzeit in der App angebotenen Sportkategorien folgen keinem bestimmten Schema und sind im Laufe von rund fünf Jahren organisch gewachsen. Einerseits spiegeln sich diese „nur“ in den Filtermöglichkeiten für Aktivitäten und Orte in der App wider – andererseits orientieren sich Nutzergruppe, Marke und Identität der App an der Sportart. Eine Fokussierung auf eine Sportart würde die App wahrscheinlich stärken, ist aber derzeit nicht die Absicht des Entwicklers.

Das Konzept, wie Besucher die Web-App im Vergleich zu registrierten Nutzern sehen und nutzen können, ist in der jetzigen Form nicht klar gelöst, so dass z.B. die gesamte erste Landing Page nach der Registrierung verschwindet. Dies, wie auch der Anmeldeprozess an sich, muss überarbeitet werden.

Das Herzstück der App ist die Planung von Veranstaltungen. Das Erstellungs- und Teilnahmemanagement soll den Nutzern je nach Anwendungsfall und Kontext verschiedene Möglichkeiten bieten - der Prozess soll so umfassend wie nötig und dennoch so einfach wie möglich sein. Diesem Thema wird im weiteren Verlauf noch viel Aufmerksamkeit gewidmet werden müssen.

Es hat sich als besonders fruchtbar für das gegenseitige Verständnis mit dem Entwickler erwiesen, mit Screenshots der bestehenden Anwendung zu arbeiten, sie zu zerlegen und in neuer Form wieder zusammenzusetzen.

In ihrem ursprünglichen Zustand war die Kartenansicht aufgrund der vielen Ortsmarken unübersichtlich. Nutzer konnten Orte in ihrer Umgebung „abonnieren“, um über dort stattfindende Aktivitäten informiert zu werden - was in Form von roten oder grünen Markierungen angezeigt wurde und sich als missverständliche Kodierung erwies.
Danach: Die Beschriftungen wurden verkleinert und mit einem Zähler zusammengefasst („Zoom out“). Der Interessenbereich des Nutzers ist durch Kreise klar definiert. Außerdem werden in der Detailansicht der Veranstaltungsorte nun auch direkt die dort stattfindenden Veranstaltungen angezeigt.

In der Vorgängerversion der App gibt es ein ungewöhnliches Konzept von Nutzerprofilen in Form von sogenannten Homepages, die der Nutzer optional erstellen kann und die als Landingpage für sein Profil dienen.
Dieses Konzept wurde hinterfragt und teilweise so umgesetzt, dass alle Nutzer ein Profil mit einem Minimum an Informationen haben, in dem auch die vom Nutzer erstellten Veranstaltungen nach dem gleichen Schema wie das Vorschaumodal für Veranstaltungsorte angezeigt werden.

Die Idee war, das aktuelle Logo als Teil des Gesamtprojekts neu zu gestalten. Da die weitere Gestaltung der Benutzeroberfläche im Einklang mit dem Logo stehen sollte, haben wir diesen Schritt an den Anfang - als Orientierungspunkt - dieser Phase gestellt.
Als Themen für das Logo wurden die folgenden Schlagworte verwendet: Sport, gemeinsam etwas unternehmen, moderne Technologie, eventuell ein Fokus auf (Beach-)Volleyball und der Name Sportsdate.App“, der immer noch gültig war.

Wie bereits eingangs erwähnt, basiert die App auf dem Ionic-Framework, dessen Grunddesign vom jeweiligen Betriebssystem - als WPA in iOS oder Android - oder dem jeweiligen Browser abhängig ist. Zudem besteht die Möglichkeit des Themings und der Eingriffe in HTML und CSS.
Allerdings stießen wir in diesem Punkt an die Grenzen der Umsetzung in Code, worauf ich an anderer Stelle noch näher eingehen werde.
Auf der Grundlage der Figma-Community-Datei „Ionic 6 Material UI Kit“ (Dank an Aditya Patel) habe ich die benötigten Komponenten in Figma erstellt.

Die Listenelemente für die Vorschau der verfügbaren Ereignisse sollten so viele Informationen wie möglich enthalten, ohne überladen und unübersichtlich zu werden.
Zu diesem Zweck habe ich verschiedene Arten von Badges eingeführt, die für den Benutzer durch Icon, Text und Farbe als Merkmale zur Unterscheidung der verschiedenen Ereignisattribute schnell lesbar sind.

Abschließend wird ein Ausblick gegeben, wie sich die aktuelle Designsprache auf den Dialog zur Teilnahme an Veranstaltungen auswirken würde.
Wir werden nicht zu sehr in die Tiefe gehen, was die Ansichten der verschiedenen Benutzer, die Formate der Veranstaltungen usw. betrifft, bis die grundlegenden Fragen der Umsetzung geklärt sind.