Civic tech · Product design · 0–1

Urban Heat Portal

Extreme heat doesn't hit every New York City neighborhood the same way. I designed a unified home for the city's scattered heat data, so advocacy groups and local government could turn it into arguments for heat-resilient policy.

Launched Apr 2025 · live at urbanheat.nyc ↗
Company
BetaNYC
Partner with Dr. Mehdi P. Heris, Hunter College; funded by NASA's Applied Sciences program
Role
UX/UI Designer
Sole designer - research synthesis, user flow, information architecture, interaction, UI, prototyping
Timeline
Apr 2024 - Jan 2025
Users
Advocacy groups
Including WE ACT for Environmental Justice, NRDC, and the NYC Environmental Justice Alliance; plus the NYC Mayor's Office of Climate & Environmental Justice
Team
Product manager
Data scientists
Engineers
Tool
Figma
Laptop displaying the Urban Heat Portal, with the Heat Vulnerability Index map and Outdoor Heat Exposure Index for Bedford-Stuyvesant, Brooklyn
The problem

Heat data existed. It was hard to find, process, and understand.

Extreme heat is one of the most under-addressed climate risks in the city. The data to act on it already existed, it just lived in disconnected spreadsheets, agency PDFs, and research portals that weren't built for the people who needed them most.

Synthesizing the research team's interviews with 8 advocacy groups, mostly data-curious advocates rather than data experts, I found three recurring barriers.

01

Urban heat data is scattered across sources.

02

Turning raw data into something usable takes skills most advocates don't have.

03

Even processed data doesn't say what it means for a specific neighborhood.

Objective

Help advocates understand what urban heat data means for their neighborhood, without needing a data scientist.

Supporting heat-resilience advocacy and research-driven policy in New York City.

Process

Discover, define, design, deliver

I designed alongside a data model that was still being built. Many design changes followed shifts in the data structure, and the designs gave the team a shared picture of the final product to keep the conversation on usability going.

Discover Research team conducted interviews with 8 advocacy groups
Define Synthesized research notes; mapped the data structure with the data team
Ideate & design User flow, control panel, neighborhood profile, map interactions
Refine Iterated as the data evolved
Deliver Handed off for launch, Jan 2025
User flow

The map is the homepage. Everything branches from it.

Hover a neighborhood for a tooltip, click for its full profile, then download the report. Click to enlarge

Design question 01

How to make it easy for users to navigate nine overlapping data layers

Data once scattered across sources now lives as layers on one map, so the control panel had to work as the product's main navigation.

My first version was a flat list, fast to scan. Grouping layers into categories made related data easier to find, but names like "Mean Radiant Temperature" still meant nothing to a non-expert. So I added a plain-language description to each layer, shown only when it's active, to keep the list short.

Then the data team reorganized the layers into static and dynamic factors to match their model, and I restructured the panel around it. I set it in dark so it reads as a separate surface from the bright heat map underneath.

Early control panel: a flat, uncategorized list of nine map layers
01No categories Starting point: a flat list. Fast to scan, but every layer looked equally important.
Control panel with layers grouped under Temperature, Heat Mitigation, and Heat Vulnerability
02Categories Grouped by type after team feedback. The terms were still unexplained.
Control panel with Surface Temperature expanded to show a plain-language description
03Descriptions Plain-language definitions, shown only on the active layer.
Final dark control panel with layers grouped into static and dynamic Outdoor Heat Exposure factors and a download button
04Final The data team regrouped layers into static and dynamic factors, so I restructured the panel to match and set it dark against the map.
Live control panel on urbanheat.nyc with Surface Temperature active, showing its description and an aggregated/raw data toggle
05Live As launched, with refinements by the team after handoff.
How the data arrives
Close-up of raw numeric values in a spreadsheet
Unprocessed data Complete and precise, but meaningless until someone processes it.
Surface temperature map of Long Island City and Greenpoint, with buildings in white and heat shown in orange
Visualized data Shows where it's hot, but not what it means for the people living there.
Choropleth map of Brooklyn and Queens neighborhoods shaded by aggregated heat values
Aggregated data Easiest to read, but only once someone has done the processing.
Design question 02

How to serve both advocates who need an answer and researchers who need the data

Advocates range from data-curious to data-skilled, the same spread as these three formats. Rather than design for one audience, the portal lets each user start where they are:

  • Aggregated by neighborhood (default): the answer to "how is my area doing?"
  • Raw data on the map: a toggle inside the active layer, so going deeper never takes users away from what they're looking at.
  • Download dataset(s): fixed at the bottom of the panel, making the portal a source for their own analysis, not just a viewer.
LiveRaw → Aggregated by neighborhood Every tree canopy across the city at full resolution, then the same data summarized per neighborhood, so an area can be read at a glance.
Toggle explorations
Toggle exploration: separate on/off switches for NTA Aggregated and Raw
01Two switches Reads as two independent settings, though only one view can be on.
Toggle exploration: a two-option segmented control for NTA Aggregated and Raw Data
02Segmented control A clear either/or, but visually heavy for a secondary setting.
Live design: a single switch between NTA Aggregated and Raw Data labels
03Live One switch between two labels: compact, and the active view is always named.
Design question 03

How to help users understand what the data means for their neighborhood

Even with heat readings in hand, advocates can't see what they mean for a specific neighborhood. That takes what the research team did: weigh five outdoor environmental factors against each other and turn them into one measure of risk. That measure is the Outdoor Heat Exposure Index, a score for how exposed each neighborhood is to heat on summer days. It gives advocates a number they can act on: to see where their neighborhood stands, raise awareness, and make the case for policy.

My job was to make that index readable for non-experts. I started before it was finalized, and early versions buried the score among raw temperature charts, with nothing to say whether a district was doing well or badly. Over five rounds I cut the raw data, broke the score into its five factors on one 1–5 scale, and added a comparison against every district in its borough.

Profile explorations
Low-fidelity profile: index score in the header, date range, temperature charts, and mitigation bars
01Low-fi A data dump: the index is a bare number, followed by raw charts with no interpretation.
Dark profile with index score on a five-step scale, three temperature charts, and mitigation bars with design notes
02Scale The score gets a low-to-high scale. Temperature charts still dominate, and the open question is how a district compares.
Two-column profile: index score with five factor ratings, and ranked bar charts for tree coverage and cool roofs
03Factors Raw temperature cut. The score breaks into five factors, and mitigation is ranked against the citywide average.
Profile with index card at top and a full-width tabbed chart ranking tree canopy by district
04Hierarchy Score and explanation up top, then one tabbed comparison chart.
Final Bedford Stuyvesant profile: Outdoor Heat Exposure Index 4.0 with five factor scores and a borough-sorted cool roofs chart
05Final Index finalized as the Outdoor Heat Exposure Index, with named factors and every district compared by borough.
LiveSelecting a neighborhood opens its profile Click a neighborhood: the index leads, then its five factors, then how it compares across its borough.
Outcome

Shipped, and still live

The portal launched publicly in April 2025, built on this design, and is still live at urbanheat.nyc ↗.

Community organizations and local governments now have one free, public source for neighborhood heat data, with the analysis already done, to build the case for heat-resilient policy.

I handed off before launch, so measurement wasn't set up. Next time I'd agree on signals with the team up front: dataset downloads, return visits from advocacy partners, and citations in testimony, reports, or grant applications.

Reflection

What I'd carry into the next project

Civic tech deserves good design

Civic tools are built for people who rarely get a say in them. Without earning revenue, there's little pressure to invest in how they're designed. But this is where it matters most: these tools help New Yorkers navigate systems that shape their daily lives.

Design with the data, not around it

Working alongside researchers and data scientists, I learned how raw, visualized, and aggregated data each behave on a map. That fluency let me keep pace with the data team as the model evolved.