Day 2 of 30. The brief was simple. Turn a dead end into something useful.
Most websites give you an "Oops! 404" and suggests you spelt something wrong when you hit a broken link. You bounce. The business never knew you tried. Today I rebuilt the PlainBlack 404 page so that doesn't happen.
What
A 404 page that does five jobs at once:
- A drag-and-drop game. Catch the angry red "bad ideas" before they wreck your marketing funnel. Phase two adds a second one. Hit 17 catches and a Trojan idea shows up. Bin that and all your progress spills back out. Beat all 20 and your time goes on a live leaderboard.
- A smart search box, pre-filled with the words from the URL the visitor actually tried. So if someone landed on /blog/marketing-tips-2024 from a stale Google link, the search box already says marketing tips 2024. One keystroke and they're searching.
- Three contextual route cards (Blog, Playbooks, Home) for visitors who don't want to play.
- A silent 404 email alert. The moment someone hits a genuinely broken link, an email lands in my inbox with the dead URL, where they came from, and the time. It skips alerts when the visit is internal or intentional, so I only see the ones that matter.
- All of it in PlainBlack's brand voice. Same fonts, same mint-on-ink palette, same dry confident tone. The error becomes a brand moment, not a brand crack.
Why
The way most small businesses currently find broken links:
A customer eventually mentions it (if you're lucky) → you email your web dev → they say "I'll take a look" → a week passes → they "test" it → they fix it (if they remember) → they invoice you for the hour.
In that week, every other visitor who hit the same dead link bounced. Straight back to Google. Click. Competitor. Gone. You'll never know how many.
This 404 collapses the whole cycle:
- Visitor doesn't bounce. The search and game keep them engaged
- I get the email the first time it happens, not weeks later
- I can fix the broken link or update Google's stale index in 5 minutes
- No "let me check with the dev" delay. No invoice for finding what was already broken.
How
A few moving parts, all on the cheap:
- The game. Pure HTML/CSS/JS. Custom SVG illustrations. Drag-drop with mouse + touch. A bin animation that tips when you win. Confetti.
- The leaderboard. A Cloudflare Worker (free tier), public read, rate-limited write so nobody can flood it.
- The email alerts. Web3Forms (free tier). Three lines of fetch. Zero infrastructure. Filters out my own visits and direct /404 URL hits so I don't drown in noise.
- The search box. Submits to https://www.google.com/search?q=site:plainblackcreative.com <query>.
The search decision was the one I spent the most time on. My first instinct was to build an internal search index. Keep the visitor on PlainBlack the whole time, branded results, no detour. Then I sat down and actually compared the two, line by line:
The two things internal search wins (visitor stays on site, branded UI) sound important until you actually look at what happens. Because the site: operator filters the results page to only PlainBlack content, the visitor goes on a 3-second detour through a Google-powered, ad-free, competitor-free results page that shows nothing but my work. Then they click straight back to a PlainBlack page. The "leaving the site" framing makes it sound like a leak. In practice it's a free, trusted, AI-powered front door to my own content.
So: Google wins on 9 criteria. Internal wins on 2. Three are a tie. Decision made.
Who needs this
Any business where:
- You spend time and money getting visitors to your site
- Stale links from Google, old social posts, or other sites still send people in
- You'd rather know about broken links now, not when someone happens to mention it
- Your bounce rate quietly bleeds visitors you paid to acquire
If your 404 page right now is a generic "page not found" template, it's a leak in the bottom of your funnel. Every visitor who hits it walks. You're paying to fill a bucket with a hole in it.
What it's worth
No 404 like this? You're already paying for three things:
The slow-loop cost. A customer eventually mentions a broken link (only about 1 in 30 actually do). You email your dev. They say "I'll take a look." A week passes. They test it, fix it, invoice you $120–$250 for the round trip. In that week, every other visitor who hit the same link bounced. Straight back to Google. Straight to your competitor. Gone.
The generic-template cost. A default "Page Not Found" is the website equivalent of voicemail. It says "I'm not paying attention to this part of my business." Every visitor who sees it forms a quiet impression. None of them mention it.
The silent-leak cost. Broken links don't show up in the reports you actually read. They show up as bounce rate. The traffic you paid for (ads, SEO, social posts that took you a Sunday to write) quietly disappears into the part of the funnel nobody looks at.
What you get
- An early-warning system that emails you the moment a real broken link is hit, not a week after a customer happens to mention it
- A funnel-recovery tool that turns a lost visitor into a found one with one keystroke
- A retention play that makes people want to spend time on a page they hit by accident
- A brand moment in the place most websites have a brand crack
- Free Search Console signals every time a visitor searches
- A leaderboard that brings repeat visitors back just to beat their own time
- All on free-tier infrastructure, no monthly subscription, no usage caps to babysit
One payment. Yours forever. No retainer. No "let me check with the dev" cycle.
Try it - type a wrong URL on plainblackcreative.com, or just go straight to plainblackcreative.com/404 →
Tomorrow I'm building the next thing, keep following!