PRODUCT DESIGN
0 → 1
WEB APP
GREEN TECH
Mapping NY's clean energy projects.
CONTEXT
ACE NY is an Albany-based NPO advocating for clean, renewable electricity technologies and energy efficiency in New York, focusing on energy diversity, economic development, public health and air pollution mitigation.
My team at Blueprint was challenged to build map-based data visualization tool that catalogues and tracks every renewable energy project in NY, creating a powerful tool for policy analysis, advocacy and public awareness.
CONTRIBUTIONS
Wireframing
Design systems
Prototyping
Interaction design
Usability testing
Developer handoff
TIME
Aug — Dec 2024
ROLE
Product Designer
TEAM
THE PROBLEM
NY's clean energy transition lacks observability. Digital solutions have been attempted —
THE PROBLEM
but they are technocratic and not user-friendly. A public-facing map requires —
CLARITY
Users need to survey large datasets at once without being overwhelmed.
SPECIFICITY
Users need to quickly identify and examine individual projects of interest.
SIMPLICITY
Users need to explore and navigate the map without feeling disoriented.
Safari
File
Edit
View
History
Window
Help
aceny.org
FEATURE PRIORITY
FOR PUBLIC MAP
MVP FEATURES
SEARCH
FILTER
MAP W/ MARKERS
INFO MODAL
STRETCH GOALS
DATA VISUALS
MAP OVERLAYS
cut FEATURES
USER LOCATION
SAVED MARKERS
THE PROCESS
Handling 4 visible, interactive components meant wrangling product logic beforehand.
THE PROCESS
Balancing technical constraints with user experience meant iterating key trade-offs —
#1 DECISION cutting back on clutter with marker clustering
VERSION 1.0
Doesn't follow design system
Users confused during usability testing
VERSION 2.0
Mimics overall marker designs
Visually distinct enough from other markers
#2 DECISION making info segments modular and code-scalable
BEFORE
Not all projects have same widgets
Lack of distinction between segments
AFTER
Easy to add or remove segments as needed
Dev-friendly to turn into React components
#3 DECISION removing progressive modals for streamlined usability
BEFORE
Takes up way too much visual real estate
Responsiveness issues for small screens
AFTER
Most efficient use of space
Allows for streamlined user flow
THE SOLUTION
Fully customized markers with a cohesive color & iconography system,
4974E0
OFFSHORE WIND
0072BB
HYDROELECTRIC
4896BC
PUMPED STORAGE
3CA0BE
ENERGY STORAGE
6DA2B8
LAND-BASED WIND
FFBE54
SOLAR PHOTOVOLTAIC
4D8B31
GEOTHERMAL
4974E0
CLUSTER MARKER
THE SOLUTION
Stackable filters for narrowing down projects with precision,
THE SOLUTION
Search bar, search results & project info, all in one dynamic modal,
THE SOLUTION
— for a cohesive experience that feels clean, natural and informative to use.
