Client Project Nonprofit Organization Full Website Redesign WooCommerce + E-Commerce Custom PHP Architecture

Freedom Park Association

A comprehensive ground-up redesign of the Freedom Park Association website — transforming an outdated, broken WordPress theme into a professionally built custom PHP site with a fully integrated WooCommerce sign rental store, dedicated donation experience, Art Walk section with individual sculpture pages, volunteer intake system, and a complete migration of over 800 historical booking records. All delivered for a community nonprofit at the gateway to Camano Island.

Project Overview

Freedom Park Association is a privately funded, community-run park at the intersection of Hwy 532 and N Camano Drive — the gateway to Camano Island, Washington. The park is home to a Pearl Harbor memorial, a community Art Walk featuring original sculptures, a playground, a labyrinth, and a distinctive roadside sign that local residents and businesses rent to share messages with the community. The organization is run entirely by a volunteer board and receives no county or state funding.

The existing site had grown organically over the years and was ready for a fresh start. A detailed pre-project audit helped identify opportunities across the board — from improving the volunteer and gallery experiences to strengthening the donation flow, resolving technical inconsistencies, and establishing a consistent editorial voice. The content and community value were already there. The goal was to give them a structure and presentation they deserved.

The project was organized into four deliverable groups under a signed Website Services Agreement, expanded by Scope Addendum No. 1 to include a full Art Walk section. The engagement also included a signed brand style guide establishing the complete visual identity system applied across every page of the redesigned site.

Screenshot of the redesigned Freedom Park Association homepage

Client Goals

Primary Objectives

  • Replace an outdated, broken WordPress theme with a modern, professional website
  • Fix all broken pages and functionality before or at launch
  • Create a clear, guided experience for visitors — donate, volunteer, rent the sign, visit
  • Reframe the sign rental as a community service, not a retail transaction
  • Build a dedicated donation experience that communicated the park's mission
  • Rebuild the volunteer page with a working intake form
  • Rebuild the photo gallery with organized, categorized albums
  • Preserve and improve the existing WooCommerce sign rental and donation functionality
  • Modernize the board of directors page with bios, photos, and card layout
  • Apply a consistent brand system — color, typography, and voice — across every page
  • Create a dedicated Art Walk section with individual pages for every park sculpture
  • Migrate all historical sign rental bookings into the new system

Project Focus

Freedom Park had a compelling story and real community value. The challenge was entirely one of presentation, structure, and broken functionality. The redesign was guided by a single principle: surface what already exists — the Pearl Harbor memorial, the community art, the volunteer history, the sign rental tradition — and make it impossible for a visitor to miss.

This meant rebuilding every page with intention, establishing a brand system that reflected both the park's patriotic identity and its community warmth, and ensuring that every action a visitor might want to take — donate, rent the sign, volunteer, contact the board — was immediately accessible and clearly presented.

Pre-Project Audit

25-Page Website Audit Delivered Before Work Began

What the Audit Covered

  • Information architecture review — navigation structure, page hierarchy, and user flow
  • Page-by-page assessment of every existing page on the site
  • Visual design and UX evaluation — hero images, typography, layout patterns, and CTA hierarchy
  • Technical review — mixed HTTP/HTTPS asset references, SEO gaps, missing meta descriptions, broken links
  • Conversion audit — how effectively the site guided visitors toward donation, sign rental, and volunteer actions
  • Content quality review — identifying what to preserve, rewrite, and fix first
  • Editorial voice analysis with recommended tone targets for the redesign
  • Prioritized findings table covering 20+ high, medium, and low priority issues
  • Recommended new features including a dedicated donation page, events feed, newsletter signup, and volunteer intake form
  • Phased redesign roadmap from foundation through QA and launch

Key Findings

The audit found the Volunteer page was not rendering content — displaying only "Loading..." — despite being linked directly from the FAQ as the primary sign-up destination. The Photo Gallery displayed a single image. The donation experience routed visitors directly to a personal PayPal.me URL with no branded landing page and no mission context. The homepage had no hero image, no mission statement, and no clear action hierarchy above the fold.

The site's strongest content — the park's origin story, its Pearl Harbor memorial connection, the FAQ — was buried in dense, unscannable text with no visual structure. The audit made clear that the problem was not a lack of substance. It was a framework that had grown outdated and disorganized around strong material that deserved better presentation.

Brand System & Style Guide

Complete Visual Identity System Established

What Was Defined

  • Color system: Navy (#1A3A6B) as the dominant structural color, Liberty Red (#B22234) reserved exclusively for calls to action and high-urgency moments, Light Blue-Gray (#EEF3FA) for alternating sections, Deep Navy (#0F2347) for the footer
  • Typography: Outfit (Google Fonts) as the exclusive typeface — weight, size, and color rules defined for every heading level, body copy, navigation, buttons, and labels
  • Button hierarchy: Red filled (primary CTA), Navy outlined (secondary), Navy filled small (tertiary), Ghost on dark backgrounds — all using a 100px border-radius pill shape
  • Section alternation pattern: White and Light Blue-Gray alternating throughout — Liberty Red reserved for the donation match banner only
  • Logo usage rules: Freedom Park logo retained as-is, displayed on white backgrounds only — never on navy, red, or any colored surface
  • Page and feature naming conventions: "Rent the Sign" replacing "Shop," "Our History" replacing "True History," canonical URL and navigation names established
  • Editorial voice targets: warm, community-driven, grounded — the kind of language a proud Camano Island resident would use with a neighbor

Why It Mattered

The previous site had no applied brand system. Colors, fonts, and button styles were inherited from an off-the-shelf theme with minimal customization. The result was a site that looked inconsistent and felt like it belonged to no one in particular.

The brand guidelines document — delivered as a signed, formal PDF before development began — ensured that every design decision through the entire build had a documented foundation. Navy carries the credibility and civic weight appropriate for an organization that stewards a Pearl Harbor memorial. Liberty Red signals urgency and action, deployed deliberately so it retains full impact when it appears. The system was built to make Freedom Park look exactly as important as it is.

Foundation & Global Elements

Deliverable Group 1 — Site Architecture, SEO & Technical Remediation

What Was Built

  • Custom PHP architecture with centralized includes — config.php, header.php, footer.php — applied consistently across every page
  • CSS variable system for the complete brand palette and typography scale
  • Streamlined navigation structure: Home, About, Rent the Sign, Art Walk, Gallery, FAQ, Contact — with Donate as a styled pill button in the header
  • Redesigned site-wide header and footer — single clean footer replacing the sitewide repeated widget block
  • Resolution of all mixed HTTP/HTTPS asset reference issues — logo and icons corrected to HTTPS throughout
  • Consolidated copyright notices — dynamic year, single correct attribution, theme credit removed
  • Unique SEO title tags and meta descriptions written for every page
  • Schema.org structured data implementation for the organization
  • Image optimization and performance improvements site-wide
  • WordPress installed at /wp/ subdirectory on the same domain — separate from the custom PHP front end

Technical Architecture

The site was rebuilt as a custom PHP application — not a WordPress theme. The front end is fully controlled, fast, and maintainable without theme update risk or plugin compatibility conflicts. WordPress and WooCommerce operate in a /wp/ subdirectory handling all e-commerce, sign rental bookings, and donations, while the main site serves all informational and navigation content independently.

This hybrid architecture gives the organization the best of both: a custom, professionally built front end with a familiar WooCommerce dashboard for managing orders and bookings. The WordPress admin is accessible at a separate URL, invisible to site visitors entirely.

Core Pages

Deliverable Group 2 — Homepage, About, Board of Directors & FAQ

Homepage

  • Full-width hero section with park photography, tagline, and dual CTA buttons
  • Mission strip communicating what Freedom Park is and why it matters
  • Get Involved quick-link tile row: Donate, Rent the Sign, Volunteer, Visit the Park
  • News and updates card section for community announcements
  • Embedded Google Map showing the park location at Hwy 532 & N Camano Drive
  • Clear action hierarchy guiding visitors from awareness to engagement

About / Our History

  • Dense, unbroken walls of text restructured into scannable sections with subheadings and supporting imagery
  • Pearl Harbor memorial connection given its own highlighted section — the park's most powerful differentiator
  • Park origin story (2001 land donation, C.A.R.E., July 4th 2003 dedication) presented as a clear narrative arc
  • Historical document downloads styled as branded download cards
  • Park rules moved to a visually separated section

Board of Directors

  • Rebuilt from a thin bullet list with image icons into a card-based grid layout
  • Individual photo, name, title, and bio for each active board member
  • Honorary member and logo designer roles acknowledged with proper context
  • Image-based bullet points replaced with accessible HTML/CSS list styling

FAQ

  • Flat unformatted list converted to accordion-style layout for clean mobile UX
  • Questions categorized by topic: Park Use & Events, Sign Rental & Payments, Fence & Pickets, Volunteering & Support, About the Park
  • Duplicate FAQ navigation item removed
  • "Can't find your answer?" prompt added at bottom linking to Contact

Community & Engagement Pages

Deliverable Group 3 — Volunteer, Contact & Photo Gallery

Volunteer Page

  • Full rebuild from a broken "Loading..." state to a fully functional engagement page
  • Volunteer opportunities, ways to help, and seasonal involvement options clearly laid out
  • Inline contact and sign-up form capturing name, email, interests, and availability
  • Volunteer coordinator contact information prominently featured
  • Community impact framing — why volunteers matter to the park and what they make possible

Contact Page

  • Contact form with inquiry type selector: General, Volunteer, Sign Rental, Donation
  • Embedded Google Map showing the park at Hwy 532 & N Camano Drive
  • Park hours, physical address, mailing address, and Facebook link displayed on the page
  • Public-space note clarifying that Freedom Park is open first-come, first-served

Photo Gallery

  • Full rebuild from an effectively empty page (one image displaying) to a responsive grid gallery
  • Organized into categorized photo albums: Park Grounds & Improvements, Community Events, Playground & Family, Art Walk, Historical Photos
  • Captions and context added where appropriate, particularly for historical images
  • Lightbox behavior for full-size image viewing

E-Commerce, Sign Rental & Donations

Deliverable Group 4 — WooCommerce, Easy Booking Pro & Donation Experience

Sign Rental System

  • Sign rental reframed from generic "Shop" to a dedicated "Rent the Sign" community-service page
  • Photo of the actual sign in use added to the product page
  • Inline multi-date ordering instructions added directly on the product page — no longer buried in FAQ
  • Four-line message entry (18 characters per line, 72 characters total) captured at checkout and stored with each order
  • Easy Booking Pro (@morki version) purchased and integrated — adding automatic date-blocking so no two customers can book the same date
  • $20/day pricing, 2-day minimum, calendar-based date picker with unavailable dates visually blocked
  • All 846 historical booking records from the old system migrated and marked Completed in the new database
  • 79 future bookings fully enriched with customer details, real rental dates, line item pricing, billing emails, and correct statuses via direct SQL

Donations

  • Dedicated /donate page built — replacing the direct PayPal.me link with a branded landing page
  • Mission statement, park impact context, and tiered giving levels with impact language presented before routing to PayPal
  • Adopt-the-Park donation tiers ($25, $50, $100) reframed with mission-driven language explaining what each contribution supports
  • Donate button elevated to a prominent styled pill CTA in the site header — visible on every page

WooCommerce Configuration

  • WooCommerce installed and configured in /wp/ subdirectory
  • Store admin email set to the board's address for all new order notifications
  • Physical and mailing addresses configured in WooCommerce settings
  • PayPal connected live to the organization's PayPal account
  • High Performance Order Storage (HPOS) confirmed and all SQL written against the correct wp_wc_orders table structure
  • All WooCommerce transactional emails redesigned: order confirmation, new order notification, completed order, refund, and customer note emails — each branded with the Freedom Park logo, correct addresses, and thank-you messaging
  • Processing email subject line customized: "Your Freedom Park sign reservation has been received!"
  • Complete Store & Donations User Guide delivered as a branded PDF for the board

Art Walk Section

Scope Addendum No. 1 — Art Walk Section

What Was Built

  • Dedicated Art Walk homepage accessible from the main site navigation at /art-walk/
  • Overview of the park's public art program and the significance of art at Freedom Park
  • Walking sequence instructions and suggested Art Walk route
  • Preview tile grid linking to each individual installation page
  • Up to 20 individual art installation pages — one per sculpture — covering every piece in the park including the labyrinth
  • Each installation page: name, artist, background and biography, year created, materials, artist statement or historical context, and photographs
  • All pages assigned clean, descriptive URLs: freedomparkassociation.com/art/installation-name
  • Every sculpture identified and every page completed — including "The Family Gathering" by Pamela Hom, the last unidentified installation
  • All pages formatted consistently for both desktop and mobile
  • QR code image files generated for each installation for use on physical park interpretive signage

Why It Was Added

The Art Walk addendum grew out of a recognition that Freedom Park's public sculpture collection was a meaningful and underrepresented part of the park's identity. Visitors had no way to learn about the artists or the stories behind the installations during a visit — and no digital record existed that connected each piece to its creator.

Data Migration

Historical Booking Migration

The sign rental system had years of booking history in the old WordPress database that needed to carry forward into the new site. This required working across two database systems — the old site's database and the new HPOS-based WooCommerce installation — parsing PHP-serialized data, and writing SQL that respected the new order storage structure.

  • 846 historical booking records migrated and marked Completed in the new system
  • 79 future bookings fully enriched: customer name, email, billing address, rental start and end dates, line item pricing, and order status — all confirmed and accurate
  • Old booking data extracted from wp_woocommerce_order_itemmeta using _ebs_start_format / _ebs_end_format keys
  • PHP-serialized field data parsed with length-prefix-aware logic to handle escaped character byte offsets
  • All SQL executed via phpMyAdmin against the live Hostinger database
  • Easy Booking Pro date-blocking confirmed active on all migrated future bookings — no double-booking risk

Why It Mattered

Losing years of customer booking history on a site launch is common — and accepted as a trade-off. It was not acceptable here. The Freedom Park sign rental is a long-standing community tradition with customers who book months in advance and return year after year. Preserving that history meant the board retained a complete record of their most loyal customers and all confirmed future reservations transferred cleanly without requiring anyone to rebook.

Launch & Handoff

Launch Process

  • DNS transferred and SSL confirmed live at freedomparkassociation.com on Hostinger Premium hosting
  • WordPress Site URL and all internal config references updated for the live domain
  • .htaccess RewriteBase updated from development subdirectory path to production root
  • Cross-browser and mobile QA completed across Chrome, Firefox, Safari, and Edge on desktop, tablet, and mobile

Handoff Documents Delivered

  • Project Completion Summary — complete record of every deliverable from the proposal, agreement, and addendum with source and completion status
  • Store & Donations User Guide — step-by-step WooCommerce admin guide for the board covering sign rental management, Adopt-the-Park orders, refunds, transactional emails, and common scenarios
  • Post-Launch Welcome — post-launch coverage document outlining warranty, support hours, hosting, and domain protection details
  • Easy Booking Pro lifetime license key delivered
  • WordPress admin credentials and all project access information delivered on final payment

Results

Community Impact

Freedom Park Association now has a website that reflects the actual importance of the park. Visitors arrive at a site that immediately communicates what Freedom Park is, why it matters, and what they can do to support or engage with it. The sign rental system works cleanly, the booking history is intact, and the board manages everything from a familiar WooCommerce dashboard without requiring outside help for routine order management.

The Art Walk section gives the park's sculpture collection a permanent digital home — and gives visitors a reason to explore the park more thoroughly with QR codes connecting physical signage to each installation's dedicated page.

Long-Term Value

The hybrid PHP + WooCommerce architecture means the front end is fully owned and controlled — no theme update risk, no plugin compatibility surprises affecting the public-facing experience. E-commerce, bookings, and donations are handled by a battle-tested WooCommerce system with PayPal as the processor the community already knows and trusts.

The brand system, the editorial voice guidelines, and the complete documentation package give the board a foundation to maintain and grow the site consistently over time — whether working with Pro Media Management or any future provider.

Services Provided

Website Redesign Pre-Project Site Audit Brand Style Guide Custom PHP Architecture WordPress / WooCommerce Easy Booking Pro Integration Sign Rental System Date-Blocking & Availability Calendar Donation Page Design Adopt-the-Park E-Commerce PayPal Integration Transactional Email Design Historical Booking Data Migration SQL / Database Work Art Walk Section Individual Sculpture Pages QR Code Generation Volunteer Intake System Contact Form Development Photo Gallery Rebuild Board of Directors Page SEO Foundation Schema.org Structured Data Google Maps Integration Mobile-Friendly Design Cross-Browser QA DNS & SSL Configuration Nonprofit Website Strategy