A website that cuts barriers to climate action

Client: Citizen Voice, TU Delft
Type: Academic research team
Role: UX Designer
Year: 2023/24

Cities aim to become climate-proof through various urban interventions, many of which require citizen support and participation. However, citizens don't understand climate risks and don't know how to take action against them. Digital climate action platforms have the potential to reach large numbers of citizens, but they are ineffective and underutilised. Citizens meet Climate reframes this gap by using personalised storytelling, relatable climate data, and interactive journeys to help citizens understand climate risks and see clear paths to action. My role focused on shaping the experience strategy from research through prototyping and evaluation.

What's missing in climate engagement

A comparative analysis of 13 climate platforms combined with in-depth desk research revealed recurring issues that limit citizen engagement.

Lack of clarity
Existing tools overwhelm with overly technical and unclear information that scares away users.

Lack of guidance
Existing tools don't guide users in taking action in the real world, so knowledge never becomes action.

Lack of engagement
Existing tools are not engaging, nor visually appealing, nor intuitive, so citizens quickly drop out when using them.

A comprehensive Miro board display featuring ten distinct panels of UX research and design. Each panel includes screenshots and extensive clusters of digital sticky notes in various colors.

The challenge

Design a digital platform that motivates and empowers citizens to take climate action in real life.

From assumptions to design principles

Insights from iterative user testing of different prototypes focused on data visualization strategies, tone of voice, and intuitivity of the user flow, were synthesised into a set of design principles that guided the final design.

Make climate data clear, relatable, and beautiful
Short, structured narratives with curated graphic design widely outperform dense informational blocks. Additionally, personally relatable stories increase understanding and engagement.  

Balance positive and negative communication
Fear-driven messaging communicates urgency but can lead to disengagement if it isn't balanced with positive solution-oriented framing.

Support both individual and collective action
Users feel more motivated when both personal actions and opportunities to join action groups and communities are presented.

Value users' knowledge
When users are actively invited to share ideas and their contribution is valued, they are more likely to stay engaged in the platform.

Four user test participants sit at a long wooden table, focusing on large heat maps and aerial site plans laid out before them, using colorful sticky notes and pens to mark specific locations.

Participants testing the first paper prototype

3 screens of a digital interface prototype showcasing: climate-positive home projects like shading and green walls, a heat map, and a comparison of Grote Markt in the years 2050 and 2085.

Screens from the first digital prototype

Concept: Citizens meet Climate

A laptop screen displaying a web interface titled "Which of these cities are you most familiar with?", featuring three selectable image cards for Amsterdam, Rotterdam, and Delft.
Personalization and storytelling Users navigate through the platform following the story of a persona they relate to, in a city they know well. The content across the platform is customized to their input to help them connect emotionally to abstract climate risk.
Clear and local climate data
Through the everyday experiences of the persona, users discover and understand climate data and local climate risks, which are communicated through simple and familiar visual elements.
A laptop screen displaying a web interface titled "What affects the temperature of our cities?", featuring a split-screen interactive slider comparing a satellite aerial view of a city with a corresponding heat map showing high-temperature "urban heat island" zones in red.
A laptop screen displaying a web interface titled "Suggest a new place for Alex!", featuring an interactive aerial map of a city with several red location pins. A pop-up for "Oostport" shows a canal photo and a user comment recommending a boat trip.
Sharing opinions and contacts with the community
Users are invited to share their opinions about the city, climate change, and climate adaptation. They can also see the opinions of fellow citizens, creating a sense of community.
Using AI to visualize the future
Users explore both dramatic and optimistic future (AI-generated) scenarios of the city. This helps them to visualize the negative impact of climate change and the positive impact of climate action.
A web interface prototype on a laptop screen titled "GROTE MARKT IN 2085," featuring a mockup of a transformed city square in Delft with lush green trees and shaded areas. Beside the image, a text box describes a future scenario where a climate action group has successfully preserved the square's historical vibe while adding nature to help citizens like "Alex" avoid the sun.
A web interface prototype on a laptop screen titled "Build or DIY something with a positive climate impact," featuring three actionable cards for "Help the Birds," "Green Your Walls," and "Shade Your Home." Each card includes a price range, effort level, impact level, and social value rating.
Call and support to action
Users are informed and connected to a range of local individual and collective initiatives tailored to their profile. This gives them the necessary tools and knowledge to take climate action in real life.

Final evaluation

User testing showed that grounding climate data in local places and future scenarios made climate change feel more relatable and emotionally impactful than abstract information. Participants appreciated the clear overview of local initiatives, which helped lower the barrier to engaging with climate action and reduced the feeling of acting alone. Overall, the experience was perceived as informative and motivating, especially through visual storytelling and maps.

However, testing also revealed a key tension: while users felt encouraged to reflect and explore options, they wanted clearer pathways to meaningful action and feedback, as well as stronger community interaction to sustain long-term engagement.

A bar chart titled "When I use the prototype I feel motivated in taking climate action," showing survey results on a scale of 1 to 7. The data shows that 40.9% of users selected a 6, indicating a high level of agreement, supported by quotes stating that heat visualizations motivate prevention and that seeing existing initiatives is encouraging.

Insights from the final project evaluation's feedback form

A bar chart titled "The prototype increases my awareness of climate risks," displaying survey results on a scale of 1 to 7. The data shows that 50% of respondents selected a 6, and 27.3% selected a 7, indicating strong agreement. It is accompanied by user quotes stating that specific town data makes the experience "memorable because it feels personal" and that scenario images make impacts clearer and "more relatable than just numbers".

Insights from the final project evaluation's feedback form

What I'd iterate next

Design the before and after
Explore how people encounter the platform in the first place, and which triggers motivate them to engage before actively seeking climate information.

Make the community more tangible
Increase the visibility of other participants and ongoing initiatives to reinforce a collective feeling during and after the experience.

Design for return visits
Test cues that support repeat engagement, such as evolving or seasonal local data and progress indicators.

Media and events

A candid photo of a collaborative workshop taking place in a bright, modern office space. Several researchers are seated at white tables using laptops, while others stand in the backgroundA group photo of five young women standing in front of a large "AMS Scientific Conference" banner.An exhibition display featuring a large television screen and two tall roll-up banners in a modern, sunlit room. A green banner, titled "BIO-CiVo: Citizen Voices in Biodiversity," and a blue banner titled "CITIZENS meet CLIMATE". They both illustrates a user journey through web app mockups.
A person testing a digital prototype on a laptop at a outdoor fair stand featuring multiple blue posters titled "Citizens meet Climate"The headline 4TU.Federation article about the project featuring a screenshot from the prototype and the title "Citizens meet Climate: Empowering Citizens in Climate Action"

The project was presented at the AMS Institute Scientific Conference, the Climate Action Festival at TU Delft, and the Out-Mathenesse Lentefeest in Rotterdam. It was also selected by 4TU.Federation as part of its 2024 portfolio of design projects exploring design for change.

Read the 4TU.Federation article