279 lines
15 KiB
Markdown
279 lines
15 KiB
Markdown
# Homepage Section Flow Audit
|
|
|
|
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.
|