Making Coastal Planning Guidance Usable Across Local Governments
Coastal Plan Alignment Compass- Governors Office of Planning and Research
- Geospatial Innovation Facility, UC Berkeley
Context & Problem
California’s coastal communities face complex, interrelated planning challenges, from sea-level rise to land-use coordination, that require alignment across multiple local and regional plans. While high-quality guidance existed in the form of a thoughtfully designed print guide, the format itself limited its usefulness. Long-form text, static graphics, and linear structure made it difficult for planners to reference the material during active planning workflows or adapt it to different local contexts.
The core problem was not content quality, but format and accessibility: how to translate a visually rich, print-oriented planning guide into a flexible, usable web product without losing clarity or intent.
What the Product Is
The Coastal Plan Alignment Compass is a responsive, web-based planning guide that helps coastal communities coordinate and align local plans around coastal resilience challenges. It transforms a static print document into an interactive, modular experience that supports non-linear exploration and practical use during planning processes.
As part of the Adaptation Clearinghouse, the Compass functions as a focused, task-oriented resource within a broader ecosystem of adaptation tools and guidance. Original print design was created by Frank Ruopoli, Designer/Illustrator at NOAA Office for Coastal Management.
My Role
Working with the Governor’s Office of Planning and Research and the Geospatial Innovation Facility, I:
-
Led the translation of a print-first design into a responsive web experience, defining how content, graphics, and layout should adapt across screen sizes and usage contexts.
-
Re-structured long-form planning content into smaller, scannable sections to support quick reference and real-world planning workflows.
-
Designed web-specific layouts and interaction patterns in Figma that preserved the intent of the original visual design while reducing cognitive load.
-
Partnered with stakeholders through iterative discussions to align usability improvements with institutional expectations and planning norms.
-
Built flexible web templates that allowed complex planning guidance to be maintained, updated, and reused within the Adaptation Clearinghouse.
Impact & Outcomes
Improved Usability Made coastal planning guidance easier to navigate, reference, and apply during active planning processes.
Broader Reach Expanded access to specialized planning content by moving it from a print-only artifact to a widely available, responsive web resource.
Integrated Adoption Became one of the most visited sections of the Adaptation Clearinghouse, reinforcing its role as a practical planning tool.
Product Insight Demonstrated how format, structure, and interaction design can determine whether policy guidance is actually used not just published.
Product Showcase
