# Designer notes — pinned comments for the homepage designs (home_v1 … home_v6)

*Written 2026-08-31. Revised the same day for the prototyper app's **version
switching**. Each note = a **title** + **one short sentence**, written in the
designer's voice to the client. Pin numbers give a guided reading order
(top → bottom). Keep titles as written — they double as a checklist of what
the client has seen.*

---

## How the app changes the plan

The prototyper (Adi's Proto Preview → easel) holds **one screen, "Homepage",
with six options**. The client moves between them with the breadcrumb option
dropdown, the toolbar prev/next arrows, or the big chevrons over the design —
so all six are one continuous experience, not six links in an email.

Four mechanics drive everything below:

1. **Pins belong to one screen+option.** The Feedback panel says *"Pins for
   current layout."* Nothing is inherited — a pin written once shows on one
   option only, and re-using it means re-entering it there.
2. **The body of all six pages is identical.** They differ only in the
   opening and the brand intensity. So repeating the same 15 body pins on
   every option makes the client re-read what they already know and *hides*
   the thing that actually changed.
3. **Comment Mode turns a click into a pin.** Any click on the design drops a
   numbered pin. The notes that ask the client to click or hover the design
   (Injuries, an office card, the side tab) do not work in that mode.
4. **The option list is also the approval control** — picking an option in the
   app is how the client locks a direction. The closing note must point at it.

**So the rule is: the walkthrough lives once, on the entry option; every other
option carries only what changed.**

- **Option 1 (home_v1)** gets the full walkthrough — Set A (1–15), its opening
  pin, and Z.
- **Options 2–6** get a short "you are here" pin, their own difference pins,
  and Z. No body pins.
- Nothing to repeat by hand except Z and the orientation pin — two short
  entries per option instead of fifteen.

### Two recommendations for the app side (Rian/Adi's call)

- **Order the options so each step changes ONE variable.** In `v1 v2 v3 v4 v5
  v6` order the arrows alternate quiet→hive→quiet, so the 2→3 and 4→5 steps
  change the opening *and* the brand at once, which is the hardest kind of
  comparison to hold in your head. Ordering them **v1 · v3 · v5 · v2 · v4 ·
  v6** gives the client the three openings back-to-back (the real decision),
  one switch into hive, then the same three again. The pin sets below work in
  either order; this one just reads better.
- **Name the options for the client, not for us.** The breadcrumb and the
  overview card show the option name constantly, and `home_v4` means nothing
  to the firm. Suggested names + concept badges:

| File | Option name | Badge |
|---|---|---|
| home_v1 | The Direct Answer | Quiet brand |
| home_v2 | The Direct Answer | Full hive |
| home_v3 | The Welcome Desk | Quiet brand |
| home_v4 | The Welcome Desk | Full hive |
| home_v5 | The Bold Welcome | Quiet brand |
| home_v6 | The Bold Welcome | Full hive |

---

## Set A — the walkthrough (pin these on the entry option ONLY)

**1 · Start here 👋**
Welcome! Follow the numbered notes top to bottom — they explain what each part of the design is doing for you.

**2 · The notes have an off switch** *(pin: near the toolbar)*
Switch to Play Mode to hide every note and see the page clean — and to click around it; Comment Mode is for leaving me your thoughts.

**3 · Why is everything blurry?**
Photos are blurred on purpose — real photography comes from the November shoot, so today we review layout, not pictures.

**4 · Your number, in your face** *(pin: phone, top right)*
Front and centre on every page, real size, tap-to-call — exactly as requested, never buried in a footer.

**5 · Your issue, one click** *(pin: the practice-area grid)*
Five teams, readable in two seconds, no scrolling needed — a visitor says "yes, that's my issue" and clicks.

**6 · Try this: click Injuries** *(pin: Injuries cell — Play Mode)*
In Play Mode, click it: the grid becomes that team's space — every service, real faces from the team, and a consult button for each.

**7 · A league, not a lawyer** *(pin: "Not one lawyer. A league." band)*
Your core idea as the loudest statement on the page, next to a call-back form that takes ten seconds.

**8 · The whole bench** *(pin: lawyer grid)*
All twelve lawyers close together — one team, not a row of competitors — each linking to their profile.

**9 · November photos live here** *(pin: photo strip)*
This becomes a rotating slider of the new photography — offices, teams, candids, in colour.

**10 · Facts, not claims** *(pin: Did you know)*
Every line comes straight from your record, so there's nothing here you'd ever have to defend.

**11 · Six offices, one map** *(pin: map placeholder)*
A live map replaces this sketch — every office pin will be clickable.

**12 · Found locally on Google** *(pin: "Lawyers in Victoria →" link)*
Each office links to its own city page — this is what makes each location show up in local search.

**13 · Hover an office** *(pin: any office card — Play Mode)*
A consult button appears — and the form that opens shows that city, so it feels local.

**14 · Always one click from you** *(pin: orange side tab)*
This tab follows the visitor everywhere; the form it opens shows an image matching where they clicked from.

**15 · The footer still sells** *(pin: orange footer band)*
One last chance to call or book before the page ends — no dead ends on this site.

---

## Set N — "you are here" (pin ONE of these at the top of every option except the entry one)

Short on purpose: it tells the client nothing is missing, and that only the
top of the page changed.

**N-open · Same page, new opening** *(pin: top of the design)*
Everything below the first screen is identical to the version you just saw — only the opening changed, so read the notes up here and scroll for the feel.

**N-brand · Same page, louder brand** *(pin: top of the design)*
Identical layout to its twin — this one just turns the honeycomb up; use the arrows to flip between the two and pick a temperature.

---

## Set B — opening-specific pins

### The Direct Answer (home_v1 / v2)

**A1 · No hero, on purpose** *(pin: top of the grid)*
Your direction, taken literally: no big intro image — the practice areas ARE the first screen.

### The Welcome Desk (home_v3 / v4)

**B1 · Lead capture on screen one** *(pin: the form card)*
The consultation form greets every visitor before any scrolling — warm, and it converts.

**B2 · Areas still one click away** *(pin: bottom quick-nav bar)*
The hero never costs you the triage rule — click an area here and it opens that team below.

### The Bold Welcome (home_v5 / v6)

**C1 · The firm speaks first** *(pin: the H1 headline)*
"Get our lawyers on your team" — your own line from the current site, promoted to the headline.

**C2 · Proof, not promises** *(pin: the subheading)*
160 years of combined experience and seven Best-Law-Firm wins — every word verifiable.

**C3 · A headline Google reads** *(pin: the H1 again, or nearby)*
This is the only version with a true H1 — the strongest of the three for search engines.

---

## Set C — brand intensity (pin only on the full-hive options)

**H1 · Full hive** *(pin: header hexagon watermark)*
Same page, louder brand — the honeycomb lives in the header, footer and menus here.

**H2 · Quiet vs. hive is your call** *(pin: footer hive)*
Use the arrows at the top to flip straight back to the quiet twin — same scroll position, same page, only the brand changes.

---

## Closing pin (last pin on every option)

**Z · Two decisions, that's all**
Pick an opening (Direct Answer / Welcome Desk / Bold Welcome) and a brand level (quiet / full hive) — tick your choice in the option list and everything else is already built and identical.

---

### Version map (which pins go where)

Assumes the client enters on the first option. If the order changes, the
walkthrough moves with whichever option is first.

| Option | Pin set | Pins to enter |
|---|---|---|
| home_v1 *(entry)* | 1–15 + A1 + Z | 17 |
| home_v2 | N-brand + H1 + H2 + Z | 4 |
| home_v3 | N-open + B1 + B2 + Z | 4 |
| home_v4 | N-brand + H1 + H2 + Z | 4 |
| home_v5 | N-open + C1 + C2 + C3 + B2 + Z | 6 |
| home_v6 | N-brand + H1 + H2 + Z | 4 |

**39 pins total, 17 of them on the entry option** — down from 67 in the
pre-switcher plan, with no loss of anything the client hasn't already read.

---

### What changed on 2026-08-31, and why

Revised after the prototyper gained version jumping. Five changes:

1. **The body walkthrough is no longer repeated on v3 and v5.** With the
   switcher the six options are one flow; a client who has read pins 1–15 on
   the entry option should meet only differences afterwards. Set N replaces
   the repeat.
2. **New pin 2 (Play Mode), and pins 6 and 13 now name it.** In Comment Mode a
   click on the design anchors a pin instead of triggering the interaction —
   the old "click Injuries" and "hover an office" notes would have dropped a
   stray pin, which reads to the client as the design being broken.
3. **H2 points at the arrows** instead of asking the client to go find "the
   quiet twin of this page" — that comparison is now one keypress.
4. **Z names the mechanism for deciding** — ticking the option in the list is
   what locks a direction in the app, so the closing note says so.
5. **Pins renumbered 1–15** (was 1–14) to stay contiguous after the Play Mode
   insertion. Nothing was cut; every original title survives.

Unresolved and left for Rian/Adi: the option **order** and the client-facing
option **names/badges** above — both are app-side settings, not pin content.