WarnWetter ReDesign

I. Grundlage

1. Projektübersicht

Die WarnWetter-App des Deutschen Wetterdienstes hat einen riesigen Vorteil: absolut verlässliche, amtliche Daten. Das Problem ist, dass diese Stärke in einem unübersichtlichen, unpersönlichen Design untergeht. Unser Ziel: die komplexen Informationen verständlicher machen und die App an die echten Bedürfnisse ihrer Nutzer:innen anpassen.

2. Alte App & Rezensionen

Viele gute Features der App sind so gut versteckt, dass sie kaum jemand findet – die Pollenflug-Anzeige etwa entdecken manche Nutzer:innen erst nach einem halben Jahr. Dazu kommt visueller Clutter: Menüs und Overlays verdecken genau das, was man eigentlich sehen will, und Detailansichten verlangen langes Scrollen. Besonders spürbar wird das unterwegs, mit dicken Handschuhen auf der Skipiste oder mit dem Hund an der Leine. Auch die App-Store-Rezensionen bestätigen das: kleine, schwer erkennbare Grafiken, unübersichtliche Listen, ein hakeliges Radar. Kurz gesagt: riesiges Potenzial, das an schlechter Usability scheitert.

II. Konzept

1. Persona und Use Case

Das ist Anna: 22, Studentin in Kempten, am liebsten draußen im Allgäu unterwegs – wandern, Ski fahren, Gassigehen. Für sie ist Wetter kein Smalltalk-Thema, sondern eine Frage der Sicherheit. Sie braucht präzise Daten, aber kein Meteorologie-Studium: Ein Blick soll reichen, um zu wissen, ob sie losgeht oder wartet. Anna steht stellvertretend für viele Befragte aus unseren Interviews, wie ihr geht es auch Gerhard, der Infos für seinen Garten braucht, oder Fabienne und Marco, die im Spanienurlaub vor allem den UV-Index checken. Eine generische Ansicht für alle funktioniert für keinen von ihnen wirklich.

2. Value Proposition: Alt vs. Neu

Bisher lautete das inoffizielle Leitbild der App: Schutz von Leben und Sachwerten durch verlässliche, amtliche Wetterdaten. Wichtig, aber sehr technisch. Wir haben den Fokus gedreht: Wetter verstehen, nicht nur ablesen. Aus komplexen Daten werden persönliche Handlungsempfehlungen. Jeder soll auf einen Blick wissen, was der Tag bringt. Vom reinen Datenlieferanten zum persönlichen Begleiter: Das ist der Kern unseres Redesigns.

V. Finale UI

1. Informationsarchitektur

Der Onboarding-Prozess führt direkt auf den Navigation Screen. Von dort aus wählt man zwischen Standorten und Templates, dem Community-Profil und den Einstellungen. Die Auswahl eines Standorts führt auf den Homescreen, der immer den aktiven Standort zeigt. So bleiben die zentralen Funktionen der App jederzeit schnell erreichbar.

2. Design Principles

Ausgehend von unserem Research und den identifizierten Pain Points haben wir zunächst Adjektive gesammelt, die zu unserem Redesign passen. Daraus entwickelten wir eine erste Fassung unserer Design Principles. Unser System soll Wetterdaten so aufbereiten, dass keine Überraschungen mehr die Pläne durchkreuzen können. Durch individuelle Anpassungen liefern wir nur die Informationen, die gerade wirklich relevant sind. Durch klare Visualisierungen und intuitive Darstellungen machen wir die Wetterlage auf einen Blick erfassbar und jegliche Information soll möglichst präzise sein, um den Nutzer:innen ein Gefühl von Sicherheit zu geben.

3. Design System

Farbe ist unser wichtigstes Kommunikationsmittel – und codiert gleich zwei Ebenen: Temperatur (Blau unter 0 °C, Grün 0–10 °C, Gelb 10–20 °C, Rot über 20 °C) und Gefahrenstufe (von Blau für „keine Gefahr” bis Rot für „kritisch”). Dazu kommen Icons von Lucide und die Schrift Outfit in einer klaren Größenskala. Für die Widgets haben wir uns an etablierten Wetter-Apps orientiert und die stärksten Features herausgesucht, einiges aus der Original-App, wie der Zeitstrahl in der Karte, ist geblieben. Jedes Widget soll auf einen Blick verständlich sein, seine Farbe folgt konsequent der dargestellten Information. Auch Kleidungsempfehlungen passend zum Wetter gehören zum personalisierten Gesamtbild dazu.

4. Flows

So fühlt sich das im Zusammenspiel an: Anna öffnet die App, um eine Wanderung zu planen, und wählt das Wander-Template, schon vorkonfiguriert mit passenden Widgets. Sie passt die Kartenanzeige noch etwas an, ergänzt ein paar Widgets nach Vorlieben und bestätigt mit „Übernehmen”. Da sie die App zum ersten Mal nutzt, fügt sie noch Kempten als Standort hinzu und favorisiert ihn.

Auf dem Homescreen sieht Anna durch die Farbcodierung sofort: Es ist gerade sehr warm in Kempten. Oben eine Warnung samt Illustration zum aktuellen Wetterzustand, darunter ihre Widgets, manche davon interaktiv, etwa die Karte, die zwischen Niederschlag und Temperatur wechseln kann.

Will Anna lieber auf dem Nebelhorn wandern statt in Kempten, wechselt sie auf die Navigationsseite, sucht das Nebelhorn, fügt es hinzu und favorisiert es. Oben angekommen ist es spürbar kälter. Der Homescreen passt sich automatisch an. So zeigt sich, wie flexibel die App auf unterschiedliche Orte und Situationen reagiert.

(youtube: https://www.youtube.com/watch ….. restlicher link hier einfügen)