Salem Sound Coastwatch website redesign
Salem Sound Coastwatch is a non-profit coastal watershed organization working to protect and improve the environmental quality of Salem Sound and its watershed.
Challenge
The non-profit organization hadn’t updated its website in over 20 years. Having recently celebrated their 30th year anniversary, it was time for a redesign and reorganization of decades of scientific research, documentation, and community-led, as well as government-funded initiatives. Using Figma, Adobe CC, and WordPress, I designed and developed the new salemsound.org.
Concept
My approach was to first update the outdated user interface with a modern, minimalist design. I collaborated with the Salem Sound Coastwatch team to ensure the bulk of research and resources, as well as call-to-actions were easily accessible. We also implemented a land acknowledgement of the Massachusett Tribe, an events calendar, and a blog for sharing recent news, spotlights, and local environmental awareness.
Before + After
Visual Sitemap Reorganization
The first step to the redesign of the website was organizing topics and initiatives into buckets using a visual sitemap. This process made it easy to audit the former website for outdated or stale content, and add top-of-mind areas of interest.
Detailed Wireframe
The next step was to create wireframes, giving structure to pages, menus, and content organization.
I devised page structures and variations that would lend themselves to an immense amount of content, resources, and research.
Creating Content-filled Prototype
Lastly, I populated each wireframe with content and prototyped for stakeholders. I was able to use a lot of pre-existing content that included professional underwater photography and photography provided by Salem Sound Coastwatch community members and employees.
Website Development and Design Build Out in WordPress
Second Level Pages
Second level pages refer to the main menu dropdown items and are pages that contain general information, overviews, and often lead users to deeper-dives into research, projects, and initiatives (third level pages).
Third Level Pages
Third level pages contain the most amount of information and resources. They include pop-ups, videos, infographics, and links to story maps. Users will find relevant, suggested pages to visit at the bottom of all third level pages.
Full Webpage Examples
