Urban Arena – Raphael Alexander Mayer

Kontext

Interdisziplinäres Uni-Projekt mit Usability-Engineering-Studierenden.

Ziel war es, eine nutzerzentrierte Smartphone-App zu entwickeln: von Ideenfindung und Konzept über Wireframes und Screendesign bis zum interaktiven Prototypen mit Usability-Tests und Präsentation.

Die Themenwahl war frei. Wir haben uns bewusst für Sport und Gamification entschieden, um Menschen auf motivierende Weise zu mehr Bewegung und sozialer Vernetzung in der Stadt anzuregen.

Team & Rolle

Team: Gemeinsames Projekt mit Leon Staib (Design) und Bernhard Schöffel (EFI Usability Engineering).

Leon und ich haben gemeinsam das Konzept, die Spielfunktionen und User-Flows entwickelt und priorisiert. Bernhard unterstützte mit Usability-Tests und Feedback.

Meine Rolle:

Organisation und Strukturierung des Designprozesses
Abstimmung und Feedback beim Branding
Federführend bei der Erstellung und Verknüpfung des Figma-Prototyps (Komponenten, Flows, Interaktionen)
Entwicklung der Gamification-Assets (Avatare, Trophies) mithilfe von KI-Tools

Low-Fidelity-Wireframes zur Entwicklung der Kartenansicht und Arena-Interaktion mit Fokus auf Orientierung und Einstieg in Matches

Prozess

Ideenfindung & Zielgruppe: Analyse von Motivation und Nutzungskontext, Entwicklung einer klaren Problemdefinition.

Konzept & Flows: Gemeinsames Strukturieren von App-Funktionen und User-Journeys, Priorisierung der Features.

Wireframes & Prototyping: Komponentenbasiertes Design und interaktive Verknüpfungen in Figma.

Gamification & Assets: Entwicklung von Avataren, Trophies und Illustrationen mithilfe generativer Tools.

Feedback & Iteration: Usability-Tests im kleinen Rahmen, Diskussion und Optimierung der Abläufe.

Frühe Konzeptskizzen und Notizen zur Definition von Zielgruppen, Nutzungsszenarien und Spiellogiken der App

Komponentenbasiertes Designsystem mit Icons, States, Buttons und Navigation zur konsistenten Gestaltung der App

Ergebnis

Entstanden ist ein interaktiver, detailreicher Prototyp, der die Idee einer motivierenden Sport-Community im urbanen Raum greifbar macht.

Die App bietet:

Intuitive Kartenansicht: Übersicht aller Arenen mit Sportarten, Ausstattung und Verfügbarkeit.
Detaillierte Arena-Profile: Mit Fotos, Infos, aktiven und geplanten Matches, alles auf einen Blick planbar.
Aktive Arena-Ansicht: Spezieller Modus während des Spiels, mit Live-Check-in und Match-Tracking.
Match-Management: Übersicht über zugesagte, aktive und geplante Matches in der Umgebung.
Liga-System: Saisonbasiertes Ranking, das Aktivität und Erfolg spielerisch sichtbar macht.
Spielerprofile: Individuell gestaltbare Avatare mit Infos zu Spieltyp, Fairness, Trophies und Crew-Mitgliedschaften.

Der Prototyp erlaubt es Nutzer*innen, selbst durch die wichtigsten Szenarien zu navigieren und vermittelt so ein klares Gefühl für UX, Ästhetik und Motivation der Urban-Arena-App.

Kampagnenplakat der Urban-Arena-App mit Fokus auf Gamification, lokaler Vernetzung und sportlicher Aktivität im urbanen Raum

Prototype ausprobieren

Interaktive Kartenansicht mit visuellem Fokus auf verfügbare Arenen und schnellen Zugriff auf sportliche Aktivitäten in der Umgebung

Übersicht aktiver und geplanter Matches mit klarer Hierarchie zur schnellen Entscheidungsfindung und Teilnahme

Gamifiziertes Ranglistensystem zur Sichtbarmachung von Aktivität, Fortschritt und Wettbewerb innerhalb der Community

Learnings

Klare Priorisierung, Rollenverteilung und Kommunikation im Team sind entscheidend, gegenseitiges Feedback verbessert die Ergebnisse spürbar.
Komponentenbasiertes Design in Figma spart Zeit und sorgt für Konsistenz.
Gründliche Analyse hilft, Pain-Points gezielt zu lösen.
Weniger ist oft mehr – Fokus auf das Wesentliche im MVP.
Für den Rücken hilft Sport tatsächlich mehr als das Designen einer Sport-App. 🥴