I led a team of 8 to develop an interactive map and backend integrating real-time weather data, making Blue Sky LA’s climate projects visible, searchable, and engaging for the public.

Climate Cents header
Role
Project Lead
Timeline
2024 - 2025
Skills
Art DirectionUI/UX DesignFrontend DevelopmentDesign/Dev Handoff

BACKGROUND

Climate Cents is a non-profit driving ecosystem restoration, carbon sequestration, and community-led climate resilience through education and local action.

They created the initiative Blue Sky LA in partnership with Breathe Southern California to improve LA’s air quality ahead of the 2028 Olympics.
Climate Cents Overview

WHAT ARE WE SOLVING?

Problem

Blue Sky LA organizes volunteer climate projects—but without a clear way to visualize them, it was hard for the community to discover, understand, or get involved.

Code the Change x Climate Cents
How can a team of 8 student designers and developers create an engaging, interactive way for the LA community to stay informed and involved with Blue Sky LA’s projects?

Moodboard

Early explorations for visual language, tone, and interaction style. Our client was a big fan of the cleanliness of platforms like Apple Maps!

Low Fidelity Map

Mapping out how local projects could be visualized geographically.

Low Fidelity Card

Simple project cards showing core info like type, location, and completion status.

Mid Fidelity Map

Refined map interface with filters, clustering, and hover states.

Mid Fidelity Card

Project cards enriched with metadata and visual hierarchy. Thinking through ways to visualize multiple projects in the same location.

Hi Fi

Adding dark mode, backend admin interface, polished UI, refined modal approach.

BRAND IDENTITY

Brand Identity

A clean, intuitive visual system that prioritizes accessibility.

LIVE BUILD

From there, I led design to developer handoff directly to ensure both visual details weren't lost and new interactions were added — including motion in project clustering, an idea submission callout that links to an internal form, live heat map overlays, and a simpler map without buildings.

LEARNINGS

  • Thoughtful interactions elevate simple builds.
    Even small, well-considered interactions can keep users engaged and informed, reinforcing Blue Sky LA’s community-driven mission.
  • Think big and explore first, then scale down.
    Early ideation (even ambitious ideas that didn't make it into the final product like a fully 3D map) still shaped our approach and ultimately led to more engaging designs.
  • Ease of use in nonprofit work always takes priority.
    Our work showed that in nonprofit design, clarity must come first. Prioritizing accessibility and simplicity ensures the platform empowers rather than overwhelms.
  • Bridging design and development.
    I resolved gaps by organizing directly communication and feedback sessions between my developers and designers, and even worked within the code myself to polish UI more closely to our mockups.