Hitzfrei
Eine mobile App, die Menschen in Graz hilft, kühle Orte zu finden, schattige Routen zu planen und während Hitzewellen sicher zu bleiben, aufgebaut auf den offenen Klimadaten der Stadt und inspiriert vom UN-Nachhaltigkeitsziel 11.
Hitzfrei hilft Menschen in Graz, an heißen Tagen sicher und komfortabel zu bleiben: durch das Kartieren von Abkühlungsorten, schattigen Gehrouten und Echtzeit-Temperaturwarnungen, aufgebaut auf den offenen Klimadaten der Stadt. Das Projekt verwandelt unsichtbare Hitzedaten in klare, ruhige Orientierung: wo man sich abkühlen kann, welchen Weg man gehen sollte und wann Vorsicht geboten ist. Es ist vom UN-Nachhaltigkeitsziel 11: Nachhaltige Städte und Gemeinden inspiriert.
Das Problem
Mit steigenden Temperaturen und häufigeren Hitzewellen brauchen Menschen in Graz schnellen und einfachen Zugang zu Abkühlungsmöglichkeiten in der ganzen Stadt. Hitzerisiko ist nicht gleich verteilt: ein Brunnen, eine schattige Parkbank oder ein klimatisiertes Café können für eine Person weit wichtiger sein als für eine andere, je nach Alter, Gesundheit und Art der Fortbewegung durch die Stadt.
Die Lösung
Nutzer:innen können nahegelegene Abkühlungsorte entdecken, sich über schattige Routen dorthin navigieren lassen, selbst neue Orte melden und Push-Warnungen erhalten, wenn die Bedingungen gefährlich werden. Die App behandelt Hitze als etwas, das man planen kann, statt nur darauf zu reagieren.

Personas
Drei Personas prägten das Design: Maria Uber, 56, Deutschlehrerin im Grazer Bezirk Gries, lebt allein, geht überall zu Fuß und sorgt sich während Hitzewellen um ihre Gesundheit. Sie braucht einfache, gut lesbare Orientierung und Hitzewarnungen. Lukas Steiner, 24, Student im Bezirk Lend, fährt überall mit dem Rad und möchte schattige Routen und Echtzeit-Temperaturchecks. Jakob Weber, 35, Marketing-Manager im Bezirk Andritz, arbeitet remote zwischen Cafés und Coworking-Spaces und braucht klimatisierte Arbeitsorte sowie schattige Routen zwischen Terminen.

Storyboard
Ein frühes Storyboard zeichnete nach, wie eine Bewohnerin die Hitze bemerkt, Hitzfrei öffnet, einen nahen Abkühlungsort findet und sicher dorthin gelangt, und verankerte die späteren Screen-Abläufe in einem konkreten Alltagsmoment statt einer abstrakten Feature-Liste.

User Journey
Die Journey Map zeichnet eine vollständige Sitzung an einem heißen Tag nach: vom Erhalt einer Hitzewarnung über das Prüfen von Karte und Vorhersage bis zur Wahl einer schattigen Route und der Rückmeldung zum Zustand eines Ortes, und zeigt, wo Reibung und Abbruchrisiko am höchsten waren.

Informationsarchitektur
Die IA organisiert die App um fünf dauerhaft erreichbare Bereiche in einer unteren Tab-Leiste: Karte, Route, Vorhersage, Community und Profil, sodass Abkühlungsort-Suche, Routenplanung, Wetterbewusstsein, Community-Meldungen und persönliche Risikoeinstellungen jeweils nur einen Klick entfernt sind.

Wireframes
Low-Fidelity-Wireframes legten Layout und Hierarchie fest, bevor das visuelle Design begann: Onboarding, die Abkühlungsort-Karte, Routenvergleich, das Vorhersage-Dashboard und Community-Meldungen, damit das Hitzeindex-Farbsystem konsistent angewendet werden konnte, sobald die Struktur stand.

Reflexion
Hitzfreis stärkste Idee ist, urbane Hitze als Designproblem mit einer klaren, lokalen Antwort zu behandeln: echte Grazer Bezirke, Parks und Brunnen, verankert in den Klimadaten der Stadt selbst, gezielt für die Menschen mit dem höchsten Risiko: ältere Bewohner:innen, Menschen mit hitzeempfindlichen Erkrankungen und alle, die sich um schutzbedürftige Personen kümmern. Im nächsten Schritt würde der schattenbasierte Routenalgorithmus mit echten Fußgängerdaten validiert und das Community-Meldemodell so erweitert, dass es über einen einzelnen heißen Sommer hinaus trägt.
Das Interface kombiniert Poppins für Display-Schrift und Überschriften mit Inter für Fließtext, auf einer kühlen Blau-Navy-Oberflächenpalette mit Teal als primärer Aktionsfarbe und Amber als reserviertem Identity-Akzent. Eine eigene Hitzeindex-Skala (kühles Navy, mildes Teal, blasses Warm-Blau, Amber für heiß, Orange-Rot für extrem) zieht sich konsistent durch Kartenüberlagerung, Warnungen, Vorhersage-Diagramme und Hitzetagebuch, sodass Temperaturrisiko überall in der App gleich gelesen wird.

Brand Guideline
Das vollständige Brand Guideline dokumentiert Hitzfreis Identität von Anfang bis Ende: Logo und Schutzraum, Farbe, Typografie, Stimme und Ton sowie Anwendungsbeispiele, verankert durch drei Markensäulen: Local (gebaut für Grazer Bezirke, Parks, Brunnen und die Mur), Trustworthy (verankert in offiziellen städtischen Klima- und Wetterdaten) und Caring (jedes Feature beginnt damit, schutzbedürftige Menschen sicher zu halten). 18 Seiten. Unten durchblättern.


Hitzfrei Brand Guideline, 18-seitige Identitätsreferenz.
Design System
Das Design System dokumentiert markenspezifische Farb-Tokens (Teal für primäre Aktion, Navy für Text und Struktur, Amber für Identity), Poppins/Inter-Typografie, eine 4px-Abstandsskala, Elevation-Stufen und die fünfstufige Hitzeindex-Skala, die Karte, Warnungen, Vorhersage und Tagebuch visuell verbindet.


Interface-Mockups
Das Interface angewendet im Kontext, über die zentralen Abläufe: Onboarding, Karte und Navigation, Routenplanung, Vorhersage und Community.
Onboarding

Karte & Navigation


Routenplanung

Vorhersage


Community

