Finchley Horticultural Society – A Century of Gardening, Digitised

The Finchley Horticultural Society has been at the heart of North London’s gardening community since 1924. When they approached me to rebuild their online presence, the brief was clear: honour a rich heritage while making the society accessible, welcoming, and easy to manage for volunteers.

The result is a fast, Hugo-powered website that tells the story of the society, helps visitors find allotments, join as members, browse events, and connect with a thriving community — all in a design that feels as warm as a Sunday morning at the trading hut.

The Challenge

The society’s previous site was difficult to update, lacked mobile responsiveness, and didn’t reflect the energy of the community behind it. Board members — many of whom are volunteers with varying technical experience — needed a site they could confidently hand off to anyone. It also needed to serve several distinct audiences:

• Local residents looking for allotment plots
• Prospective members wanting to join the society
• Existing members seeking newsletters, events, and trading hut hours
• The general public interested in the society’s history and plant sales

The Approach

Content-First Architecture

I started with the content. The society has decades of history, a monthly newsletter (The Grapevine), an events calendar, allotment management details, and a trading hut schedule. Rather than force everything into a rigid template, I designed an information architecture that lets each section breathe while remaining cohesive.

The site is organised into clear pillars:

Design Philosophy

The visual direction was inspired by the society’s identity — earthy greens, warm neutrals, and a hand in the soil. I wanted the site to feel like stepping into a well-tended garden: organised, natural, and inviting.

Key design decisions:

• Warm green colour palette — evoking foliage, growth, and the society’s horticultural roots
• Wood-toned accents — subtle texture that nods to the physical trading hut and allotment sheds
• Large, readable typography — many visitors are older residents; readability was paramount
• Generous whitespace — gives the content room to breathe, especially the long-form history page
• Soft rounded corners — approachable, modern without being trendy
• Mobile-first responsive layout — from phone to desktop, the experience stays consistent

Technical Implementation

Built with Hugo, the site is fully static — meaning it loads instantly, costs nothing to host at scale, and is inherently secure. The setup includes:

• Modular partials for headers, footers, and reusable components — easy for volunteers to understand
• Decoupled content from presentation using Hugo’s data-driven approach — newsletters, events, and committee members are managed as data files, not hardcoded HTML
• Automatic table of contents on longer pages (like the About page) for easy navigation
• Accessible by design — semantic HTML, proper heading hierarchy, alt text on all images, and ARIA labels where needed
• RSS feeds for members who want newsletter updates in their feed reader
• Custom 404 page with helpful navigation links

SEO & Performance

• Perfect Lighthouse scores on performance, accessibility, and SEO
• Canonical URLs, Open Graph and Twitter card meta tags for social sharing
• JSON-LD structured data for the organisation, events, and local business schemas
• Sitemap generation and clean URL structure
• Optimised images with lazy loading

Highlights

• 100% volunteer-friendly — anyone on the committee can update content without touching code, thanks to Hugo’s straightforward markdown and data file workflow
• Sub-second page loads — every page ships as pre-built HTML with no database queries or server-side processing
• Accessibility-first — meets WCAG AA standards, tested with screen readers and keyboard navigation
• Event calendar — Hugo-generated calendar pages for plant sales, AGMs, and society meetups, with automatic past/future sorting
• Allotment application flow — clear call-to-action and information hierarchy to guide local residents through the waiting list process
• Newsletter archive — The Grapevine’s entire run is available online for the first time, searchable and browsable

Tech Stack

• Hugo — static site generator for speed, security, and simplicity
• HTML/CSS — clean, semantic code with CSS custom properties for theming
• Vanilla JavaScript — minimal enhancements (mobile menu, smooth scroll) — no framework bloat
• Deployed to CDN — global edge caching with instant invalidation on updates

My Role

• Discovery & strategy — stakeholder interviews to map user needs, content audit of the old site, and information architecture design
• Visual design — full UI design, colour palette, typography system, and responsive layout
• Front-end development — Hugo theme customisation, component building, and responsive CSS architecture
• Content migration — ported all historical content from the old site, wrote new copy where needed, created the newsletter archive
• Technical SEO & performance — Lighthouse optimisation, schema markup, meta tags, sitemap, and CDN configuration
• Training & handover — documentation and a walkthrough session for the committee on how to add new content

Roadmap & Future Plans

The site was launched as a v1 — a solid foundation designed to grow with the society’s needs. Planned enhancements include:

Phase 2 — Member Portal

• Password-protected member area with digital membership cards
• Online subscription renewal
• Member directory (opt-in)

Phase 3 — Allotment Management

• Interactive plot map showing availability
• Online waiting list application form
• Plot holder announcements and maintenance schedule

Phase 4 — Community Features

• Member-submitted gardening tips and seasonal guides
• Photo gallery of allotments and society events
• Recipe corner for home-grown produce

Phase 5 — Sustainability Dashboard

• Carbon sequestration tracking for allotment plots
• Composting and biodiversity resources
• Rainwater harvesting calculator

The modular architecture means each phase can be added incrementally without disrupting the existing site. The committee can prioritise what matters most to their members.

Live Site

Visit: https://www.finchleyhs.org/