top of page

Allison Skinner

Allison Skinner 

Copy of shop_edited.jpg

Shop Landing Page

2024

Web Design, UI, Low-Code Development

Copy of shop_edited.jpg

Shop Landing Page

2024

Web Design, UI, Low-Code Development

Copy of shop_edited.jpg

Shop Landing Page

2024

Web Design, UI, Low-Code Development

Objective

With full creative freedom, I designed the Shop To Support page to promote merchandise that financially supports Seaside Sustainability’s programs. This page needed to blend nonprofit storytelling with intuitive ecommerce UX.

Problem

  • Creating a modern ecommerce feel within a nonprofit website.

  • Presenting limited inventory in a way that felt dynamic and browsable.

  • Balancing visual storytelling with conversion-oriented design.

  • Making the shop feel mission-driven while maintaining clean UI/UX standards.

Goals

  • Clearly display shop categories and products.

  • Encourage exploration and interaction through scrollable visuals.

  • Reinforce Seaside’s identity across typography, layout, and tone.

  • Ensure usability and responsiveness across all devices.

Solution

Scrollable Product Showcase

  • Implemented horizontal scroll carousels for each shop category, allowing users to swipe or scroll through items like apparel, totes, and stickers.

  • Ensured responsive behavior so scroll works smoothly across desktop, tablet, and mobile views.

  • Used consistent product preview cards with image, title, and CTA styling.

Brand & Visual Consistency

  • Maintained the Seaside brand palette and tone throughout the product sections.

  • Designed large category headers and banner sections to anchor the layout visually.

Action-Oriented Layout

  • Added prominent buttons beneath each product category, driving users into the full shop experience (e.g., “Shop Seaside Sustainability” and “Shop Green Scholars”).

  • Ensured the Shop page is always accessible via a persistent “Shop” button in the top site navigation bar.

Impact Summary

Feature
Final Designed Page
Responsive Design
Grid-based layout with optimized behavior for mobile and desktop screens
Consistency of Brand Look
Cohesive typography, color palette, and looping imagery across sections
CTAs
Multiple clear buttons guiding users to shop by category
Brand Messaging
Banners echo site’s mission language to frame shop items as part of impact
Product Categories Layout
Visually defined sections with banners, buttons, and grouped visuals
Feature
Final Designed Page
Responsive Design
Grid-based layout with optimized behavior for mobile and desktop screens
Page 1 of 5

Outcome

  • Supporters now browse Seaside merchandise through an engaging, mission-aligned storefront experience.

  • The page balances nonprofit messaging with ecommerce functionality, encouraging both purchases and advocacy.

  • It now functions as both a promotional tool and a revenue-generating touchpoint for the organization.

  • The modular layout and product carousels make it easy to scale with new merchandise and seasonal campaigns.

Final Designed Page

bottom of page