gw-svelte/OVERLOAD.md

OVERLOAD.md — Section flow audit & cuts

Evaluating each section of the Goodwalk homepage against one question: does this section move a researching dog owner closer to booking, or does it just take up scroll?

Scope: src/routes/+page.svelte (the homepage). Findings drawn from reading the actual section components and copy.

---

The current sequence

1. Header
2. HeroSection         ── hook + primary CTA
3. ValuesSection       ── photo gallery + before/after + values points  (3 sub-blocks)
4. ServicesSection     ── service grid
5. HowItWorksSection   ── 3-4 step process
6. TestimonialsSection ── reviews
7. FounderStorySection ── 4 paragraphs + 2 CTAs + portrait
8. InfoSection         ── locations + hours + FAQ  (2 sub-blocks)
9. BookingSection      ── lead form (THE conversion target)
10. InstagramSection   ── follow CTA
11. Footer

9 content sections, but really 13+ sub-blocks once you unpack Values (3), FounderStory (dense), and Info (2). The booking form sits 8th in sequence — a user who's "sold" by Testimonials still has to scroll through two more sections before they can ask to book.

---

Section-by-section verdict

1. HeroSection — KEEP as-is

The hero is doing its job: photographic hook, headline, primary "Book a walk" CTA, Google trust chip, three subtitle proof chips. This is the only section a 5-second-attention user actually sees, and the primary CTA + Google rating are in it.

One nit: the seoHeading (<h2> below <h1>) is yellow Unbounded at 18px on green. Reads to humans as a subtitle but ships as an H2 for SEO. Fine, but a careful eye spots it as "two headings of equal importance" — that's why mobile bumps it to 15px to quiet it. Acceptable trade-off.

Verdict: earns its place outright.

---

2. ValuesSection — TRIM AGGRESSIVELY

This is the worst offender for overload. It's three sections stacked under one <section id="values">:

Sub-block	Content	Job
Photo gallery	5 client dog photos with names	Visual proof, decorative
Before/after contrast	Two cells: "Without the right routine" vs "With Goodwalk" + bullets each	Emotional pitch
Values points	6 icon cards	Rational claims

That's three different rhetorical moves — photographic warmth → emotional contrast → rational checklist — packed into one section. The user is asked to switch modes twice within ~1500px of scrolling.

Friction created:

• Photo gallery is the third visual moment in 1500px of page (after hero photo and any micro-imagery in the hero chips). It doesn't add social proof — Testimonials at section 6 will do that with quotes + faces. It's redundant.
• Before/after is genuinely the strongest copy on the page. That's the section that earns its place. The yellow "With Goodwalk" cell carries the brand-emotional payload of the homepage in two short paragraphs.
• Values points are claims the FounderStory section will later repeat ("Little groups, never a crowded van" / "The same friendly face at the door"). Duplicate.

Proposal:

• Cut the photo gallery from this section entirely. Move it to a thin band under the hero (or kill it; Testimonials photos cover the same emotional ground).
• Keep the before/after contrast as the entire section. Rename id="values" → id="why-goodwalk". Make it shorter (drop "What we stand for" subheader and the 6-point grid).
• Either kill the values points OR collapse them into a 3-icon strip embedded inside the Hero or Services section as inline reassurance.

Cognitive load saved: ~50% reduction in section height. The strongest copy gets isolated. The user reaches Services faster.

---

3. ServicesSection — KEEP, MAYBE PROMOTE

Services answers the question the user came to the site asking: "what do you actually offer and what does it cost?" In local-services SEO research, this is the highest-intent section on the page.

Currently 4th in the scroll order. Most local-service homepages put services 2nd or 3rd because intent-driven visitors want to confirm fit before reading testimonials. Consider promoting to position 2 (immediately after Hero).

Verdict: earns its place, but order matters — see proposed reordering below.

---

4. HowItWorksSection — KEEP, possibly MERGE with Services

Process clarity is a real conversion accelerator for a service that requires giving someone a key to your house. Three steps ("Book in → Meet & greet → Regular walks" or similar) reduces the perceived commitment.

Watch for: if HowItWorks duplicates the messaging in Services or FounderStory ("you'll meet Aless first"), it stops being a friction-reducer and becomes a third "trust us" pitch.

Proposal: keep as a separate section unless the steps are <3. If <3 steps, fold into a strip inside the Booking section as "what happens after you submit this form" reassurance.

Verdict: earns its place if it shows process (steps with icons), not values.

---

5. TestimonialsSection — KEEP

Social proof is the highest-converting section type in local services. Five-star reviews with names and dog photos do real work.

Watch for: card padding (36px 32px), 28px radius (just fixed to 20px). 3-up grid → 1-up on mobile is correct.

One question: how many testimonials show? If it's 6+, that's overload too. 3 is the sweet spot. 5 max.

Verdict: earns its place. May need a content trim (count of cards), not a structure change.

---

6. FounderStorySection — TRIM HARD

Currently:

• Eyebrow "A note from Aless"
• Greeting "Hi, I'm Aless."
• Heading with main + sub
• "What owners notice first" trust strip with 3 bullets
• Four paragraphs of body copy (≈ 250 words)
• Closing line in bold
• Two CTAs (email-Aless + book CTA)
• Signoff with name, tagline, portrait

This is the densest section on the page. It re-pitches values that Values + Services + HowItWorks have already pitched.

The problem: a user who reached this section is already convinced or already gone. The 250-word essay is for the still-convinced reader, but they're scrolling for the form.

Proposal:

• Cut to 2 paragraphs. Para 1: "Why I started Goodwalk." Para 2: "The Tiny Gang philosophy + sign-off."
• Remove the "What owners notice first" trust strip. It duplicates values content already on the page.
• Remove the email-Aless secondary CTA. Founder pages with two CTAs split attention. Keep only the primary booking CTA.
• Keep the portrait + signoff — that's the emotional payoff for the section's existence.

Word-count target: ≤ 120 words of body copy + signature. Reader spends 30 seconds here, not 90.

---

7. InfoSection — SPLIT + DEMOTE

This section is bundling two unrelated jobs:

Block	Content	Real job
Block 1	Suburb chips + nearby card + hours	"Do you cover my area?" — qualifying signal
Block 2	FAQ accordion	"What if X?" — friction reducer

These should not be in the same section. They serve different reader states.

Block 1 (suburbs/hours) is a qualifier — it tells the user whether to even bother with the booking form. It belongs inside or directly above the BookingSection, where it removes the "do you walk in [my suburb]" objection right at the point of conversion.

Block 2 (FAQ) is the only place to address objections like "what about wet weather," "what's your cancellation policy." It belongs after the booking form OR collapsed-by-default near the bottom of the page. FAQ before the form is friction; FAQ after the form catches the not-yet-convinced.

Proposal:

• Split InfoSection into two components.
• Move suburb chips + hours into a slim band ABOVE the BookingSection.
• Keep FAQ as a section, but move it BELOW the BookingSection (right before Instagram or Footer).

---

8. BookingSection — KEEP and PROMOTE in flow

This is the conversion target. Currently it sits 8th on a 9-section page. On mobile this is at least 6+ screens of scrolling. The sticky MobileBookBar helps, but desktop has no equivalent.

Watch: the BookingSection currently uses the card-stepper variant (saw in +page.svelte), which is a multi-step card form. Step forms convert well when the steps are short, badly when they feel like a survey. Verify the first step is radically lightweight (1 field max).

Proposal:

• Promote BookingSection to position 5 or 6 (after social proof, before founder-story-as-trust-confirmation).
• Add suburb chip band immediately above.
• Add the 3-step "how it works" strip immediately below.
• Remove redundant section padding that double-spaces it from neighbors.

---

9. InstagramSection — DEMOTE or KILL

Currently the last content section before footer. Yellow billboard (until just reverted) with a "Follow us on Instagram" CTA.

Hard question: how many homepage visitors will Goodwalk acquire by getting them to follow the Instagram instead of booking? Almost none. The Instagram link is a brand-discovery mechanism, not a conversion path. It belongs in the footer as a social icon, not as a section.

Proposal options:

Option	Effort	Trade-off
A. Kill the section. Move Instagram link to footer social icons only.	1 hour	Loses a real estate moment for users who want to lurk-research before booking.
B. Demote to a thin strip above the footer — Instagram icon + grid of 4-6 recent photos as a passive link. No yellow background.	Half day	Less in-your-face; lets visual lurkers find it.
C. Keep as-is but move ABOVE the BookingSection.	5 min	Probably worst option: yellow billboard interrupts the path to conversion.

Recommend B. A subtle Instagram strip — six recent posts, no copy, link out — gives the brand-discovery user what they want without competing with the booking CTA.

---

Header & Footer — out of scope here

Header (sticky nav + mobile menu + book CTA) is fine. Footer carries the legal/contact/social/locations real estate well after the typography pass.

---

Proposed new sequence

1. Header
2. HeroSection                                          (hook + Google trust)
3. ServicesSection                                      (PROMOTED ↑ — answers intent)
4. TestimonialsSection                                  (PROMOTED ↑ — social proof)
5. WhyGoodwalkSection (= old Values, before/after only) (TRIMMED — emotional payoff)
6. HowItWorksSection                                    (process clarity)
7. FounderStorySection                                  (TRIMMED to 120 words)
8. LocationsBand (= old Info block 1)                   (NEW slim qualifier band)
9. BookingSection                                       (PROMOTED ↑ — the conversion)
10. FaqSection (= old Info block 2)                     (catches not-yet-convinced)
11. InstagramStrip (= demoted Instagram)                (RECOMPOSED — passive)
12. Footer

Net: 10 sections instead of 9, but ~30% less total scroll height because Values lost 2 sub-blocks and FounderStory lost half its body copy.

Story arc:

1. Hook
2. Offering ("what can I get")
3. Proof ("who else gets it")
4. Promise ("what changes for my dog")
5. Process ("how does it work")
6. Trust ("who runs this")
7. Qualification ("do you cover me")
8. Action ("book")
9. Objection handling ("what if X")
10. Brand discovery ("see more")

The booking form sits 8th in the new flow vs 8th in the current flow — same numeric position, but with ~40% less scroll above it.

---

Conversion-flow analysis

Friction points in the current page

#	Issue	Impact
1	Booking form below 7 sections of content	Desktop users without sticky CTA must scroll a long way to convert.
2	FounderStory has 2 CTAs (email + book)	Splits attention at a high-conviction moment.
3	InfoSection FAQ before BookingSection	FAQ before the form makes the form feel optional. FAQ after the form catches the abandoners.
4	Values + FounderStory both run the "Tiny Gang philosophy" pitch	Diminishing returns on emotional copy.
5	InstagramSection competes with BookingSection's CTA	Section after form siphons attention from the form.
6	Values gallery + Testimonials = duplicate photographic social proof	One earns its keep; the other dilutes.

Conversion-flow wins from the proposal

Win	Mechanism
Faster to "where do I book"	Services 3rd, Booking 9th (in a shorter page).
Stronger social proof early	Testimonials at 4 instead of 6. Confidence cascades into the rest of the read.
Pre-qualification	Suburb chips immediately above the form reduce "do you walk in my area" abandon.
Single CTA per section	FounderStory loses its email link. Every emotional moment funnels to the booking form.
Objection-handling at the right place	FAQ moves below the form so it catches the hesitant, not the eager.

---

What I'd actually ship first (highest ROI)

If you only do three things from this audit:

1. Cut the Values photo gallery. 30 minutes. Removes the most redundant block and saves a screen of scroll. (Just delete the clientPhotos constant and the .values-photo-grid figure block in ValuesSection.svelte — confirmed the rest of the section stands on its own.)

2. Move suburb chips above the BookingSection. 1 hour. Pre-qualifies the lead inline at the highest-conviction moment. Best single-shot conversion-rate move on the page.

3. Trim FounderStory body copy from 4 paragraphs to 2 and remove the email-Aless CTA. 30 minutes. Restores the section's tempo. Single CTA = stronger conversion path.

Everything else (Services promotion, Instagram demotion, Info split, FAQ relocation) is good follow-up work but those three deliver the bulk of the win.

---

What NOT to cut

• Hero. Untouchable.
• Testimonials. Local services live and die on five-star reviews. Trim count if needed, never remove.
• BookingSection. It's the conversion target.
• Google trust chips in the Hero. Smallest UI on the page; biggest conversion signal.

---

Notes on implementation order

If you decide to proceed, recommended PR sequence to keep risk low:

1. PR 1 — Values cut. Photo gallery + values points removed. Section keeps the before/after contrast only. Update homepage to match new section size. Visual: -1 screen.
2. PR 2 — Founder trim. Reduce body copy to 2 paragraphs. Remove email CTA. Visual: -300px.
3. PR 3 — Info split. New <LocationsBand /> + new <FaqSection />. Update +page.svelte to render them in new positions.
4. PR 4 — Section reorder + Instagram recompose. Last because it touches +page.svelte order, has the most visual impact, and benefits from the earlier trims already being in.

Each PR is independently shippable and visually reviewable. None block the others. None require a redesign of any individual section — just structural surgery on what's bundled where.