Back to projects

Sustainability Monitoring Dashboard

2025

Next.jsTypeScriptLeafletTailwind CSSESGData VizCapstone

Capstone · ESG analytics dashboard

Overview

For my capstone, we built a map-based dashboard that visualizes ESG data—emissions, energy, water, and waste—for about 3,300 companies across Singapore, Malaysia, and Indonesia from 2021 to 2024. The goal was to make it easy for anyone to see how companies in the region are performing on sustainability, without digging through spreadsheets.

I cared a lot about making the data feel explorable rather than overwhelming. You can pan around the map, filter by sector or metric, and click into a company to see the full picture. We also kept the whole thing static (no backend), so the pipeline that turns raw CSV into something the app can use was a big part of the design—getting that right meant the dashboard could stay fast and simple to host.

It was a group project and I took the lead on UX and system design. Seeing the first version come together and actually being able to compare companies side by side felt like we’d turned a messy dataset into something people could really use.

Contributions

Key Features

  1. 1.
    Map-Based Visualization: Geographic view of ESG data for 3,300+ companies across SG, MY, ID
  2. 2.
    Data Pipeline: CSV-to-TypeScript transformation with plausibility banding and unit normalization
  3. 3.
    Multi-Panel Layout: Map, search, and company detail views with interactive filtering

Design Decisions & Reflections

01 / Information Density

The hardest call was how much to show at once. I kept wanting to surface every metric, filter, and company—but the dashboard only works if sustainability data stays readable and actionable. We were balancing three layers—the data view, the geographic map, and the company detail panel—and every extra element in one layer pulled focus from the others. Stakeholders each wanted their metric front and center; I had to treat attention as a finite resource.

02 / Simplifying Complexity

The underlying dataset was dense, so the experience had to feel simple. We added AI-powered natural language querying so people could ask questions in plain language instead of drilling through filters and dropdowns. A query like “companies in Malaysia with high water usage in 2023” should resolve in one step, not five clicks. The layout, filter hierarchy, and company detail panel were all shaped around reducing that click burden.

03 / What I'd Do Differently

We cycled through graphs, bar charts, tables, and hybrid layouts before the scrollable map-first model clicked. A lot of that time went into display patterns before we had clearly defined what users needed to do—not just see. Conversations with real users mid-project are what made map-based exploration the right fit; starting those in week one would have gotten us there faster and left more room for polish and edge cases.

Implementation