Mobile App-Marketing Webseite

Interaktives Wetter mit WebGL

  • research & product strategy
  • ideation
  • content strategy
  • interaction & interface design
  • prototyping & testing
  • development

Wetter-Alarm ist ein kostenloser Unwetterwarndienst der Kantonalen Gebäudeversicherungen und von Helvetia Versicherungen mit Meteodaten von SRF Meteo. Sie werden via App, E-Mail oder SMS vor aufkommenden Unwettern und Gefahren nach Postleitzahl gewarnt. Für die GVB Services AG durften wir die App-Marketing Webseite für die Wetter-Alarm App konzipieren, gestalten und umsetzen.

User-Flow für App-Marketing Webseite
User-Flow der Webseite in der Konzeptionsphase

Der tragende Usecase als interaktives Erlebnis

Der Wetter-Alarm der GVB Services AG informiert die Benutzer über bevorstehende Unwetter und liefert detaillierte Wetterprognosen und Sicherheitstipps um mögliche Schäden zu vermeiden. Um besonders den Usecase der rechtzeitigen Auslieferung von Unwetterwarnungen erlebbar zu machen, haben wir interaktives Wetter auf der Startseite implementiert. Beim Besuch der Startseite taucht der Besucher direkt in eine Wettersituation mit aufziehendem Unwetter ein. Der Link zu den Alarmen & Tipps liefert präventive Massnahmen, bevor das Unwetter hereinbricht. Scrollt der Besucher weiter, zieht das prognostizierte Unwetter dramatisch über den Screen. Das Unwetter verzieht sich allmählich und am Horizont kündigt sich Sonnenschein an. Das Unwetter ist schadlos überstanden. Um immer gut auf Unwetter vorbereitet sein zu können, folgt die Funktionsübersicht des Wetter-Alarms.

wala startseite gif

Dramaturgie in Bild und Form

Bildsprache

Um den Wetter-Alarm in Szene zu setzen, haben wir eine Reihe von Wetter-Bildern kreiert. Bildmaterial von gutem Wetter, schlechtem Wetter, Frost, Gewitter & Hagel, Glätte, Wind & Sturm, Hochwasser, Starkregen und Schnee wurden für das visuelle Erscheinungsbild der Webseite konzipiert und erarbeitet.

Iconografie

Die Iconografie des Wetter-Alarms erhielt mit der Erarbeitung der Webseite ebenfalls ein Upgrade. Die Icons der verschiedenen Wetter-Alarme wurden überarbeitet und pro Schwellenwert visuell angepasst.

wetter-alarm icons

Kunde: GVB Services AG

Website besuchen
Projekttyp
  • Responsive Website
Prozesse
  • Design Thinking
  • Design Sprint
Technologie
  • Wordpress
  • Atomic Theme
  • GSAP
  • jQuery
  • ScrollMagic
  • SASS
  • MySQL
  • WebGL
  • ThreeJS