01

Scenario: Display password rules on the register popup window

Given: I am on the registration popup window

When I click on the password input field

Then I should see a list of password rules that include (similar to when the user wants to change password):

AND all password interaction should follow the rules as outlined in the "Story 10.1.2. My account settings Redesign" document available at: Story 10.1.2. My account settings Redesign

Figma: https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?page-id=7940%3A19953&node-id=7940-19971&node-type=frame&viewport=711%2C705%2C0.66&t=wgq4f9JYIURq5rT6-1&scaling=min-zoom&content-scaling=fixed

Video:

02

Scenario: Adjust spacing and margin in the register popup window so it fits with the new 4-grid rule

When I am on the registration popup window

Then the spacing between form fields should follow the updated design guidelines (24px)

And the margins of the popup should follow the updated design guidelines (36px)

01

Scenario: Display 3 dots to indicate product image gallery

When the user is on the pages with a product feed including but not limited to the following pages:

1. saclac.com/bags

2. brand pages e.g https://saclab.com/brands/bottega_veneta/

3. Best selling pages e.g https://saclab.com/brands/chanel/?brand%5B%5D=chanel&model%5B%5D=timeless&in-stock=0

4. Pages with Landing page template

e.g https://saclab.com/designer-summer-bags/

Then 3 dots are displayed on in-stock product images to indicate the gallery

02

Scenario: Swipe right to view the next product image

Given the user is on the product feed

When the user swipes right on a product image

Then the next image in the product’s photo gallery is displayed

And the highlighted dot indicator moves to the next dot

And the transition animation matches the animation in the screen recording =>

02.1

Given: The product carousel contains a video

When: The user swipes left or right

Then: The video is excluded from the swipe functionality

03

Given the user is viewing the last image in the gallery on the product feed

When the user swipes right

Then the first image in the gallery is displayed And the dot indicator moves back to the first dot

04

Scenario: Swipe left to view the previous product image Given the user is on the product feed

When the user swipes left on a product image

Then the previous image in the product’s photo gallery is displayed

And the highlighted dot indicator moves to the previous dot And the transition animation matches the animation in the screen recording

05

Scenario: Tapping on a product image takes user to product details page

Given the user is on the product feed

When the user taps on a product image

Then the user is taken to the product details page (function already exists)

01

The overall design should follow the new UI style guide, including adhering to the 4-point grid rule.

02

The black button “add to bag” should be removed from the product page.

03

The color #191A1E (brand color) should be used instead of #000000 for design elements.

04

A drop shadow should be added to the product images to make them appear clickable.

05

Given: the user is browsing on a mobile device

When: the user is on the below pages:

1. saclac.com/bags

2. brand pages e.g https://saclab.com/brands/bottega_veneta/

3. Best selling pages e.g https://saclab.com/brands/chanel/?brand%5B%5D=chanel&model%5B%5D=timeless&in-stock=0

4. Pages with Landing page template

e.g https://saclab.com/designer-summer-bags/

Then: The page layout should follow the 4-point grid rule with updated margin and gutter to the product feed

AND the black "Add to Bag" button is removed

And the color #191A1E is used instead of #000000 for all design elements

And a drop shadow is added to the product images to make them appear clickable

01

Scenario: Blocking next-day pick-up when booking after 1:30 PM

Given the user is booking a pick-up and the current time is after 1:30 PM

Then the next day should be blocked on the calendar window And the user should not be able to select it.

(let’s say it’s monday the 7th at 14:00, I’m booking a pickup => the 8th should be blocked)

02

Scenario: Blocking Monday pick-up when booking on the weekend

Given the user is booking a pick-up and today is Friday after 3 PM, Saturday, or Sunday,
Then Monday should be blocked on the calendar window,
And the user should not be able to select it.

01

Scenario: Display loading sign for ‘Buy Now’ button on product page

Given: the user is on a product page eg https://saclab.com/bags/hermes-constance-24-box-bleu-saphir/

When the user clicks the "Buy Now" button and the action takes more than 1 second

Then the loading sign is displayed in the centered of the window And the background is blurred (similar to SYB page)

02

Scenario: Display loading sign when deleting a product from the small cart window

Given the user has a product in the small cart window

When the user clicks the cross icon to delete a product

And the action takes more than 1 second

Then the loading sign is displayed in the centered of the window And the background is blurred (similar to SYB page)

03

Scenario: Display loading sign when checking out from the small cart window

Given the user has items in the small cart window When the user clicks the "Checkout" button And the action takes more than 1 second

Then the loading sign is displayed in the centered of the window And the background is blurred (similar to SYB page)

04

Scenario: Display loading sign during checkout actions

Given the user is on the checkout page

When the user performs an action that requires loading (e.g., updating cart, adding leather care kit, clicking "Continue Shopping," or placing the order) And the action takes more than 1 second

Then the loading sign is displayed in the centered of the window And the background is blurred (similar to SYB page)