Hear Our Stories
Creating an Interactive Climate Storytelling Experience
A coded website that transforms climate change into a more emotional, human-centered experience through exploration, visuals, and concise storytelling.
View Process2025
Semester Project
UX/UI Designer & Developer
HTML, CSS, JavaScript
The Problem
Climate change information can feel overwhelming, distant, and difficult to connect with emotionally.
The Solution
A storytelling website that makes climate information feel personal.
Hear Our Stories uses an interactive network to encourage users to explore climate stories through discovery. Instead of overwhelming users with long reports, the site lets them uncover field notes, images, and short narratives through a visual experience.
Emotional Connection
The final heart-shaped structure reinforces empathy and makes the topic feel more personal.
Exploration
Users interact with connected dots and glowing points to uncover different climate stories.
Simplicity
The interface avoids clutter by focusing on one story, image, or interaction at a time.
Process
From Simple Nodes to an Emotional Story System
The project evolved from a basic node experiment into a more expressive experience centered around memory, place, and environmental loss.
01
Initial Node Experiment
The earliest version tested whether a simple connected-node system could create a more engaging way to browse climate stories.
02
Landing Page Direction
I created a quiet introductory screen that established the mood of the experience before users entered the interactive story network.
03
Expanded Network Prototype
The next version expanded the network with glowing nodes, connected lines, and a darker visual language to make the interface feel atmospheric.
04
Hover Interaction Testing
I tested hover states that revealed story titles without overcrowding the screen, allowing users to discover information gradually.
Interface text summary
The hover state reveals a story label without covering the full interface, helping users discover climate stories while keeping the screen visually minimal.
05
Dark Interface Refinement
The interface was refined with a navigation bar, search field, instruction card, and a cleaner interactive network layout.
06
Heart-Shaped Story Structure
The network evolved into a heart-shaped structure to visually communicate empathy and emotional connection.
07
Story Detail Experience
Users can zoom into individual stories and view concise narratives paired with imagery, helping climate change feel more specific and grounded.
Story text summary
The Glacier National Park story explains that glaciers once helped define the park landscape, but historic photo comparisons show visible glacier retreat over time.
Featured Story
Glacier National Park — Vanishing Ice
Historic photo comparisons reveal glacier retreat and show how climate change is reshaping landscapes that once felt permanent.
Reflection
What I Learned
Hear Our Stories challenged me to combine interaction design, storytelling, and front-end development into one experience. I learned how non-traditional navigation can make complex information feel more engaging and memorable when it is designed with intention.
Video Demo
Watch the Experience
This screen recording shows the Hear Our Stories website in motion, including the interactive story network and the way users move through the climate storytelling experience.