Hitzfrei
A mobile app helping people in Graz find cooling spots, plan shaded routes and stay safe during heatwaves, built on the city's open climate data and inspired by UN Sustainable Development Goal 11.
Hitzfrei helps people in Graz stay safe and comfortable on hot days: mapping cooling spots, shaded walking routes and real-time temperature alerts, built on the city's open climate data. The project turns invisible heat data into clear, calm guidance: where to cool down, which way to walk and when to take care. It's inspired by UN Sustainable Development Goal 11: Sustainable Cities and Communities.
The problem
With rising temperatures and more frequent heatwaves, people in Graz need quick and easy access to cooling resources across the city. Heat risk isn't evenly distributed: a fountain, a shaded park bench or an air-conditioned café can matter far more to one resident than another, depending on age, health and how they move through the city.
The solution
Users can discover nearby cool spots, get navigated to them along shaded routes, report new spots themselves and receive push alerts when conditions turn dangerous. The app treats heat as something to plan around, not just react to.
Personas
Three personas anchored the design: Maria Uber, 56, a German teacher in the Gries district who lives alone, walks everywhere and worries about her health during heatwaves. She needs simple, easy-to-read guidance and heat alerts. Lukas Steiner, 24, a university student in Lend who cycles everywhere and wants shaded routes and real-time temperature checks. Jakob Weber, 35, a marketing manager in Andritz working remotely between cafés and coworking spaces, who needs to find air-conditioned places to work and plan routes with shade between meetings.
Storyboard
An early storyboard traced how a resident notices the heat, opens Hitzfrei, finds a nearby cooling spot and gets there safely, grounding the later screen flows in a concrete, everyday moment rather than an abstract feature list.
User journey
The journey map traces a full hot-day session end to end: from receiving a heat warning, through checking the map and forecast, to choosing a shaded route and reporting back on a spot's condition, surfacing where friction and drop-off risk were highest.
Information architecture
The IA organizes the app around five persistent destinations reachable from a bottom tab bar: Map, Route, Forecast, Community and Profile, keeping cooling-spot discovery, route planning, weather awareness, crowd-sourced reporting and personal risk settings each one tap away.
Wireframes
Low-fidelity wireframes locked in layout and hierarchy before visual design: onboarding, the cooling-spot map, route comparison, the forecast dashboard and community reporting, so the heat-index colour system could be applied consistently once the structure was settled.
Reflection
Hitzfrei's strongest idea is treating urban heat as a design problem with a clear, local answer: real Graz districts, parks and fountains, grounded in the city's own climate data, aimed specifically at the people most at risk: older residents, those with heat-sensitive conditions and anyone caring for someone vulnerable. If continued, the next steps would be validating the shaded-route algorithm against real pedestrian data and expanding the community-reporting model to sustain itself past a single hot summer.
The interface pairs Poppins for display type and headings with Inter for body copy, on a cool blue-and-navy surface palette with teal as the primary action colour and amber reserved for identity accents. A dedicated heat-index scale (cool navy, teal mild, pale blue warm, amber hot, orange-red extreme) runs consistently through the map overlay, alerts, forecast charts and heat diary, so temperature risk reads the same way everywhere in the app.
Brand guideline
The full brand guideline documents Hitzfrei's identity end to end: logo and clear space, colour, typography, voice and tone and applied examples, anchored by three brand pillars: Local (built for Graz's real districts, parks, fountains and the Mur), Trustworthy (grounded in official city climate and weather data) and Caring (every feature starts from keeping vulnerable people safe). 18 pages. Scroll through below.
Hitzfrei brand guideline, 18-page identity reference.
Design system
The design system documents branded colour tokens (teal for primary action, navy for text and structure, amber for identity), Poppins/Inter typography, a 4px spacing scale, elevation levels and the five-step heat-index scale that ties the map, alerts, forecast and diary together visually.
Interface mockups
The interface applied in context, across the core flows: onboarding, map and navigation, route planning, forecast and community.
Onboarding
Map & navigation
Route planning
Forecast
Community
