Seaside Sustainability Homepage
2023
Prototyping, UI, UX, Low-Code Development
Seaside Sustainability Homepage
2023
Prototyping, UI, UX, Low-Code Development
Seaside Sustainability Homepage
2023
Prototyping, UI, UX, Low-Code Development
Objective
To transform the homepage into an engaging, action-oriented hub that embodies Seaside Sustainability’s mission while guiding visitors toward key actions such as donating, volunteering, and learning more about programs — incorporating education through action in alignment with the SEA Change mission (Sustainability, Education, Action).
Original Page
Below are the elements of the original Homepage:
Problem
-
Minimal visual storytelling and lack of brand personality on the old homepage.
-
Calls-to-action were visually weak and buried within text.
-
Blog section presented without context or visual variety.
-
No clear breakdown of Seaside Sustainability’s three pillars (Sustainability, Education, Action).
-
Limited pathways for returning visitors to quickly access popular content or opportunities.
Goals
-
Create a visually engaging, story-driven homepage that reflects the organization’s mission.
-
Make high-value calls-to-action (Donate, Join, Apply) instantly visible.
-
Clearly present Seaside Sustainability’s core areas of work (S-E-A) to educate and inspire.
-
Improve navigation to key program pages and resources.
-
Maintain consistent brand identity through cohesive colors, typography, and imagery.
Mockup
After my initial mockups, I went on to create digital mockups that I could show to the team to get their input.
I explored multiple layouts, including redesigning elements from the homepage ("What We Do", etc.) before finalizing a clean blue design centered on the SEA Change mission — Sustainability, Education, and Action. The final layout simplifies navigation, improves content hierarchy, and highlights clear calls-to-action, creating a user-friendly experience that both communicates the mission and inspires engagement.
Solution
Hero Section Revamp
-
Introduced bold, mission-driven imagery with the “Inspiring a SEA Change” message.
-
Grabs attention immediately, establishes brand identity, and gives users a clear sense of purpose from the start.
Donor & Volunteer Engagement Row
-
Added a three-card section showcasing Donate, Join, and Team engagement options.
-
Turns abstract support into tangible actions, making it easy for visitors to get involved.
Seasonal Highlight Banner
-
Integrated “Now Taking Applications for Summer 2024” as a dedicated banner.
-
Keeps the page current and action-oriented, while supporting seasonal recruitment goals.
S-E-A Pillars Section
-
Structured Sustainability, Education, and Action into clickable cards with visuals.
-
Reinforces the SEA Change mission and makes complex programs scannable and navigable.
Mission & Action Row
-
Paired the organization’s mission statement with a “How You Can Help” prompt.
-
Balances inspiration with clear action steps, preventing users from disengaging after reading the mission.
Blog Feed Redesign
-
Added image-rich previews with improved spacing and hierarchy.
-
Increases blog visibility, draws readers into recent content, and boosts engagement through visual appeal.
Instagram Feed Integration
-
Embedded a live Instagram feed showcasing real-time activities and campaigns.
-
Provides dynamic, fresh content that builds authenticity and creates a direct bridge between social engagement and the website.
Impact Summary
Element | Previous Homepage | New Homepage |
|---|---|---|
Brand Personality | Minimal mission alignment | Bold, values-driven messaging with consistent brand colors & tone |
Navigation | Limited action paths | Multiple entry points to programs, volunteer sign-up, and resources |
Content Structure | Single scroll with generic info | Clear thematic grouping: Action invites, S-E-A pillars, mission, blog |
Calls-to-Action | Text-based links, low visibility | Prominent, branded buttons for Donate, Join, Apply in multiple sections |
Visual Engagement | Sparse visuals, static layout | Rich imagery, color blocks, modular sections create dynamic flow |
Category | Previous Homepage | New Homepage |
|---|---|---|
Brand Personality | Minimal mission alignment | Bold, values-driven messaging with consistent brand colors & tone |
Outcome
-
Increased clarity in communicating mission and core focus areas.
-
More intuitive pathways for donations, volunteer sign-ups, and program applications.
-
Modular design supports seasonal or campaign-specific updates without breaking layout.
-
Homepage now acts as both an educational hub and a conversion funnel for the organization’s initiatives.
Redesigned Page
