--- type: planning-master project: leaguelaw title: League Law — planning master (single-file consolidation for the Adi + Rian discussion) status: DRAFT for discussion — consolidates all planning docs as of 2026-08-24; the individual files remain the working truth audience: internal — Adi · Rian · junior · Rob (PlusROI). Never client-facing. sources: design-direction.md · team-process.md · examples-shortlist.md · design-conceptualizer.md · adi-note.md · prototype.md · handoff.md --- # League Law — Planning Master One file, everything needed for the discussion. Detailed working docs stay in `.logs/planning/` and the workspace; this consolidates them so nobody has to hop between files. **Bold "DECIDE" markers** = the agenda for Rian. --- ## 1 · Where we are (2026-08-24) - Direction phase in progress, per Rian's review + reframing after the first full run. Mockup-phase work (header/hero/mega menu/CTA + zeina-branch sections) is **parked, kept, not wasted** — it returns in the mockup phase. - Done since the reset: examples research (~190 sites verified), the conceptualizer spec, a working sample of the client walkthrough, the internal team-process draft, this consolidation. - Nothing has been sent to the client. Everything client-facing awaits the internal gate. --- ## 2 · The process (internal team process, v1 draft) **Idea in one paragraph:** the client confirms a DIRECTION before anyone builds a mockup — "sedan, sports car, SUV or truck," never "comment on the rims." Direction work is deliberately unhurried and internally reviewed; the client's part is tiny, easy, early — they feel involved, never burdened. High fidelity returns at the mockup phase. Humans distill; automated parts (Claude, Scout) do the leg work. ### Roles | Who | Role | |---|---| | Rian | Collects client's stated position into the anchor doc · internal gate on all client-facing work · sets timeboxes · rules on process changes | | Adi | Comprehends the input, crafts the direction options, makes the design-judgment calls, owns what/how much to show | | Junior | Runs direction-independent prep in the background | | Rob | Owns the client channel; client-facing artifacts go through/with him | | Claude | System half: load context, draft to spec, check against the anchor, record decisions, flag drift | ### Pipeline 1. **Intake** — senior collects → anchor doc. First action of any session: read `.logs/planning/` + the anchor. The current site is measured internally but never the baseline. 2. **Direction craft** — designer, unhurried *(proposal: ~2 full days + a night to sleep on it for a League-sized project, scaled)*; **homepage only** *(proposal)*; ~3 low-fi options. In parallel, the junior runs the **obvious work** — test: *"needed no matter which option wins?"* (brand assets, broken tel: links, analytics/perf baseline, content inventory, checklist items, shot brief). 3. **Internal gate** — Rian reviews; good → client, else internal revision. 4. **Client ask** — ≤3 options · few words · <5 minutes · click-through walkthrough · via Rob's channel · one or two small questions ride along · completeness checklist as optional appendix. 5. **Confirm & record** — the choice + its assumptions in a decision record ("picked X, assuming Y"). Direction = a cheap, recorded, shared bet. 6. **Mockup phase** — high fidelity returns (option funnels per component). 7. **Measure** *(proposal)* — after launch, test the bet: tap-to-call rate, zone click-through, submissions, CWV before/after. Success metric per the anchor: matched-and-contacted, not time-on-site. ### Standing rules (binding — Rian's rulings) - **A pivot IS the check-in** — two lines to Rian (what's failing / what to try) BEFORE hours go into a replacement. Design details stay the designer's. - **Direction before mockup; fidelity by phase** — client-facing direction work is low-fi and deliberately unfinished; the replica is internal only. - **Anchor on the client's written input**, never the current site. - **Client effort:** small, easy, early, and theirs (≈3 options, short wording, minutes, real involvement). - **File discipline:** served prototypes in `wp-content/prototype/` · working versions in `prototyping/` · temp in the scratchpad · `adi-note.md` + `prototype.md` binding reading. ### Proposals awaiting Rian's OK — **DECIDE (1–5)** 1. Cadence (~2 days + sleep, scaled) and homepage-only scope for direction. 2. The junior's background lane with the "needed-regardless?" test. 3. Measure step + decision records with assumptions. 4. Art/system split: automate the system half (intake, checklists, search, scoring, drafting, records); designer time and client attention go to the judgment half; hand-off points explicit. Even the art half has a systematic intake: the brand-inputs checklist (brand guide — or create one; logo; social; YouTube; office interior/exterior; print; photography plans; optional archive.org history glance; analytics device split). 5. Our own **website-type completeness checklists** (start: "law firm website" — team/service/location pages + indexes, FAQ + schema, privacy, disclaimers, reviews, careers, tap-to-call, blog index, performance bar…): examples inform TASTE; the checklist guarantees COMPLETENESS; neither depends on other websites. --- ## 3 · The anchor (client's stated direction — from Darren's email) Four hard criteria: **contact at top** (phone at real size, tap-to-call) · **practice areas immediately clickable** ("yes that's my issue") · **no hero imagery** (his words: "large expansive introductory images and videos… Rocky Mountains… orcas") · **modern but not showy**. Organising idea: **a league — teams of legal professionals**. Distinctiveness must come from information design, not decoration. The client himself asked for **examples he can rank before design starts**. Open items in the anchor: which phone number leads (six offices) · how the league idea is expressed without a sports metaphor · zone depth (5 areas over ~30 sub-pages) · who signs off. **Photography tension — DECIDE (6):** Darren's ban names *expansive/scenery*; he is personally investing in people/office photography (October–November shoot). The distilled rule says "no hero imagery" flat. Tested: an 80vh half-hero — rejected internally (scroll is easy; partial reveal buys nothing). Sharper formulation for the client, since our sticky nav + mega menus already give instant practice-area access on every page: > "Your practice areas are always one click away in the menu bar. Given that — > should the front of the homepage be your new photography, or the > practice-area zones themselves?" Proposal: let the walkthrough ask him (a small step-5 question), rather than us hard-deciding either way. Caveat honestly noted: his "clickable zones" mental image is probably page tiles, not nav links. --- ## 4 · Examples research (done; internal) ~150 law sites + ~40 non-law sites checked, every claim from a live fetch; law finalists rendered in headless Chrome (screenshots in `prototyping/examples-shots/`). **Headline finding:** the triage-first / no-hero law homepage is genuinely rare — every BC/Island regional firm checked runs a scenic hero; "best law website" galleries are ~95% photo/video heroes. The clean exemplars are government portals and legal-info nonprofits. **That rarity is the differentiation argument.** **Recommended deck (5 + 2, before the re-cut):** armstronglegal.com.au (the near-literal match: phone top-right, practice tiles first, no banner — also GTmetrix A / LCP 642ms / CLS 0, and a sticky mobile Call/Email bar) · co-oplegalservices.co.uk · usa.gov · clicklaw.bc.ca · hornecoupar.com (Victoria estates firm — the local, text-first tone reference) · bookends: rayslawoffice.com (too plain) / cagoldberglaw.com (too styled) — both pass the functional rules, so ranking them isolates taste. **Rian's calibration (2026-08-21): 5 is too many — maybe 3. DECIDE (7):** which ~3 survive, and do the bookends stay (or fold one in)? Current thinking: the client deck becomes *fewer reference sites, more "pick your layout"* — the references become our research, folded into the options. --- ## 5 · The client ask (conceptualizer — spec + working sample) Format proven by Rian's own PMG walkthrough (one self-contained HTML, ~1.2KB JS, steps + visuals, almost no reading). **Working sample exists:** `wp-content/prototype/direction.html` (INTERNAL) — 5 steps: 1. *What we heard* — Darren's four rules, visually, in his own words. 2–4. *Option 1 · The Front Desk* (phone-first + five doors) · *Option 2 · The Hive* (practice areas as honeycomb cells, one cell = the phone) · *Option 3 · The Teams* (each practice area a team with faces). All pencil- style, each with a mobile sketch incl. sticky Call/Email bar, each with one "you'd be choosing…" line. 5. *Your turn* — pick + free comment + two small questions + optional checklist appendix. **DECIDE (8):** step shape OK? Which capture — v0 (reply in the email thread; zero mechanics) or v1 (Scout: options as materials in the existing League project where Darren is already lead; anchored comments + rollup)? **DECIDE (9):** the timebox for this push. --- ## 6 · Designer's inputs worth carrying (from adi-note.md, condensed) - **Brand:** keep Raleway/Open Sans · #423C37 / #EF6D3E / #46ADC8 · off-white never #FFF · the hexagon is *their shape* (office, car, print, Facebook) — hive as structure, not ornament. Build the developer brand guide. - **Mobile:** ~half of users are on phones (verify League's own GA split) — Armstrong's sticky bottom Call/Email bar is the mobile answer to "contact in your face"; fix the 6/13 broken tel: links either way. - **Inner pages:** title areas that work on emotion, not reading — contact + CTA + one emotionally-chosen image (Armstrong's Family Law page: a child); many visitors are not readers — they're on emotion, click, and want to talk to a human. - **Local familiarity:** "oh, I know that place" lowers the barrier to calling — the new office faces the courthouse; place-as-recognition, not scenery-as-decoration. - **Photography direction for November:** consistent welcoming expressions (smile > neutral > stern); optionally two expressions per person (smile + calm neutral) so pages can match the visitor's situation; placeholders double as the shot brief; photos run FREE — UI never sits on photography (overlays force the old site's grayscale/vignette tax). - **Performance:** fast is part of "wonderful work" (Armstrong: GTmetrix A) — belongs on the completeness checklist and constrains direction (a video hero can't be fast). Current site: ~50 scripts on the homepage; baseline measurement is an intake item. - **Direction ≠ validation:** a confirmed direction is a hypothesis until measured — hence decision records + the Measure step. --- ## 7 · The agenda (all DECIDE markers in one place) 1–5. The five process proposals (§2). 6. Photography / half-hero — let the walkthrough ask Darren? (§3) 7. The deck re-cut to ~3 + bookends' fate. (§4) 8. Walkthrough shape + capture (thread vs Scout). (§5) 9. The timebox. (§5) --- *Files behind this doc: anchor `design-direction.md` · process `team-process.md` · research `examples-shortlist.md` · spec `design-conceptualizer.md` · sample `wp-content/prototype/direction.html` · designer's notes `adi-note.md` · distillation `prototype.md` · state `handoff.md`.*