We put the recipe site in front of four personas — a design director, a nitpicky designer, a junior, and a CEO. Each one caught real, verified defects the others walked straight past. The lesson isn't the bugs. It's why one reviewer is never enough.
The one idea
A review is not one lens. Each persona catches a different class of defect — and the bugs that ship are the class nobody in the room was watching for.
00
The same site, four lenses — each sees a layer the others don't
Design Director3Brand & system integrity“Does this represent us — everywhere it appears?”Share preview shows no image. The site description still says “two inks, eight colors” — the retired look. The 404 uses a blue that the monochrome rulebook forbids.
Nitpicky Designer4The pixel layer“Look closer. That’s not right.”Breadcrumb reads “Soups & hot pots”; the index says “Soups & Hot Pots.” A stray “.” floats on the canelé article. Grey caption text fails contrast. Ingredients stay 2-column on a phone.
Junior Designer4Fundamentals & a11y“Wait — does this actually work for everyone?”Print a recipe from dark mode → white ink on white paper. The “gh” link says only “gh” to a screen reader. Home page has no h1. Phones download the 1600px hero.
CEO3Reach & outcome“I texted my mom a recipe and it looked broken.”Every share is imageless → a growth leak. Mobile tap targets are too small. A dead RSS feed is advertised to readers.
↓ the overlaps are safe. the gaps are where bugs ship. ↓
The blind spotPrint + SocialNo persona “owns” them by default — so a dark-mode printout and an imageless share sat live until an adversarial pass went looking.
Notice the shape: the loud, obvious surfaces (home, a recipe on a laptop) get looked at constantly. The quiet surfaces — what a printout looks like, what a link looks like when pasted into iMessage, what a screen reader announces — have no standing reviewer. That’s exactly where the worst defects here were hiding.
01
The findings, by lens
All verified against the built _site output — not guessed from the source.
Director · share
og:image is an SVG at a relative URL. Facebook / X / Slack / iMessage don’t render SVG previews and need an absolute URL — so every shared recipe shows no image, and the gorgeous hero food photos never reach anyone’s feed.
Director · brand
The meta description contradicts the site. All ~144 pages inherit “Recipes by Andrew. Two inks, eight colors.” — the retired riso identity. The rulebook now mandates “pure monochrome — no color at all.”
Director · brand
The 404 page uses #1c1cd6 blue — a live spot color on a site whose entire design law is monochrome.
Nitpicky · copy
Breadcrumb renders “Soups & hot pots.” A Liquid capitalize filter runs after the label is set and lower-cases everything but the first letter — so it disagrees with the index’s “Soups & Hot Pots.”
Nitpicky · a11y
Caption grey fails contrast in light mode.#9a9a98 (the dark-mode grey) is used on white for the photos-page slugs → ~2.8:1, under the 4.5:1 minimum.
Nitpicky · detail
A stray “.” floats as its own line on the canelé article; ingredients stay two columns at 390px, so “granulated sugar” wraps mid-column on a phone.
Junior · print
Dark-mode colors leak into print. The print stylesheet resets the page background to white but not the element ink, and forces print-color-adjust:exact — so a recipe printed from a dark-mode OS is near-white text on white paper. Recipes are the one thing this site is printed for.
Junior · a11y
The “gh” link has no accessible name and the home page has no h1 (headings start at h2) — an outline jump and a lost primary-keyword signal.
CEO · reach
Sharing is silently broken (same root as og:image), mobile tap targets on the 124-item index run ~23px tall (under the 44px guideline), and a dead RSS feed is advertised in every page head.
02
Prove you got it
Six questions. Each tests why an issue matters — not that you memorized it.
Score 0 / 6
03
Fix order — impact first
1 · ship first
Social image + description. A 1200×630 PNG at an absolute URL, per-page description, summary_large_image, and pass the recipe’s hero as its og:image. Highest reach-per-line-of-code on the list.
2 · correctness
Print legibility. Scope the dark theme to screen (or reset ink to black in the print block) and hide the hero photo when printing.
3 · quick wins
The capitalize bug, the light-mode contrast grey, the stray “.”, the 404 blue. One-line fixes each.
4 · a11y + mobile
Home h1, aria-label on gh, bigger mobile tap targets, single-column ingredients on phones, hero srcset.
5 · housekeeping
Drop the dead RSS feed link; declare jekyll-seo-tag explicitly; delete the unused classes.