Blue Carbon
Interaction Design 2 —— ArtCenter College Of Design
Timeline
Jan. 2024 - Apr. 2024
Tool
Figma
Contribution Type
Independent
Project Overview
Blue Carbon is an interactive digital publication that translates scientific research on Zhanjiang’s mangrove and salt-marsh ecosystems into accessible, story-driven visual media. It connects ecological data with urban realities to reveal how coastal wetlands quietly mitigate climate risk.
Problem
Blue-carbon ecosystems store extraordinary amounts of carbon, yet public awareness remains low. Existing information is fragmented, highly technical, and fails to communicate the urgency or the local relevance of wetland conservation.
Solution
The project turns scientific data into interactive maps, layered visuals, and short stories so people can grasp blue-carbon impact at a glance.
Target Audience
Urban learners, students, and young professionals who care about climate action and prefer clear, visual explanations over long reports.
Key Features
Interactive Map Exploration
A visual, zoom-in exploration of China’s blue-carbon regions.
Users can hover, click, and open image cards to see what mangroves actually look like in different coastal areas — turning scientific data into a spatial, intuitive experience.
The map becomes the entry point that anchors all the content.
Immersive Root-System Gallery
Instead of a traditional photo grid, the gallery grows out of a mangrove-root background.
Images scatter organically across the page, inviting users to explore freely as if discovering the ecosystem themselves.
This visual language reinforces how interconnected and alive blue-carbon systems are.
Before-and-After Impact Viewer
Users can drag a central slider to compare degraded vs. restored coastlines.
This interactive view makes restoration impact instantly understandable — no long text, just strong visual storytelling.
It turns climate data into a clear, emotional “see the difference” moment.
Design Process
Research
I started by clarifying what blue carbon is and why these coastal ecosystems matter. Then I defined my audience—city adults 25–45 who care about climate issues but need more visual, emotionally engaging ways to understand impact.
Concept Exploration
In this stage, I explored how blue-carbon conservation could be communicated through strong visual storytelling. I sketched different ways to make the topic intuitive—using maps, before-and-after comparisons, and minimal text—to help users grasp the importance of coastal ecosystems at a glance.
Design Directions
From these explorations, I defined four key attributes for the visual language: Immersive, Emotional, Intuitive, and Explorative.
These principles guided how the experience should feel—inviting users to navigate freely, connect emotionally, and learn through visual impact rather than dense explanations.
Visual References
I collected references to shape the tone of the experience, focusing on satellite imagery, restoration photography, and earth-tone palettes. These studies grounded the project in real ecological contexts and helped establish a map-driven layout.
Content Insights
I also conducted an early audit of existing blue-carbon publications, identifying what scientific information could be translated into interactive formats. This guided the structure of the visual narrative and ensured accuracy while keeping the content accessible.
Iteration
These layouts show my first pass at the full experience—from mid-fidelity flows to an early high-fidelity visual style. After testing this darker, photo-heavy direction, I realized it felt too heavy for the topic, so later iterations moved toward a lighter, root-based visual system.
Content Mapping
Before building the final screens, I established a design language that translates the identity of blue-carbon ecosystems into visual form—root-shaped typography, calm coastal gradients, and map-driven iconography. This system kept the interface consistent and visually expressive.
Final Screens
I also conducted an early audit of existing blue-carbon publications, identifying what scientific information could be translated into interactive formats. This guided the structure of the visual narrative and ensured accuracy while keeping the content accessible.
Final Prototype
I also conducted an early audit of existing blue-carbon publications, identifying what scientific information could be translated into interactive formats. This guided the structure of the visual narrative and ensured accuracy while keeping the content accessible.