Project Overview:
This project transformed the "What is a Watershed?" page on Chesapeakebay.net from a static, outdated layout into an engaging, interactive experience grounded in user needs. I led the redesign to address usability gaps, eliminate dead space, and deliver a more focused narrative — including the development of a custom interactive map, integration of key geology content, and a restructured single-column layout. The result is a modern, modular page that invites exploration, supports learning, and sets a new standard for how complex environmental information is presented online.
Pain Points:
- Unmet User Expectations: Visitors anticipated an interactive map showing how rivers connect to the Bay but found only a static infographic and dense, undifferentiated text. This was clearly expressed by one user during usability testing:
"If there was a waterways map where you could click on the Bay and then you could see all of those 150 major rivers and streams. Cause right now, all you're just seeing is kind of like a satellite view of the Bay. But, it doesn't let you really see how many water contribute to the Bay."
- Inefficient Layout: The two-column layout included an empty sidebar, creating unnecessary visual clutter and confusing users.
- Lack of Interactivity and Visual Engagement: The static content lacked interactive elements, content variety, and visual clarity, making it harder for users to engage and retain information.
- Fragmented and Poor Content: The static content lacked interactive elements, content variety, and visual clarity, making it harder for users to engage and retain information. Also, key geological context was separated on a different page, forcing users to leave the watershed page for related information.
Scroll to explore the full layout.
The Solution:
To address the usability and engagement issues, I redesigned the static, content-thin page into an interactive, visually driven learning experience. At the core of my redesign is a custom-built interactive map featuring the nine largest tributaries flowing into the Chesapeake Bay. I developed the map with three selectable layers—light, dark, and topographic—along with the ability to toggle river visibility on and off. I also implemented tooltips that appear when hovering over rivers or watershed boundaries, providing instant identification without interrupting exploration.
I replaced the two-column layout with a clean, centered single-column design to improve readability, and introduced modular content blocks to reduce long scrolling and make navigation easier. I integrated key geological content, previously siloed on another page, directly into the watershed narrative to provide richer context and a more cohesive learning experience. These updates emphasize clarity, interactivity, and responsiveness, directly meeting user expectations and significantly enhancing the page’s educational value.
My Role:
- GIS Developer: Led the design and development of the interactive tributary map using GeoJSON, Leaflet.js, and HTML/CSS/JavaScript.
- Content Strategist: Directed the overall structure, layout, and content strategy to ensure a cohesive and user-friendly experience.
- Product Design: Created high-fidelity prototypes to visualize layout, interactive components, and content flow before development.
- UX Research: Participated in usability testing sessions, documented insights, and applied feedback to refine both map functionality and overall page design.
Who I Worked With:
This project was a collaboration between myself and members of the Chesapeake Bay Program Web Team, including our UX researcher, content specialist, and developer. Throughout the process, collaboration was central, with each team member’s expertise shaping the final product.
User Research & Data Collection:
The project began with a usability test of the homepage and key subpages it linked to, which included the watershed page. I supported this process by taking notes during testing sessions and helped translate user insights into actionable changes.
The feedback highlighted a consistent theme that users wanted to visually explore what makes up the Chesapeake Bay Watershed. In parallel, I conducted technical research to learn how to build the interactive map — using ChatGPT to quickly learn geospatial tools, data formats, and rendering techniques. I also audited and reorganized content originally found on a separate “Geology” page to ensure it was better placed within the new watershed context.
Map Development:
- Tool research: Researched geospatial tools and mapping methods using ChatGPT to build foundational knowledge.
- Mapping framework: Selected Leaflet.js for its simplicity, flexibility, and performance on interactive map projects.
- Data structure: Used GeoJSON to organize and render data for the 9 largest tributaries.
- Interactivity: Developed clickable map layers that allow users to select a river and view relevant information.
- Component approach: Built the map as a lightweight, reusable component for clean integration into the page.
Prototyping:
A high-fidelity prototype was created in Figma to visualize the new layout, interactive components, and overall content flow before development began. This allowed for rapid iteration and internal feedback on layout, copy, and user interaction prior to coding.
User Testing (Planned Post-Launch):
- Method: We will conduct unmoderated user tests with both internal staff and external users to gather a range of feedback.
- Focus Areas: We will observe how users interact with the map and whether they recognize its interactivity.
- Behavior Analysis: Attention will be paid to which rivers users engage with, hover/click behavior, and map-triggered exploration.
Final Outcome:
The final design incorporated the following improvements:
- Interactive Experience: A unique map-based interface that allows users to visually explore the nine largest tributaries flowing into the Chesapeake Bay, with selectable light, dark, and topographic map layers, river visibility toggles, and informative tooltips for river and watershed boundaries.
- Custom Component: A self-contained component presenting focused content for each river, including key facts and environmental concerns.
- Improved Layout: Replaced a static, content-thin page with a modular, scroll-efficient design that enhances usability and supports content discoverability.
- Content Clarity: Refined tone, structure, and copy direction to create a more accessible and engaging learning experience.
- Geology Integration: Brought in contextual information from an existing geology page to unify content and eliminate siloed learning.
- Educational Impact: A vastly improved design that invites exploration, supports user expectations, and elevates the educational value of the page.
Scroll to explore the full layout.
Impact & Next Steps:
The page was just placed into production, but I expect to see increases in time on page, engagement with map features, and overall improved user satisfaction.
Post-launch evaluation plans include:
- User Testing: Observing user interactions through unmoderated testing sessions.
- Reviewing Analytics: Monitoring analytics such as time on page and interaction rates.
- Continued Improvement: Future iterations may expand interactivity with additional tributaries, data overlays, or new animations.
Key Takeaways:
- User Expectations Should Drive Experience Design: Users wanted interactivity, not static facts.
- Clarity and Simplicity Matters: Focusing on the 9 largest rivers struck a balance between simplicity and substance.
- Collaboration is Key to Success: This project highlighted the importance of cross-team collaboration. Working closely with internal teams ensured that the final product aligned with user needs and expectations.
- Learning New Tools Pays Off: Building the interactive map deepened my experience with geospatial data and front-end tools.
- AI Tools Can Accelerate Learning: ChatGPT played a valuable role in helping me quickly get up to speed on geospatial and development concepts.
- Small Layout Choices Matter: Removing the empty sidebar and centering content significantly improved user focus and experience.