Skip to content

✨ Homepage CTA Hierarchy - Reduce excessive use of primary red buttons #4926

Description

@ssw-yakshaver

Requested by: @AntPolkanov via YakShaver.ai 🦬
cc: @AntPolkanov, @isaaclombardssw, @babakamyljanovssw, @micsblank

Hi Team!

Β Β πŸŸ₯Β Β Watch the video (2 min 29 sec)

Β Β Url from screen share: https://ssw.com.au

Pain

The ⭐ SSW Website (Dev - Next.js) homepage currently uses the primary red CTA styling too frequently across multiple sections. This reduces the visual hierarchy and weakens the emphasis of the main conversion action, which is booking a free initial call.

Update the homepage button styles so that only primary conversion actions use the filled red CTA style. Secondary actions such as "View All Services", "More Client Stories", "SSW People", and "More Events" should use a secondary outlined button style instead (black background with red border).

The "Book a Free Initial Call" CTA should remain as the primary filled red button throughout the homepage. The "Register Now" event CTA requires design review before changing, as the reporter was uncertain whether it should remain primary.

Acceptance Criteria

  1. Primary filled red CTA styling is reserved for key conversion actions on the homepage
  2. "Book a Free Initial Call" buttons remain styled as primary filled red CTAs
  3. "View All Services" uses the secondary outlined button style
  4. "More Client Stories" uses the secondary outlined button style
  5. "SSW People" section CTA uses the secondary outlined button style if it is not considered a primary conversion action
  6. "More Events" uses the secondary outlined button style
  7. Secondary outlined buttons use a black background with a red border consistent with the site design system
  8. A design decision is made and documented for whether "Register Now" should remain a primary red CTA or become secondary
  9. Homepage CTA hierarchy provides clearer visual emphasis on the main conversion action

Screenshot

Screenshot
Figure: Homepage overuses red primary CTA buttons

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status
    πŸ€·β€β™‚οΈ Needs Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions