Project Overview:
The Watershed page redesign was initiated to improve user engagement and clarity on a key educational page of our website. The goal was to replace a static, text-heavy layout with a more interactive, visually driven experience — helping users better understand the Chesapeake Bay Watershed, its major tributaries, and supporting geological context.
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, text-heavy Watershed 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 review of the homepage and key subpages it linked to, including 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:
- A unique interactive experience that allows users to visually explore the nine largest tributaries flowing into the Chesapeake Bay, with three selectable map layers (light, dark, and topographic), the ability to toggle river visibility on and off, and tooltips that display river or watershed boundary names when hovered over.
- A custom component with focused content for each river, including environmental concerns.
- Replaced a static, text-heavy layout with a modular, scroll-efficient design that improves usability and engagement.
- Improved content to ensure clarity, tone, and structure supported a more engaging learning experience.
- Added related information from an existing geology page that helped to provide context that was previously siloed.
- An vastly improved design that invites exploration, improves educational value, and directly addresses previously unmet user expectations.
Scroll to explore the full layout.
Impact & Next Steps:
The page is currently in development, 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.