Climate Action & Advocacy
2025
Web Design, UI, Low-Code Development
Climate Action & Advocacy
2025
Web Design, UI, Low-Code Development
Climate Action & Advocacy
2025
Web Design, UI, Low-Code Development
Objective
The Climate Action & Advocacy webpage is a redesign that combines two previously separate pages: one focused on technical and scientific solutions (Climate Action), and another on outreach and systems-level change (Legislation & Advocacy). The challenge was to bring these areas together while maintaining narrative clarity, visual harmony, and actionable depth for diverse user groups — from volunteers and policymakers to students and researchers.
The core goal of this project was to transform two independent program pages—Climate Action and Legislation & Advocacy — into a centralized, scrollable hub that clearly reflects the breadth of Seaside Sustainability’s climate-focused efforts. This page was designed to serve not just as a landing page, but as a navigational gateway to multiple sub-programs, tools, and resources under the broader Climate Action & Advocacy umbrella.
Problem
While working from a rough content and layout guide, I encountered key challenges that shaped the final design:
-
Merging two long-form content pages without overwhelming the user
-
Balancing educational content with navigational purpose
-
Ensuring that visual buttons clearly function as links to subpages
-
Maintaining a fully responsive layout for text-heavy and image-rich sections
-
Structuring clear CTAs and external resource links that don’t disrupt page flow
Goals
-
Establish this page as the main hub for Seaside’s climate and advocacy initiatives.
-
Visually group and link out to related subpages and resources (e.g., Nature-Based Solutions, Zero Waste, Climate Mitigation).
-
Create a modular, scannable layout to help users explore content at their own pace.
-
Integrate image-based buttons to make navigation more intuitive and visually engaging.
-
Ensure the layout supports future scalability as more tools, reports, and campaigns are added.
-
Align the visual design and messaging with Seaside’s overall brand identity and mission.
Original Pages
Solution
Interactive Navigation with Visual Buttons
-
Designed image-based buttons that link to subpages and downloadable resources.
-
Made each button both visually distinctive and contextually relevant, allowing users to guide their own exploration.
Interactive Environmental Health Map
Integrated an interactive map highlighting global environmental health impacts.
-
Each region offers downloadable infographics on climate-related diseases and environmental health threats.
-
Designed to educate through visual storytelling while encouraging resource sharing.
-
Optimized for desktop and mobile usability, ensuring tap-friendly hotspots and quick load times.
Hero and Branding
Introduced a strong hero section featuring the theme Mitigation, Adaptation, and Resilience to instantly communicate Seaside’s mission.
Impact Summary
Category | Before (Climate & Advocacy pages) | After (Unified Climate Action & Advocacy) |
|---|---|---|
Functionality | Separate pages with overlapping content | Unified hub linking to key subpages and resources |
Navigation | Links buried in text | Clear image-based buttons for intuitive exploration |
Layout | Text-heavy, unstructured format | Modular, skimmable layout with section headers and visual breaks |
Category | Before (Climate & Advocacy pages) | After (Unified Climate Action & Advocacy) |
|---|---|---|
Functionality | Separate pages with overlapping content | Unified hub linking to key subpages and resources |
Outcome
-
Transformed two fragmented narrative streams into a cohesive, navigable hub.
-
Introduced image-based, clickable navigation to support user-driven exploration.
-
Elevated the visibility of Seaside’s climate tools, newsletter, and advocacy programs.
-
Created a layout that supports consistent branding, readable content, and user flow.
-
Designed for scalability — easy to grow with future projects and resources.
Redesigned Page
