Experiencing Climate Data: UX Design Makes ESA's Satellite Data Tangible
How the redesign of the ESA platform “Climate from Space” makes highly complex Earth observation data accessible through interactive storytelling.
Satellite data from climate research is highly complex and difficult for laypeople to interpret. For the European Space Agency (ESA), Ubilabs translates these data streams into a tangible digital experience. The redesign of the web application "Climate from Space" demonstrates how user-centric UX design, high-performance 3D navigation, and interactive scrollytelling make abstract science understandable for the general public.
From Data Set to Story: The Redesign of the “Climate from Space” Platform
“Climate from Space” is an interactive web platform developed for ESA that visualizes climate variables derived from decades of satellite observations. As technological capabilities had advanced significantly since the platform’s initial launch, a comprehensive redesign was initiated. The primary goal was to optimize the application for modern mobile usage while communicating scientific insights through digital storytelling. To turn this vision into reality, we dived into reimagining the appropriate formats, features, and technological possibilities from the ground up.
By applying a rigorous mobile-first approach, long texts were broken down into concise, visually supported sections. So-called 'Image Stories' utilize interactive sliders that make severe environmental changes, such as deforestation, immediately visible in a before-and-after comparison through simple scrolling.
Since a conventional content management system (CMS) was not available for this project, we developed a lightweight backend solution. A custom tool automatically converts editorial Excel data into JSON files, allowing new stories to be seamlessly integrated directly into the codebase.
Intuitive Ways Around the World: Globe-Based Navigation
At the heart of the application is our custom interactive 3D globe, around which the main navigation is structured.
Visualizing historical data posed the primary technical challenge, as massive datasets like these often impair performance. In our solution, a smart caching algorithm loads data efficiently in small tiles, while crossfades ensure smooth, cinematic transitions between decades. The implementation is so efficient that multiple globes can be rendered synchronously to compare different climate datasets side by side.
Behind the Scenes: The “Earth Energy Imbalance” Story
The Earth Energy Imbalance (EEI) story, developed in collaboration with the German Weather Service (DWD) and the MOTECUSOMA project, showcases just how seamlessly design and web technology can work together. The core topic of the story is Earth's energy imbalance: the fact that our planet continuously absorbs more energy than it releases back into space.
To make the abstract figure of roughly 1.4 watts per square meter tangible, the story translates the data into a relatable, everyday concept. Driven by scrollytelling, a smooth camera zoom glides toward the Earth’s surface while a real-time counter calculates how many kettles of water this excess energy would theoretically have brought to a boil since you opened the page.
Under the hood, the seamless scrolling experience is built on the Motion animation library. To streamline alignment with ESA, we leveraged agile prototyping: a functional code prototype created in AI Studio clarified the mechanics well before the final design phase. Furthermore, complex scientific GeoTIFF data was converted into high-performance PNGs and overlaid onto the globe as precise 4K data layers.
Detailed Precision: The High-Resolution Land Cover Layer
Conventional global overview maps often only offer a resolution of 100 meters, missing small-scale changes. The High Resolution Land Cover project showcases the technological strength of the framework. It visualizes Earth observation data down to a 10-meter level of detail.
This brings local deforestation, urban expansion, and agricultural shifts into crisp focus. Currently focused on three key regions (Amazonia, Africa, and Siberia), this high-resolution layer delivers the precise data baseline for scientific climate adaptation studies and international climate reports.
Continuous Evolution
Our shared journey with ESA continues to evolve. The next major milestone involves modernizing the graphs and charts within the stories, replacing previously static 2D graphs with interactive visualizations that blend seamlessly into each storyline. This will enable time-series data to be evaluated with even greater flexibility, providing deeper insights into historical developments. The project already demonstrates how modern UX design and innovative data visualization can translate complex scientific patterns into clear, engaging stories.
Discover Climate from Space
