1
OnboardingIntro Modal

Welcome: Setting the Stage

When a user first arrives, they are greeted by a full-screen intro modal overlaid on the dark globe. The card states the mission clearly — climate activism through food waste data — and prompts them to begin exploring. Clicking "Explore the Globe" dismisses the modal with a fade transition, revealing the animated 3D globe beneath.

🌿

Every bite wasted costs the planet.

Navigate around our globe to learn about how sustainable each country is when it comes to reducing the environmental impact of their food waste.

Explore the Globe →
2
GlobeHeatmap Mode

Spin the Globe, Read the Colors

The globe auto-rotates slowly. Countries are color-coded from green (low waste / strong policy) to red (high waste / weak policy) based on the active metric tab at the top. A legend in the bottom-left explains the scale. The user can drag to rotate, scroll to zoom, and switch between Heatmap and Elevation modes — the latter raises countries as 3D bars proportional to their score.

Drag to rotate  ·  Scroll to zoom

Switch metrics using the tabs at the top to change the color encoding. Toggle Elevation mode to see waste as 3D height bars.
3
Click InteractionSidebar

Pick a Country — Unlock Its Profile

Clicking any lit country on the globe opens a slide-in sidebar panel on the right. It shows the country's flag, income group, and region, followed by a highlighted card displaying the currently selected metric value and the country's ranking among all 28 nations. Below that, a full stats grid covers waste by sector, a policy score progress bar, and the strength of each of the six policy dimensions (liability protection, tax incentives, date labeling, food safety donation, waste deterrence, government grants).

📌 Sidebar opens on country click
121 kg
Total Waste / cap
73 kg
Household
39 kg
Foodservice
11/18
Policy Score
4
ComparisonTwo Countries

Compare Two Countries Side-by-Side

After viewing one country's profile, the sidebar prompts: "Now let's compare this country with another — pick a second country on the globe." Clicking a second country splits the sidebar into two columns, showing both profiles simultaneously with a Comparison Assessment section below, synthesizing key differences in waste behavior and policy strength. Users can keep picking new comparison countries freely, or click "Back to Map" to reset.

🇺🇸 United States

Total Waste121 kg
Policy Score11/18
GDP/cap$70,205

🇫🇷 France

Total Waste120 kg
Policy Score18/18
GDP/cap$43,725
Comparison: France and the US have nearly identical total waste per capita, yet France achieves a perfect policy score — the only country in the dataset to do so. Despite a lower GDP, France's stronger legal framework (including mandatory food waste reporting and tax incentives) may explain its more structured approach to reduction.
5
Data TableExploration

Dive Deeper with the Data Table

Users who want to explore all countries at once navigate to the Data Table page. This sortable, filterable table shows every row of the master overview dataset — all 28 countries across 2019 and 2021. Users can sort by any column (click headers), filter by year, region, or income group, and search by country name. Waste values are color-coded red/yellow/green for instant visual scanning, and inline mini-bars represent relative magnitudes.

🔍 Search country…
2021
All Regions
Country · Year · Total Waste ↑ · Policy Score · Region
🇫🇷 France 2021120 kg18/18
🇿🇦 South Africa 202154 kg8/18
🇳🇬 Nigeria 2021201 kg6/18

Original Storyboard Frames

The wireframe walkthrough used during planning, showing the full sequence from intro to country comparison.

Storyboard frames 1–4
Frames 1–4: Intro modal → globe appears → pick a country
Storyboard frames 5–8
Frames 5–8: Click country → stats appear → compare prompt → two-country view
Storyboard frames 9–14
Frames 9–14: Full comparison layout → back to map → continue exploring

Ready to explore?

Spin the globe and discover how your country stacks up on food waste and climate policy.

Launch the Globe →