Building a UX rulebook for the app from expert YouTube channels
- nng-youtube/
- mizko-youtube/
- docs/handover/2026-07-29-ux-ui-playbook.md
- C:\Users\61479\.claude\skills\ux-ui
What you're doing and why
Great apps aren't designed from taste — they're designed from tested rules. Two YouTube channels publish those rules for free: Nielsen Norman Group (the research organization that literally invented the UX audit) and Mizko (a working designer who audits real products and measures conversions). We scraped both channels, distilled them into a UX playbook matched to our app's three surfaces (your admin dashboard, the renter portal for tradespeople on phones, and the public sales pages), and turned it into a reusable skill so every future build or review applies the rules automatically instead of re-deriving them.
The exact steps
- Pick channels that match your PRODUCT, not just your topic: a research-authority channel (rules that survive without video) plus a practitioner channel (real audits, real experiments). Skip channels whose value is purely visual — craft shown on screen doesn't survive transcription (that's why DesignCourse was skipped).
- Scrape captions with the same resumable pipeline used for the SEO channels, but publish a PRIORITY LIST first (application-relevant titles) when the channel is large — YouTube throttles bulk caption downloads, and the priority list keeps the good 25% flowing.
- Clean into transcripts, batch by topic (dashboards, forms, navigation, mobile, accessibility…), and read the product-relevant core.
- Write the playbook with the same honesty as always: what's covered, what's skipped, and a contradiction ledger against your own locked specs (ours: the typography and color spec docs — they still win every conflict).
- Fold the playbook into a reusable skill: a lean SKILL.md (when to use + the audit procedure + rule summaries), a design-rules reference, and an audit workbook (the 10 heuristics checklist + issue-log format).
What it looked like for us
NN/g: 1,036 videos catalogued, 430 transcribed (~420k words) after prioritizing the 241 application-relevant titles. Mizko: 183 → 178 transcripts. Headline rules captured: hidden navigation cuts content discoverability to 54% vs 77–80% visible (desktop shows its links); bar charts beat pie charts because humans compare length, not angle; keep context visible in complex apps (resist modals/wizards — the app is the user's external memory); preserve user input on errors and never validate prematurely; empty states must teach and route, never sit blank; and Mizko's measured experiment that a lead-gen form with personalized qualifying questions converts up to ~30% while bare name/email/phone fields underperform — directly relevant to our renter-facing forms. The audit procedure itself (3–5 independent evaluators, one task at a time, two passes, severity-ranked issue list) is now our standing UX-audit SOP.
Gotchas
- YouTube throttles bulk caption downloads hard. The first pass is fast, then it crawls. Priority-list-first turns a hopeless 1,036-video grind into a same-day job. Some videos simply have no captions (Fitts's Law, F-Pattern) — note them and move on.
- Caption files come in multiple language tracks (.en, .en-en, .en-orig, plus auto-translate junk like en-de). Pick the best English track per video or you silently transcribe only the officially-subtitled minority (we got 205 before the fix, 430 after).
- Durations can be "?" in flat listings — the cleaner must tolerate them or it crashes.
- Bucket titles lie. Podcast episodes about research careers land in "dashboards" if your keyword filter is loose — batch titles are a reading guide, not a verdict.
- A rules channel and an audit channel answer different questions. NN/g tells you WHY (humans compare length, not angle); Mizko tells you WHAT HAPPENED (qualifying questions converted ~30%). You want both before you change a screen.