UX-Design für den 1. Fc Frimmersdorf

In der zweiten Jahreshälfte von 2021 wurde ich gefragt, ob ich nicht das mobile UX Design für den Fußballverein 1. FC Frimmersdorf übernehmen kann.

Problem

Die Webseite sollte dabei sowohl junge Generationen, als auch ältere Nutzer ansprechen. Von der alleinerziehende Mutter, die Ihre Tochter für den Verein anmelden möchte bis hin zu langjährigen Fans, die nur die nächsten Termine auf der Seite nachschlagen möchten.

Zielsetzung

Das Ziel war es, in einem sehr engen zeitlichen Rahmen von lediglich acht Stunden alle Prozesse des UX Designprozesses abzuarbeiten.

Das UX Design beschränkte sich dabei nur auf die mobile Version der Webseite.

Analyse & Brainstorming

Bevor die ersten Skizzen erstellt wurden, ging es erst einmal darum, herauszufinden, wer eigentlich die Webseite besucht. Welche Nutzer könnten in einer so ländlichen Region rund um Frimmersdorf Interesse an einem kleinen Fußballverein zeigen?

Man muss sich also in die Lage der verschiedenen Personengruppen hineinversetzen. Welche Probleme gehen mit derartigen ländlichen Vereinen einher und wie kann man diese überwinden?

Die folgenden Nutzergruppen ergaben sich aus dieser ersten Phase:

  • Spieler, die gleichzeitig Vereinsmitglied sind
  • Familie und Angehörige der Vereinsmitglieder
  • Eltern, die Ihre Kinder zu einem Fußballverein anmelden möchten
  • Großeltern, die Ihren Kindern beim spielen zusehen möchten
  • Zugezogene Jugendliche und Erwachsene, die einen neuen Fußballverein suchen
  • Junge Familien, die neu in der Region sind
  • Spieler aus gegnerischen Mannschaften

Vor allem neu zugezogene Kinder, Jugendliche und Erwachsene bringen eine hohe Hürde mit sich. Man ist neu in der Region. Kennt vielleicht noch niemanden und die meisten Vereine präsentieren sich im digitalen Raum nicht gerade förderlich.

Man muss diese Nutzer also direkt ansprechen. Zeigen, dass man sich auf neue Gesichter freut und neue Mitglieder willkommen sind.

Neben diesem Kernproblem, gibt es auch noch einhergehende Probleme mit den verschiedenen Altersgruppen:

  • Nutzer, die Ihr Smartphone noch nicht lange benutzen
  • Digitale Barrieren (schlecht lesbarer Text oder zu schwierige Bedienung der Webseite)
  • Die Seit muss auch für nicht Fußball-affine Spieler einladend wirken

Mithilfe dieser Informationen konnten im nächsten Schritt User Personas erstellt werden. Also ein Satz aus verschiedenen Charakteren, die jeweils eine Nutzergruppe repräsentieren.

Was denken die Nutzer, was fühlen, sagen oder machen Sie im Zusammenhang mit der Webseite?

Erst nachdem dieser Punkt geklärt wurde. Nachdem ein tieferer Blick auf die Nutzer geworfen wurde, ging es an das eigentliche Brainstorming der Wireframes.

Crazy Eights & Wireframing

Nachdem die Nutzergruppen geklärt wurden und auch die Vereinsziele gesammelt wurden, ging es darum, ein Design für die mobile Startseite zu finden.

Deshalb begann ich mit der Methode der Crazy Eights. Acht Ideen in acht Minuten.

Erst danach kommt es zum eigentlichen Wireframing auf Papier. Man puzzelt verschiedene Ideen aus den vorangegangenen Skizzen zu einem Gesamtbild zusammen. Man wiederholt die verschiedenen Prozesse, um dann erneut verschiedene Versionen von Startseite, Terminseite und Co. zu sammeln.

Papier-Prototyp und Usertesting

Direkt im Anschluss folgt der erste Nutzertest. Hierfür wurden einfach die Papierprototypen verwendet. Aus Zeit- und Kostengründen gab es hier allerdings nur einen Tester, der herangezogen wurde.

Aber selbst ein einzelner Tester, der meinen Prototypen testet, hilft mir dabei weiter, die verschiedenen Ansätze zu bestätigen oder eben zu überarbeiten.

Wireframing in Figma

Im Anschluss habe ich meine Wireframes in Figma übertragen. Dieser Schritt ist quasi die Vorbereitung für das Prototyping im nächsten Abschnitt.

Prototyping

Prototyping ist der wohl spannendste Schritt. Man sieht, wie seine Wireframes langsam zum Leben erwachen. Oft wird dieser Schritt auch mit den eigentlichen Wireframes verwechselt. Ich habe schon oft gehört, dass Leute Wireframes sagen, aber eigentlich den high-fidelity Prototypen meinen.

Lofi-Prototyp

Als erstes habe ich einen low fidelity Prototyp in Figma gebastelt. Dabei war es mir vor allem Wichtig, dass die verschiedenen Elemente und der user flow an sich sinn ergibt. Ist alles leicht erreichbar. Gibt die Menüführung immer noch Sinn oder kann man Dinge verbessern?

Hifi-Prototyp

In einem nächsten Schritt habe ich den high fidelity Prototyp in Adobe XD erstellt. Nachdem der Prototyp abgesegnet wurde, wurde das ganze dann zum fertigen Mockup umgesetzt inklusive Bilder und provisorisches Füllmaterial. Probiere den Prototypen doch einfach selbst aus.

Das Ergebnis

Meinen fertigen Prototypen kannst du über meinem Adobe Share-Link selbst erleben. Dieser fertige Prototyp wurde dann über Maze, eine Weboberfläche für Usertesting getestet. Tester waren Vereinsmitglieder und Familienangehörige. Die Testergebnisse wurden ausgewertet und waren überwiegend positiv. Die verschiedenen Heatmaps zeigten zudem, dass von insgesamt 12 Testern keiner Probleme hatten, die verschiedenen Funktionen der Internetseite zu benutzen.

Fazit

Auch in kleineren Projekten kann man UX Design mit einbringen. Acht Stunden ist natürlich ein sehr enges Zeitfenster für ein UX Projekt. Und trotzdem kann man mithilfe der verschiedenen Phasen des UX Design Prozesses ein deutlich ausgereifteres Ergebnis erhalten, als wenn ein Entwickler ohne Leitlinie drauf los bastelt.

Zwar wurde in diesem Projekt nur der mobile Prototyp bereitgestellt und der Zeitrahmen war schon verdammt knapp bemessen. Trotzdem war es spannend von UX Research bis zum fertigen Prototypen viele der UX Design Phasen zu durchlaufen.