Pelagic Fish Market & Grill

eCommerce, Featured, Quick-Service Market, Restaurant Sites, Seafood

Status:
Online
Client:
PopMenu
Established:
2025
URL:
pelagichmb.com
Location:
CA, USA
Project Scope:
UX/UI Design, Front-End Development, Accessibility Audit, Copywriting

Project Overview

Dock-to-Digital in Half Moon Bay

Pelagic Fish Market and Grill launched with a competitive edge: a rare "dock-buyer" license allowing them to source seafood directly from the Pillar Point fleet. Despite this unique "world-ocean-fusion" concept, they lacked a digital platform capable of telling their dual story—operating as both a fresh fish market and a quick-service grill. They needed to bridge the gap between the rugged authenticity of the docks and the polished experience expected by Bay Area diners.

The mission was to engineer a unified digital home for two distinct business lines. We needed to craft a site that drove immediate online orders for the grill while simultaneously capturing high-value leads for market specialties like their prized ivory salmon, all within a WCAG-compliant framework.

Challenges & Goals

The Challenges

Dual Identity: Integrating two distinct business models (Retail Market vs. Restaurant) on a single domain without confusing the user journey.

Mobile Context: Many visitors are tourists standing on the dock; the site had to be optimized for sunlight readability and one-handed navigation.

Brand Translation: The logo used heavy, geometric badge typography and specific colors (#922025 & #d3b02a) that needed to be expanded into a full, accessible UI system.

The Goals

Architectural Clarity: Surface Market, Grill, and Catering paths immediately, utilizing a dynamic "Today's Catch" slider to push daily market specials.

Accessibility First: Achieve WCAG-AA compliance by rigorously testing color contrast and implementing keyboard-focus states for all interactive elements.

Mobile Conversion: Deploy a sticky "Order Online" bar specifically for handheld devices to capture impulse orders from foot traffic.

Strategy & Approach

Phase 1: Accessible Brand Expansion

We expanded the logo's Red/Gold palette into a nautical system featuring Harbor Teal (#10788a) and Midnight Navy (#183c64). Every color pairing was tested for 4.5:1 contrast. We mimicked the logo's geometric heft by pairing Ramabhadra (headlines) with Inter and Barlow Condensed (body), creating a "Badge Typography" look without heavy image files.

Phase 2: The Mobile-Dock Experience

Recognizing the on-the-go nature of the clientele, I built a custom sticky "Order Online" bar that triggers after a 60px scroll on mobile devices. We utilized a 60% navy overlay on hero images to ensure the white H1 text maintained AAA contrast, even in bright outdoor conditions.

Phase 3: Content & SEO

I wove the "dock-to-table" narrative into the metadata. By targeting keywords like "fresh seafood Half Moon Bay," we lifted organic impressions. We also integrated a HubSpot funnel for catering and a custom "Ivory Salmon Wait-list" to capture high-intent data for premium seasonal items.

Solutions Delivered

Area	Highlight
Visual Design	Implemented a custom "Harbor & Heat" theme with WCAG-AA compliant contrast using Navy, Teal, and Gold accents.
Mobile UX	Engineered a sticky "Order Online" bar for mobile users, driving a 28% increase in order starts.
Lead Generation	Built specialized wait-list forms for "Ivory Salmon" drops and a Catering quote tool linked to HubSpot.
Accessibility	Conducted a full keyboard-focus audit, implementing Gold (#d3b02a) outlines on interactive elements for assistive tech.
Content Strategy	Crafted keyword-rich bios and sustainability pledges to boost local rankings for "dock-to-table crab."