Wavy ist ein UX/UI-Konzept für eine Surf-Forecast-App, die Wind-, Wellen- und Wettervorhersagen für Surfer liefert.

Wavy testen

Hintergrund

Wer surfen will, muss das Wetter lesen können – und das ist gar nicht so einfach. Windrichtung, Wellengröße, Gezeiten, Swell-Perioden – all das spielt eine Rolle. Die meisten Surf-Apps zeigen diese Daten nüchtern in Tabellen und Charts. Selbst für erfahrene Surfer ist es mühsam, sich durch die Infos zu wühlen und daraus die richtigen Schlüsse zu ziehen. Für Einsteiger wird’s noch schwieriger: Wer sich mit Wind- und Wetterdaten nicht auskennt, bleibt oft ratlos zurück.

Beispiele von Surf Forecasts anderer Apps

Ziel

Mein Ziel war es eine App zu designen, die beide Gruppen abholt. Die präzise Forecasts für Profis liefert – aber auch leicht verständliche Prognosen und praktische Tipps für alle, die gerade erst anfangen oder einfach nur wissen wollen, ob sich der Weg zum Spot heute lohnt.

Die Nutzer verstehen

Um herauszufinden, was Surfer wirklich brauchen, habe ich Interviews mit Surfern unterschiedlicher Erfahrungsstufen geführt, die Surf-Forecast Apps nutzen. Dabei wurde schnell klar: Ihr Wissen über Wetter- und Wellendaten variiert stark – je nachdem, wie lange sie schon surfen. Auch der Nutzungskontext spielt eine große Rolle.

Wer im Urlaub surft und einen Spot zum ersten Mal besucht, braucht ganz andere Infos als Locals: Wie kommt man hin? Gibt’s Parkplätze? Wie ist der Untergrund, wann ist Ebbe, wie brechen die Wellen? Fortgeschrittene Surfer dagegen suchen gern nach versteckten, weniger frequentierten Spots – und möchten diese in der App speichern und verwalten können.

Auf Basis der Interviews habe ich zwei Personas entwickelt, die exemplarisch für unterschiedliche Surf-Typen stehen – samt typischer Nutzungsszenarien. Das half mir, die konkreten Bedürfnisse zu verstehen und gezielt Funktionen zu entwerfen, die in der Realität auch wirklich einen Mehrwert bieten.

Hauptfunktionen der App

Surf-Vorhersagen sind ohnehin schon ziemlich komplex, deshalb habe ich mich bewusst dagegen entschieden, die App mit "nice to have"-Funktionen zu überladen. Stattdessen habe ich sie auf die wesentlichen Features reduziert – genau die, die User wirklich brauchen, um eine Surf-Entscheidung zu treffen.

Designprozess der Wetter- und Wellengestaltung

Schon bei den ersten Nutzertests wurde mir klar, dass das Design der Vorhersagen eine Herausforderung darstellt.

Als Nicht-Surferin war es besonders wichtig, ausführliche Interviews mit Surfern zu führen, um zu verstehen, welche Faktoren die Wellenqualität bestimmen und nach welchen Daten sie suchen. Das Design hat viele Tests und Änderungen durchlaufen. Die folgenden Bilder zeigen die wichtigsten Schritte.

Erste Forecast-Screens

Die ersten Screens zeigten die Forecasts nach Wochentagen, Tageszeiten und Stunden. Die wichtigsten Daten wurden in einer Grafik dargestellt, die die Swell- und Windrichtung zusammen mit der Strandausrichtung zeigte.

Reaktionen der User

Die User verstanden die Grafik zu den Surfbedingungen nicht – und konnten sie sich trotz Erklärung durch Onboarding-Screens nicht merken.

Erste Überarbeitung

Ich vereinfachte die Grafik. Sie zeigt jetzt nur noch die Windrichtung zusammen mit der Strandausrichtung, damit Nutzer:innen sehen können, ob der Wind offshore oder onshore weht. Ich ergänzte Farben, die unterschiedliche Surfbedingungen symbolisieren.

Reaktionen der User

Die Darstellung der Strandausrichtung war immer noch unklar. Die farbcodierten Surfbedingungen wurden als hilfreich angesehen, waren aber zu schwer zu merken und voneinander zu unterscheiden. Die User empfanden die Daten als zu verstreut und hatten Probleme, die Informationen zu vergleichen.

Weitere Änderungen

Um die Orientierung zu erleichtern, vereinfachte ich Farben und ergänzte Labels zur Bedeutung. Nutzer:innen können per Tab durch die Tage wischen, die Strandausrichtung wird zur besseren Erinnerung kurz eingeblendet. Die Navigation ist reduziert, die Daten sind klarer gegliedert – die Tageszeitansicht entfiel zugunsten einer präziseren Stundenansicht.

Reaktionen der User

Die Screens wurden als klarer empfunden. Spotnamen waren jedoch schwer zu erkennen, und die Farben wurden teils missverstanden. Viele Anfänger:innen fühlten sich von den reinen Daten weiterhin überfordert und wünschten sich mehr Erklärungen.

Letzter Design-Schritt

Ich gestaltete den Homescreen um: Statt reiner Wetterdaten zeigen jetzt Begriffe, Sternebewertungen und Tipps die Surfbedingungen – einfach verständlich für Anfänger:innen. Fortgeschrittene finden auf einem Extra-Screen detaillierte Daten und eine Karte, die Wind-, Swell- und Strandausrichtung visualisiert.

Reaktionen der User

Die Surf-Anfänger:innen fühlten sich jetzt deutlich sicherer. Auch die Surf-Profis fand die detaillierten stündlichen Vorhersagen hilfreich, die sie selbst interpretieren können.

Leistungen:
UX & UI Design, User Research

2020