# 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 (`

` below `

`) 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 `
`: | 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 `` + new ``. 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.