MagazinProjekt

Swiss Volley setzt auf Nutzerfreundlichkeit: Mit foryouandyourcustomers zu einer neuen Webseite

2023-11-22 Annegret Bönemann
Screendesigns der neuen Swiss Volley Webseite

Logo Swiss Volley

Swiss Volley repräsentiert die zweitgrösste Mannschaftssportart der Schweiz und ist für die Entwicklung des Volley- und Beachvolleyballs verantwortlich.

Gemeinsam mit foryouandyourcustomers hat Swiss Volley ihre Webseite einer erfolgreichen Neugestaltung unterzogen. Diese neue Webseite, welche voraussichtlich Mitte 2024 veröffentlicht wird, zielt nicht nur darauf ab, die User Experience für verschiedene Benutzergruppen zu verbessern, sondern auch die Kooperation mit regionalen Verbänden zu stärken. Foryouandyourcustomers hatte die Möglichkeit, Swiss Volley bei der Gestaltung zu unterstützen und freut sich, einige Einblicke in diesen Prozess der Neugestaltung einer inhaltsreichen Plattform und den damit verbundenen Herausforderungen zu teilen.

Swiss Volley hat foryouandyourcustomers ihr Vertrauen geschenkt, um die Transformation ihrer Webseite in eine benutzerzentrierte Plattform voranzutreiben. Anforderung war, dass die Seite auf die vielfältigen Bedürfnisse verschiedener Nutzergruppen ausgerichtet wird, darunter Fans, Spieler*innen, Trainer*innen und Schiedsrichter*innen. "Ich spürte sofort die Klarheit im Ansatz von Marco Torrente und seinem Team, und das schenkte mir Vertrauen", äußerte Ursula Gugger Suter, Leiterin der Kommunikation im Verband und treibende Kraft hinter dem Webseite-Projekt.

Die vielfältigen Anforderungen an die Neugestaltung

Swiss Volley ist der nationale Dachverband für Volleyball und Beachvolleyball in der Schweiz. Er repräsentiert nahezu 50.000 lizenzierte Spieler*innen und ist für die Entwicklung dieser Sportarten im Land verantwortlich. Als Dachorganisation fungiert Swiss Volley als Veranstalter, Dienstleister und Lobbyist für den Volleyballsport. In dieser Rolle muss die Organisation mit verschiedenen Interessens- und Zielgruppen umgehen und versucht, diese so effektiv wie möglich zu erreichen, auch online.

Daher war es gemäß Gugger Suter von entscheidender Bedeutung, die vielfältigen Anforderungen und Perspektiven zu verstehen und darauf zu reagieren. Als Projektleiter und Service Designer von foryouandyourcustomers schlug Marco Torrente eine Reihe von Expert*innen-Interviews und Workshops vor. Vertreter*innen aus regionalen Verbänden wurden einbezogen, um die Ziele und Erwartungen des Swiss Volley-Teams mit denen der verschiedenen Nutzergruppen abzustimmen.

Von Anfang an wurde deutlich, dass die Interaktion mit authentischen Nutzer*innen von entscheidender Bedeutung war, um eine Website zu gestalten, die ihren Bedürfnissen und Präferenzen entsprach, und um neue Konzepte rigoros zu testen. Was sich anfangs als eine gewaltige Hürde darstellte, entwickelte sich dank sorgfältiger Planung und einer gut orchestrierten Strategie zur Rekrutierung echter Benutzer*innen zu einem Erfolg.

Während die bisherige Webseite von innen, also aus Sicht von Swiss Volley, erstellt wurde, lag unser Fokus auf dem Blick von außen, den Menschen, die die Webseite als Nutzer*innen erleben.

Marco Torrente, Service Designer 


David und Ursula erstellen gemeinsam Nutzerprofile.

David und Ursula befestigen Notizen an einer Wand.

Design Sprint zur Förderung der Kooperation zwischen nationalen und regionalen Verbänden.

Um die Reise zur neuen Webseite in Gang zu setzen, nutzte Torrente den Design-Sprint-Ansatz. Dieser ermöglichte Swiss Volley, Ideen zügig zu prüfen und zu validieren, stets mit dem Fokus auf die Bedürfnisse echter Nutzer*innen. Torrente beschreibt den Prozess:

Im Fall von Swiss Volley fühlte sich der Sprint an wie ein sportlicher Wettkampf, bei dem ich der Trainer war. Die Teilnehmenden brachten die entsprechende sportliche Einstellung mit, was zu einer effektiven Entscheidungsfindung führte.

Marco Torrente, Service Designer

Ein entscheidender Schritt innerhalb des Design Sprints war ein zweitägiger Workshop mit dem Swiss Volley-Team. Hierbei wurde das umfangreiche Wissen des Teams sowie deren Empathie für Endnutzer*innen genutzt, um die ersten Entwürfe einer potenziell neuen Webseite zu gestalten. Diese Entwürfe wurden anschließend in einem digitalen Prototypen zusammengeführt, der noch in derselben Woche mit echten Nutzer*innen aus verschiedenen Zielgruppen getestet wurde. Dieser Ansatz ermöglichte es dem Designteam, bestehend aus Marco, David und Gavi, die wichtigsten Annahmen zu validieren und die wünschenswertesten Funktionen rasch zu priorisieren.


Bewertung von Benchmarking Beispielen

Der Designer David zeigt auf Bildschirmentwürfe auf einem Whiteboard, die Ideen und Konzepte illustrieren.

Eine neue Informationsarchitektur, um Inhalte leicht zugänglich zu machen

Eine große Herausforderung, die das Team während des Design Sprints entdeckte, war die große Komplexität der alten Website-Navigation, die das Ergebnis der kontinuierlichen Hinzufügung von Inhalten im Laufe der Zeit war. Andererseits bedeutete diese Reichhaltigkeit an Inhalten auch, dass es eine gute Grundlage für eine Neustrukturierung mit Blick auf verschiedene Benutzergruppen gab.

"Ziel der Neugestaltung war es, den Zugang zu Informationen für alle, die etwas vom Verband benötigen, zu vereinfachen. Niemand sollte sich in der Menge der Informationen verlieren oder sich in mehreren Schritte durchklicken müssen, um zu bestimmten Ergebnissen zu gelangen."

Ursula Gugger Suter, Leiterin Kommunikation Swiss Volley

Um dieses Ziel zu erreichen, hat das Team eine neue Informationsarchitektur entwickelt, um die Webseite-Navigation zu optimieren und sicherzustellen, dass die Nutzer*innen schnell und unkompliziert auf die gewünschten Informationen zugreifen können:

  • Der Inhalt sollte so organisiert sein, dass er für die Nutzer*innen sinnvoll ist.

  • Die Webseite sollte leicht zu durchsuchen sein.

  • Nutzer*innen sollten in der Lage sein, benötigte Informationen schnell und einfach zu finden.


Informationsarchitektur

Schreenshot der neuen Informationsarchitektur

Zusätzlich stellte das Team sicher, dass die neue Webseite folgende Funktionen beinhaltet:

  • Ein neu gestaltetes Game Center, das einen einfachen Zugang zu Informationen über Ergebnisse und anstehende Spiele bietet.

  • Einen dedizierten Wissensbereich, in dem wichtige Volleyball-Informationen zu finden sind.

  • Einen News-Bereich, der die Nutzer*innen mit den aktuellsten Nachrichten und Informationen über die verschiedenen Teams auf dem Laufenden hält.


Game Center vorher (links) und nachher (rechts)

Screenhots des Game Centers vorher und nachher

Eine neue Designsprache

Nachdem die Informationsarchitektur neu definiert wurde, begann das Designteam mit der Entwicklung einer völlig neuen Bildsprache, die Ästhetik und Funktionalität nahtlos miteinander verknüpft. Auch in diesem Zuge arbeiteten sie aktiv mit Endnutzer*innen und Interessengruppen zusammen, um sicherzustellen, dass die Webseite nicht nur visuell ansprechend ist, sondern auch die Benutzerfreundlichkeit im Fokus steht.

Inspiriert vom typografischen Erbe der Schweiz wählte das Team eine Schriftart, die Tradition mit einem frischen, modernen Look vereint. Die charakteristische rote Farbe des Verbandes und eine durchdachte Bildsprache wurden genutzt, um die Dynamik und die Emotionen, die mit dem Sport verbunden sind, zu vermitteln.


Typografisches Erbe der Schweiz

Beispiele Schweizer Typografie

Ein Designsystem wurde eingeführt, um die Entwürfe in Komponenten zu strukturieren und letztendlich eine konsistente Benutzererfahrung zu schaffen. Dieses System hilft dabei, etablierte Designmuster und -richtlinien zu nutzen, was wiederum die Benutzerfreundlichkeit erhöht. Das Ergebnis ist eine Webseite, die für Besucher*innen leicht zu navigieren ist und die Gesamterfahrung angenehmer und intuitiver gestaltet.

Performance durch React; Transparenz durch Storybook

Nachdem das Designsystem vollständig ausgearbeitet war, widmeten sich Lisandra und Felipe, Entwickler*innen von foryouandyourcustomers, der Erstellung der Frontend-Komponenten in React, um sicherzustellen, dass die Benutzer ein dynamisches und reaktionsschnelles Erlebnis genießen können. Zur Optimierung der Prozesse und zur transparenten Zusammenarbeit mit dem Backend-Partner visol wurde die Storybook-Plattform eingesetzt. Storybook diente als zentrale Plattform für das Hosting, die Dokumentation, das Testen und die gemeinsame Nutzung der programmierten Komponenten. Dank dieser Lösung konnten visol Neuerungen und Anpassungen live bertrachten und Swiss Volley Schritt für Schritt miterleben, wie die Design-Vision zum Leben erweckt wird.


Storybook: Beispiel Tab Menü

Screenshot von Storybook

Wie geht's weiter?

Obwohl bis zur offiziellen Einführung der neuen Webseite noch einige Aufgaben zu bewältigen sind, hat die Zusammenarbeit für Swiss Volley bereits wertvolle Früchte getragen. Die gemeinsame Vision, die in Zusammenarbeit mit verschiedenen Themenverantwortlichen und Regionalteams entstanden ist, verspricht, die Online-Präsenz des Volleyball- und Beachvolleyballsports in der Schweiz für alle Interessierten zu verbessern.

Darüber hinaus betont Gugger Suter, dass die überarbeitete Inhaltsstruktur es den Verantwortlichen ermöglichen wird, Informationen und Dienstleistungen noch besser auf die Bedürfnisse der Nutzer*innen auszurichten und zu präsentieren. Auch die Mitarbeiter*innen, die telefonische und schriftliche Anfragen bearbeiten, werden von der schnelleren Informationsbeschaffung der Benutzer profitieren.

Insgesamt verspricht dieses Projekt nicht nur ein benutzerfreundlicheres Erlebnis für künftige Webseite-Besucher, sondern hat auch die Zusammenarbeit zwischen Swiss Volley und den Regionalverbänden gestärkt – ein Beweis für den Erfolg des Projekts.


Unsere Leistungen

Suchen Sie Unterstützung in ähnlichen Bereichen? Wir stehen Ihnen gerne mit unserem Fachwissen zur Verfügung, wenn es um die Konzeption und Entwicklung neuer Webseite geht. Von der strategischen Planung über die Schaffung eines überzeugenden Nutzererlebnisses bis hin zur Einführung Ihrer Lösung – wir sind bereit, Ihren neuen Ideen, Produkten oder Dienstleistungen Leben einzuhauchen.

  • Wir begleiten Sie auf dem Weg zu einer neuen Webseite

  • Design-Sprints zur Erkundung und Validierung kreativer Visionen

  • Discovery Research für tiefgreifende Einblicke in Nutzer*innen

  • Schnelle Ideenfindung, Entwicklung von Prototypen und detailliertes Design

  • Erstellung durchdachter Design-Systeme

  • Ausarbeitung von Front- und Backend-Lösungen

Kontakt aufnehmen

Sind Sie neugierig, was wir für Sie tun können, oder haben Sie noch Fragen? Zögern Sie nicht, sich an Marco Torrente unter mto@foryouandyourcustomers.com zu wenden, um ein Gespräch über Ihre individuellen Anforderungen zu beginnen.