General Info
Objective:
The homepage redesign aims to improve screen space utilization, increase engagement, and optimize the visual structure for better usability.
Key Changes:
-
Remove SHOP/SELL Sticky CTAs
-
Gain valuable screen space by redesigning all of our blocks
-
hide yellow banner
-
add new ctas
-
update images for refreshed visuals
-
update for NavMenu
User Stories
As a visitor, I want a streamlined and engaging homepage layout so that I can browse and navigate without distractions.
As a buyer, I want more intuitive CTAs or Blocks tailored to my interests so that I can quickly find and purchase my preferred items.
As a seller, I want a clearer SELL YOUR BAG section so that I understand the selling process and feel encouraged to list my bag.
Visual Design
desktop https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=9449-12113&t=LEWqmRrSLCI1kHAC-1
mobile https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=9789-4576&t=LEWqmRrSLCI1kHAC-1
Acceptance Criteria
|
#
|
Scenario
|
Visual Reference
|
|
1
|
Given I visit the homepage on mobile
Then I should not see the SHOP/SELL sticky CTAs.
|
 |
|
2
|
Given I am on the homepage on mobile or desktop
when I look at the header area
then the standard top yellow banner “Enjoy free express shipping worldwide” should no longer be visible
But keep function existing for future use (black friday f.e.)
(already existed)
If toggled “visible” in WP backend, display yellow top banner (function already existing) on desktop and mobile
AND
Move the banner OVER the Top menu on mobile and make it non-sticky when scrolling
|
  |
|
2.1
|
Given admin toggles on the black Black Friday Banner
Then display bar on mobile and desktop
AND
Move the Black friday banner over the Top Menu on Mobile AND DESKTOP
|
|
|
3
|
Given I am on the homepage on desktop
when I view the Welcome Slider Image
then I see the redesigned version.
3.1. The Image is integrated into the Top Menu (function existing: allow admin to change mob+desk image in backend)
3.1.1 allow admin to differentiate between desktop and mobile image (function already existing)
3.2. Allow admin to adapt image, text and subtext in wp backend. (function existing)
3.2.1. allow admin from the WP backend to adapt desktop CTA text and their link. Allow admin to differentiate between desktop and mobile. (e.g. desktop “Discover Now” leads to https://saclab.com/black-designer-handbags/ , “Shop all Bags” leads to /bags) .
3.2.2 allow admin to only add 1 CTA
3.2.2 allow admin to swich between CTAs being displayed
-
on the left side
-
mid-centered
-
on the right side
3.3 When the screen size differs from the Figma design reference, do not zoom into the image to fit – maintain the original aspect ratio as in the design (see screen recording).
|
    |
|
4
|
Given I am on the homepage on mobile
when I see the Welcome Slider Image
then I see the redesigned version.
4.1 The Image is integrated into the Top Menu (function existing: allow admin to change mob+desk image in backend)
4.2 allow admin from the WP backend to adapt mobile CTAs text and their link.
4.3 allow admin to only add 1 CTA instead of 2 CTAs
4.4 allow admin to style the CTAs
4.4.1 their background color (and allow translucent background)
4.4.2 their font color
4.4.3 their border color
|
 |
|
5
|
Given I am viewing the Info List on desktop or mobile
Then I see the redesigned version (without hover text)
When I want to change the text as an admin
Then allow change of text in the WP backend (function already existing)
|
 |
|
6
|
Given I am viewing the Brand Block on mobile or desktop
Then I see the redesigned version
AND give admin the option to change the brand images
|
  |
|
7
|
Given I am viewing the Sell your bag Block on mobile or desktop
Then I see the redesigned version
And allow admin to either display the text+cta on the left or right side of the page
And give admin the option to change the image and existing design adaptations in the WP backend (function already existing)
|
  
|
|
8
|
Given I am viewing the Gift card Block on mobile or desktop
Then I see the redesigned version
And allow admin to either display the text+cta on the left or right side of the page
And give admin the option to change the image and existing design adaptations in the WP backend (function already existing)
|
 |
|
9
|
Given I am on desktop
When I hover over the top menu “Shop” or “Services”
Then I see the redesigned/resized menu popup
And the menu now expands to full screen
Visual Reference: https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=9449-12113&m=dev&scaling=scale-down&content-scaling=fixed&page-id=7934%3A9569&starting-point-node-id=9449%3A12113&show-proto-sidebar=1
|
|
|
10
|
Scenario: Activation and behavior of the white header variant
Given I am logged in as an administrator
And I am on the “Header Settings” or similar in the WordPress backend
When I choose “Header Color” → “White” and save
Then on page load the front-end header renders in the white style. I can switch back to black if I want.
When the visitor scrolls down past the defined trigger point (e.g. 50px)
Then the header background smoothly fades from white into the standard black header within 0.3s
And the logo and menu links switch to their black-header variants
When the visitor scrolls back up above the trigger point
Then the header background smoothly fades back to white within 0.3s
And the logo and menu links switch back to their white-header variants
And on tablet and mobile with the white header active
Then the header displays the white variant
And the same scroll-triggered fade to black and back still applies
|
 
|
