Marine Science & Education
2023
Web Design, UI, Low-Code Development
Marine Science & Education Page
2023
Web Design, UI, Low-Code Development
Marine Science & Education Page
2023
Web Design, UI, Low-Code Development
Objective
Redesign and modernize the "Marine Science & Education" program page to improve user engagement, clarity of mission, and access to educational tools and project information.
Original Page
Problem
The previous version of the page was cluttered, text-heavy, and lacked clear structure and visual hierarchy. It made it difficult for users to:
-
Understand Seaside’s mission at a glance
-
Navigate key projects or initiatives
-
Engage with tools and opportunities for action
The site lacked strong calls to action, visual storytelling, and didn’t highlight the variety of impactful programs effectively.
Goals
-
Improve information architecture and scannability.
-
Increase clarity and appeal of key programs and impact areas.
-
Add interactive and educational tools to drive user engagement.
-
Ensure responsive, modern design aligned with Seaside's environmental mission.
Mockup
Solution
Restructured Page Layout
-
Designed a clear and intuitive flow with distinct sections:
-
“What We Do” (Mission)
-
“We Take Action” (Approach)
-
Programs/Projects (Actionable Initiatives)
-
-
Created modular layouts for each program to allow future scalability.
Improved Navigation & Accessibility
-
Integrated into global navigation under “What We Do”.
-
Made individual programs easily accessible via anchors and categories.
-
Ensured ADA-compliant color contrast and mobile responsiveness.
Visual Storytelling
-
Introduced high-resolution images of students in the field, coastal cleanup efforts, and tech innovations.
-
Balanced imagery and text to break up dense content and increase retention.
Expanded Content & Clarity
-
Consolidated project blurbs into detailed cards with clear titles, summaries, and impact statements.
-
Highlighted unique programs (e.g., Chebacco Lake Restoration, PixieDrone, Marine Debris Trawling).
User Engagement Tools
-
Embedded educational quizzes (e.g., "Plastic Footprint").
-
Promoted field trips and volunteer programs.
-
Added local community highlights to promote connection and retention.
Impact Summary
Element | Original Mockup | Redesigned Page |
|---|---|---|
Clarity of Offerings | Hard to discern | Categorized and labeled programs |
Interactivity | None | Quizzes, CTA buttons, field trip prompts |
Imagery | Random placement | Purposeful, story-driven |
Content | Vague and brief | Comprehensive and action-oriented |
Layout | Disjointed, text-dense | Clear sections, modern flow |
Category | Original Mockup | Redesigned Page |
|---|---|---|
Clarity of Offerings | Hard to discern | Categorized and labeled programs |
Outcome
-
User retention improved (based on Wix Website Analytics).
-
Stakeholder feedback praised the visual clarity and ease of navigation.
-
The redesign empowered educators and community members to find and engage with programs more effectively.
Redesigned Page
