Case study · Web design · Carly Wilson · 2026
I built the original Rubber Jellyfish site in 2016, while Carly Wilson was still making the film. A decade later the documentary had screened in more than 80 locations and helped bring about three local-government balloon-release bans — but the website still read like a fundraising page for a film in production. The 2026 rebuild turns it into what the film had become: a place to watch it, and a toolkit for the people who want to act on it.
The brief · 01
The site had grown page by page for ten years: 24 pages, page-builder shortcodes throughout, the synopsis duplicated across two pages, Carly’s biography split across two more, and the screening information three levels deep. The strongest content on the whole site — the science of what a burst balloon looks like to a sea turtle — was buried on the “For Press” page, where nobody searching “do balloons hurt sea turtles” would ever find it.
Five different audiences were arriving: viewers, activists and screening hosts, teachers, journalists and donors. The old navigation grouped pages by content type and made all of them read the same page. The question I answered first was which of those audiences the home page is for — and the answer shapes everything else.
Decisions that mattered · 02
- Watch first, act second. Most visitors arrive cold and need to see the film before they will do anything about it. So “Watch” leads the navigation and the hero, with “Get involved” as the paired second button — visible, never buried. On the home page the ask comes after the impact proof, because proof is what motivates it.
- The science became its own page. “The Issue” is now a top-level pillar every other page links to — the research, the numbers, and the “100% biodegradable” claim taken apart with the 1988 study that disproves it.
- Six sections, nothing deeper than two levels. Watch, The Film, The Issue, Impact, Get Involved, News. Contact, press kit, attributions and thank-you pages moved off the menu and are linked where they are needed instead.
- Get Involved routes; it doesn’t re-pitch. Anyone who reaches that page has already accepted the ask, so it sorts intent — attend, host, teach — ordered by how much time each one takes, rather than selling the cause again.
- A standalone theme, not a page builder. The host’s web application firewall was rejecting page-builder layout imports, so I built a lightweight theme of my own. It installed in one upload with no host action needed, and the page markup is separate from the theme so it would survive a change of either.
- Accessible colour from the palette up. The blue is sampled from the film’s logo; the amber I first chose for eyebrow text measured 2.99:1 on white, so it now exists in two values with defined roles — bright for rules and fills, a darker 5.6:1 tone for text. Every colour pair on the site passes WCAG 2.2 AA.
- Nothing deleted. All 24 original pages are still in the install as backups, every old URL 301s to its new home, and the twelve news posts were carried over untouched.
Stack
WordPress with a custom standalone theme: two stylesheets, one for the site chrome and one for the page components, so the page markup can be reused if the theme ever changes. Google Fonts serif headings, Gravity Forms for contact, YouTube embeds for both cuts of the film. Legacy redirects handled in the theme rather than a plugin. A check script in the repo verifies internal links, image alt text, heading order and 26 colour pairs against WCAG 2.2 AA after every edit.
Outcome
Live at rubberjellyfishmovie.com since 31 August 2026. Nineteen new pages, all returning 200 with no fatals; 39 internal link targets and 33 images verified; 15 legacy redirects landing where they should. Every one of the 63 outbound links was checked too — five rotted press links were unlinked rather than left broken, a dead donation link was taken out of circulation, and a hot-linked 1990 research PDF was re-hosted so it can’t disappear.
24 → 19
pages, nothing lost
15
legacy URLs redirected
63
outbound links checked
0
colour pairs below AA
Screens · 03
Built for a phone outside a screening
A documentary’s website gets opened on a phone — after a screening, in a classroom, from a social post. The header shrinks and wraps rather than overflowing at 320px, the two hero buttons stay together above the fold, and the quick-link tiles reflow into a two-by-two grid. Every image carries width and height so nothing jumps while it loads.
The old site’s biggest hidden problem was invisible on a desktop too: 25 of its media references still used http:// on an HTTPS site, failing inconsistently in different browsers. Every one was made root-relative, so they survive any future move.