Case study · Web design · Bella Groove · 2026
I built Bella Groove’s first website in 2014. Twelve years on, the Canberra jazz band had two audiences the old site never separated: fans and venue bookers on one side, singing and flute students on the other. The 2026 rebuild gives each a front door of their own — on one site, one domain, with everything the band had earned in search kept intact.
The first build has its own case study.
The brief · 01
Bella Groove’s site had grown by accretion: eight flat menu items, a page builder doing the layout, twenty stylesheets, no meta descriptions and a mobile navigation that didn’t collapse. It worked, but it was slow to load, hard to update and it made a student and a festival booker read the same page.
The question I answered first wasn’t visual — it was strategic: one website or two? Two sites would have split the band’s search authority in half. The recommendation was one site, two front doors, and the rest of the design follows from that.
Decisions that mattered · 02
- Split above the fold. The home page divides immediately into “Hear the band” and “Learn with Elise”. Fans and venues go one way, students and parents the other, and neither has to scroll past the other’s content.
- Keep the URLs. Every established slug was reused, so twelve years of inbound links and rankings carry over. Nothing 404s.
- A hub for lessons, on the same domain. Lessons got its own hub with a search-targeted page per lesson type — singing, flute, voice and speech — without leaving the domain the band had earned.
- Blocks, not a page builder. A custom WordPress theme with ready-made sections in the block inserter: hero poster, front doors, Up Next, upcoming dates, press quotes, discography. Elise edits pages; she doesn’t wrestle a builder.
- Sections that keep themselves current. The next gig, the upcoming dates, the records and the videos are pulled from the gig and discography archives. Add a gig, and the home page already knows.
- Accessible colour from the palette up. The band’s coral is 4.16:1 on white — fine for display type, short of the body-text threshold — so it exists in two values with defined roles. Every combination on the site passes WCAG 2.2 AA.
- Nothing deleted. All 31 original pages are still in the install as backups until Elise is confident nothing is missing.
Stack
WordPress with a custom block-based theme — no page builder rendering anything. Self-hosted, subsetted type (Archivo Black, Big Shoulders Display, Barlow), so there are no third-party requests. AudioTheme for gigs, records and videos; Bookly for lesson bookings; Gravity Forms for enquiries. Structured data for MusicGroup, MusicEvent, MusicSchool and Person.
Outcome
Live at bellagroove.com. Three stylesheets where there were twenty, eight scripts where there were twenty-four, a meta description on every page, exactly one H1 everywhere, no images without alt text, and zero contrast failures across 1,267 elements checked. Heavy plugin assets now load only on the pages that use them.
20 → 3
stylesheets
24 → 8
scripts
0 → all
pages with a meta description
0
contrast failures, 1,267 elements
Screens · 03
Mobile first, properly
A band’s website gets opened on a phone outside the venue, and the old site’s navigation didn’t collapse at all. The new one has a hamburger below 992px, every tap target is at least 44px, and the home page still splits into its two doors before a single scroll.
The video pages were fixed at the same time: every one of the eighteen published performance videos now has a working player that holds 16:9 down to a 320px column.