Design Language tweaks
This commit is contained in:
+302
@@ -0,0 +1,302 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user