303 lines
7.6 KiB
Markdown
303 lines
7.6 KiB
Markdown
# Homepage Refinement Change Log
|
|
|
|
This file tracks the conversion and design-system refinement pass applied to the Goodwalk marketing site.
|
|
|
|
The aim is not a brand reset. The aim is to preserve the current warmth and premium positioning while moving the interface toward quieter confidence.
|
|
|
|
## Goals
|
|
|
|
- improve clarity
|
|
- improve trust pacing
|
|
- reduce decision friction
|
|
- improve conversion flow
|
|
- keep the existing brand emotionally recognizable
|
|
|
|
## Implemented
|
|
|
|
### Homepage sequence
|
|
|
|
Proposed:
|
|
|
|
- move the founder story later so visitors understand the offer before the personal narrative
|
|
|
|
Implemented:
|
|
|
|
- reordered the homepage to `Hero -> Services -> How It Works -> Testimonials -> Founder -> Values -> Booking -> Info`
|
|
|
|
Files:
|
|
|
|
- `src/routes/+page.svelte`
|
|
|
|
Motive:
|
|
|
|
- improves speed of understanding
|
|
- makes the founder section reinforce trust instead of carrying early explanation
|
|
|
|
### Hero simplification
|
|
|
|
Proposed:
|
|
|
|
- reduce competing proof and CTA layers
|
|
- keep one dominant action and one quieter secondary action
|
|
|
|
Implemented:
|
|
|
|
- removed the floating pill from the rendered hero
|
|
- turned proof chips into a visible trust row
|
|
- softened the review CTA treatment
|
|
- changed the secondary CTA from a full outline button to a quieter text action
|
|
- softened the hero overlay for a calmer premium tone
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/HeroSection.svelte`
|
|
- `src/lib/styles/sections.css`
|
|
- `src/lib/styles/responsive.css`
|
|
|
|
Motive:
|
|
|
|
- clearer hierarchy
|
|
- less visual competition
|
|
- more premium restraint
|
|
|
|
### Service card decision reduction
|
|
|
|
Proposed:
|
|
|
|
- reduce the two-CTA pattern on each service card
|
|
- help users qualify the right service faster
|
|
- make the section feel like guidance toward the right care relationship, not a pricing grid
|
|
|
|
Implemented:
|
|
|
|
- added “best for” qualification copy to core services
|
|
- made the service title the detail path
|
|
- removed the explicit secondary detail CTA from the action stack
|
|
- kept one dominant CTA: `Book a Meet & Greet`
|
|
- added softer exploratory CTAs tailored to each service
|
|
- introduced a subtle featured treatment for Pack Walks as the signature Tiny Gang offer
|
|
- softened pricing so it reads as supporting information rather than the main focal point
|
|
- added a small in-card `What to expect` disclosure for progressive exploration
|
|
- rewrote service support copy to sound more experiential and more recognisably Goodwalk
|
|
- shifted the card reading pattern toward Apple-like editorial hierarchy: centred service titles, left-aligned supporting copy, left-aligned cues, and left-aligned disclosure content
|
|
- increased the presence of Goodwalk green and yellow in badges and icon treatments so the section feels more ownable
|
|
- tightened internal spacing so the left-aligned content reads more like an editorial card than a converted centred layout
|
|
- fixed the icon treatment so the icons inside the green bubbles render in Goodwalk yellow consistently
|
|
- changed the desktop card group to behave more like a connected service gateway surface, with clearer tile-level affordance toward the service pages and a separate booking action beneath
|
|
- added subtle per-card tinting so the joined desktop group still gives each service its own identity
|
|
- changed `What to expect` into a desktop popover-style disclosure so it no longer disturbs the surrounding card layout, while keeping a normal stacked disclosure on mobile
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/ServicesSection.svelte`
|
|
|
|
Motive:
|
|
|
|
- lowers micro-decision fatigue
|
|
- improves service comprehension
|
|
- keeps the cards calmer and more conversion-oriented
|
|
|
|
### Testimonials simplification
|
|
|
|
Proposed:
|
|
|
|
- replace the busier carousel treatment with calmer editorial proof
|
|
- remove decorative elements that weaken quiet confidence
|
|
|
|
Implemented:
|
|
|
|
- replaced the carousel structure with one featured testimonial plus two supporting testimonial cards
|
|
- removed arrows and the `WOOF` decorative motif
|
|
- kept the Google reviews CTA as the primary proof action
|
|
- demoted Instagram to a lower-emphasis follow-up link
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/TestimonialsSection.svelte`
|
|
|
|
Motive:
|
|
|
|
- trust should feel effortless, not performative
|
|
- calmer proof improves credibility
|
|
- simpler structure improves readability on desktop and mobile
|
|
|
|
### Founder section reframing
|
|
|
|
Proposed:
|
|
|
|
- frame the founder section around trust value instead of biography
|
|
|
|
Implemented:
|
|
|
|
- changed the kicker from `Founder story` to `Why owners trust Aless`
|
|
- adjusted the mobile supporting caption toward relationship-led care
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/FounderStorySection.svelte`
|
|
|
|
Motive:
|
|
|
|
- preserves warmth
|
|
- makes the section more conversion-relevant
|
|
|
|
### Booking step-one friction reduction
|
|
|
|
Proposed:
|
|
|
|
- make step one feel lighter
|
|
- avoid presenting general enquiry as equal-weight complexity
|
|
- reduce repeated service selection when intent is already known
|
|
|
|
Implemented:
|
|
|
|
- replaced the prominent enquiry-type radio group with lighter inline switching
|
|
- added a simpler general-enquiry alternate path
|
|
- added a locked service summary state when a service is preselected from a service card
|
|
- added a `Change` action instead of forcing the full selector immediately
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/BookingSection.svelte`
|
|
- `src/lib/styles/forms.css`
|
|
- `src/lib/styles/responsive.css`
|
|
|
|
Motive:
|
|
|
|
- lowers perceived effort
|
|
- improves continuity from service card to form
|
|
- keeps flexibility without overloading first-time visitors
|
|
|
|
### Navigation ribbon simplification
|
|
|
|
Proposed:
|
|
|
|
- reduce the ribbon from multiple simultaneous trust claims to one calm reassurance line
|
|
|
|
Implemented:
|
|
|
|
- replaced the three-part ribbon with one single message
|
|
- simplified ribbon spacing and mobile behavior
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/Header.svelte`
|
|
- `src/lib/styles/layout.css`
|
|
|
|
Motive:
|
|
|
|
- reduces visual noise
|
|
- improves header calmness
|
|
- supports the “quiet confidence” direction
|
|
|
|
### Sticky mobile CTA softening
|
|
|
|
Proposed:
|
|
|
|
- keep the mobile CTA behavior
|
|
- make the visual treatment less app-like
|
|
|
|
Implemented:
|
|
|
|
- reduced blur
|
|
- reduced shadow weight
|
|
- slightly reduced CTA scale
|
|
- softened spacing and prominence
|
|
|
|
Files:
|
|
|
|
- `src/lib/components/MobileBookBar.svelte`
|
|
|
|
Motive:
|
|
|
|
- preserves conversion utility
|
|
- reduces mobile pressure
|
|
|
|
## Proposed But Not Implemented In This Pass
|
|
|
|
### Full design-token normalization
|
|
|
|
Proposed:
|
|
|
|
- formalize card families
|
|
- normalize radius and shadow tokens site-wide
|
|
- standardize section spacing more broadly
|
|
|
|
Status:
|
|
|
|
- not fully implemented
|
|
|
|
Reason:
|
|
|
|
- requires a broader system sweep than this homepage-focused refinement pass
|
|
|
|
### Values section copy rewrite
|
|
|
|
Proposed:
|
|
|
|
- make every value explicitly outcome-led for owners
|
|
|
|
Status:
|
|
|
|
- not implemented
|
|
|
|
Reason:
|
|
|
|
- content should be reviewed carefully rather than inferred too aggressively in code
|
|
|
|
### FAQ and areas structural split
|
|
|
|
Proposed:
|
|
|
|
- separate service-area information from FAQs into clearer blocks
|
|
|
|
Status:
|
|
|
|
- not implemented
|
|
|
|
Reason:
|
|
|
|
- lower impact than upper-funnel and booking refinements
|
|
|
|
### Deeper founder copy restructuring
|
|
|
|
Proposed:
|
|
|
|
- compress narrative into shorter paragraphs and trust-led bullets
|
|
|
|
Status:
|
|
|
|
- partially implemented through framing changes only
|
|
|
|
Reason:
|
|
|
|
- needs a more deliberate copy pass
|
|
|
|
## Verification Notes
|
|
|
|
Verified in this pass:
|
|
|
|
- homepage section order
|
|
- changed component structure
|
|
- style/class consistency for edited sections
|
|
|
|
Not fully verified in this pass:
|
|
|
|
- unrestricted `npm run check`
|
|
|
|
Reason:
|
|
|
|
- previous full check attempts were interrupted by sandbox and permission-related environment issues rather than template-level errors
|
|
|
|
## Summary
|
|
|
|
This pass moves the site toward:
|
|
|
|
- calmer hierarchy
|
|
- stronger service comprehension
|
|
- better trust pacing
|
|
- lower-friction action
|
|
- a more premium and less over-instrumented feel
|
|
|
|
It does that without redesigning the brand from scratch.
|