01

Given the user is logged in
When they visit the "My Account Settings" page
Then the page should display the user’s name and email pre-filled in the relevant fields.

02

Given the user is in "My Account Settings,"
When the user types a new email address
Then a password confirmation field should appear below the email input.
And the system should validate if the email is correctly formatted.

03

Given the user enters an invalid email format on mobile or desktop
Then an error message "Please enter a valid email address" should be displayed.

04

Given the user enters an incorrect password during email change on mobile or desktop
When the user clicks “Save changes”
Then an error message "Invalid Password" should appear.

05

Given the user makes changes to their email or subscription preferences or First name or Last name successfully
When they save the changes
Then a success message "Your changes have been saved!" should be shown.

06

Given the change of First name or Last name or email by the user is sucessful

Then the new information gets synced to Hubspot and Airtable (function already existing)
When the email address change is successful
Then the old email gets saved in new airtable field in Table “Clients” called “previous eMail”.
When the email gets changed a second time
Then It should be added to the existing old email adress in field “previous eMail”.

07

Given the user makes changes to their email
When they save the changes
And the change is successful
Then a success message "Your changes have been saved!" should be shown.
And send email to old email adress
Template EN: https://us12.admin.mailchimp.com/templates/edit?id=10086348
Subject EN: Important: Your SACLÀB Account Email Address Has Been Changed
Preview EN: Your SACLÀB account email was changed. If you didn’t do this, contact us immediately!
Template DE: https://us12.admin.mailchimp.com/templates/edit?id=10086349
Subject DE: Wichtige Mitteilung: Ihre SACLÀB-Konto-E-Mail-Adresse wurde geändert
Preview DE: Ihre SACLÀB-Konto-E-Mail-Adresse wurde geändert. Wenn Sie das nicht waren, kontaktieren Sie uns sofort!
Template FR: https://us12.admin.mailchimp.com/templates/edit?id=10086350
Subject FR: Important: L’adresse e-mail de votre compte à SACLÀB a été modifiée
Preview FR: L’adresse e-mail de votre compte à SACLÀB a été modifiée. Si ce n’était pas vous, contactez-nous immédiatement !

And send email to new email adress
Template EN: https://us12.admin.mailchimp.com/templates/editor?id=10086353
Subject EN: Your New SACLÀB Account Email is Confirmed.
Preview EN: Your SACLÀB email has been updated. Log in to your account.
Template DE: https://us12.admin.mailchimp.com/templates/editor?id=10086354
Subject DE: Ihre neue SACLÀB-Konto-E-Mail-Adresse wurde bestätigt.
Preview DE: Ihre SACLÀB-E-Mail wurde aktualisiert. Melden Sie sich in Ihrem Konto an.
Template FR: https://us12.admin.mailchimp.com/templates/editor?id=10086355
Subject FR: Votre nouvel e-mail pour votre compte à SACLÀB a été confirmé.
Preview FR: Votre e-mail à SACLÀB a été mis à jour. Connectez-vous à votre.

08

Given the user modifies their email or subscription preferences and
When they try to navigate away without saving
Then a confirmation popup "Are you sure you want to leave this page?" should appear.

09

Given the user unticks either of the newsletter checkboxes, When the user saves the changes successfully on mobile or desktop
Then the system should unsubscribe them from the respective newsletters
And they should see a confirmation message: "Your changes have been saved!"

10

Given the user clicks the eye icon in the password field
Then the corresponding password input should toggle visibility. (function already existing)
And only the field in question should toggle, leaving the others unchanged. (function already existing in LogIn)
And “eye” icon changes (function already existing in LogIn)

11

Given the user tries to change the password
When the current password the user typed in is not correct AND The user tries to click in “New password”
Then Display Error message “Invalid password”

12

Given the user starts typing a new password
Then the password guidelines should display dynamically, updating with each character entered.
And once a requirement met (8+ characters, mix of cases, numbers, symbols), it’s guideline icon should turn green.
And once all requirements are met, the user can click into field “confirm new password”

13

Given the user starts typing a new password on mobile or desktop
When the password doesnt fulfill more than one guidline
And User tries clicking in field “Confirm new password”
Then display error message “Unsafe password, check our recommendations”

14

Given the user starts typing a new password on mobile or desktop
When the password doesnt fulfill one singular guidline (of the 4 we have)
And User tries clicking in field “Confirm new password”
Then User can’t click in field “confirm new password”
And display error message depending on which guidline is not met.
Error Messages:
1. Password must be at least 8 characters long
2. Use both upper- and lower-case letters
3. Include at least one number
4. Include at least one symbol

15

Given the user starts typing a new password on mobile or desktop
When the password is the same as the existing password
And the user clicks “change password”
Then display error message “Use a different password from your current one”

16

Given The new password fulfils all guidlines
When the user starts typing in field “confirm new password” on mobile or desktop
And the password is not the same as “new password”
Then display error message “Passwords must be identical”

17

Given the user typed in “Confirm new password” and it’s the same as “New Password”
When user clicks “Change Password” on mobile or desktop
Then display PopUp “Your password has been successfully changed!”
And send out email to customer “Your SACLAB password has been changed” (function already existing)

01

Given The user is logged in on mobile or desktop

When the user is in the “My account > My Orders" section (https://saclab.com/my-account/orders/ )
Then three orders should be displayed per page
And each order may contain multiple products

02

Given the user is in the “My account > My Orders" section (https://saclab.com/my-account/orders/ )on mobile or desktop

When: an order contains more than two items
Then only two items should be displayed initially
And a toggle button allows the user to view the remaining items
When “See more items” is clicked
Then Text changes to “See less items And toggles open, all products become visible

03

Given the user is in the “My account > My Orders" section (https://saclab.com/my-account/orders/ ) on mobile or desktop
When the user clicks on the INVOICE button
Then the invoice gets downloaded

04

Given the user is in the “My account > My Orders" section (https://saclab.com/my-account/orders/ ) on mobile or desktop
When the user clicks the VIEW ORDER button
Then the user should be redirected to the order detail page (e.g https://saclab.com/my-account/view-order/96861/ )

05

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/ ) on mobile or desktop
When the order contains a fee OR/AND discount
Then The row “fee” OR/AND “discount” is visible

06

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/ ) on mobile or desktop
When the order contains a manually added Shipping fee
Then The row “Shipping” should display the shipping fee amount

07

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/ ) on mobile or desktop
When the order does not contain a fee OR/AND discount
Then The row “fee” OR/AND “discount” is hidden

08

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/ ) on desktop
When the order only contains either SHIPPING or BILLING address
Then The block “Shipping Address” OR “Billing Address” is displayed on the “left” side of the page

09

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/ ) on MOBILE
When the order only contains either SHIPPING or BILLING address
Then The block “Shipping Address” OR “Billing Address” is displayed (see screenshot).

10

Given the user doesn’t have an order yet
When the user clicks on the BROWSE PRODUCTS button on mobile or desktop
Then the user should be redirected to https://saclab.com/bags/

11

Given the WooC Order reaches “On hold” or “Processing” once
Then the user sees the Order via “My Orders”

12

Given the WooC Order Status is “pending payment”
Then do not display the Order under “My Orders”
When the WooC Order switches from “pending payment” to “Cancelled”
Then do not display the Order under “My Orders”

13

Given the order status is Cancelled , And reached beyond “Processing” or “On Hold” or “Completed” before

Then display the payment status in “my orders” AND Order Detail Page as Cancelled (indicating the payment was not processed).

14

Given the order status is On Hold,

Then display the payment status in the “My orders” AND Order Detail Page as Awaiting Payment w font style “Medium”.(indicating the payment has not yet arrived).

15

Given the order status reaches Processing,

Then display the payment status in “My orders” AND Order Detail Page as Completed (indicating the payment has been received and processed).

And this status should also apply if a product has been returned and refunded.

16

Given the user is on the order details page on mobile or desktop

Then display the payment methods available in WooCommerce, which include:

• Direct Bank Transfer

• PayPal

• Sofort Banking

• Credit Card

• Apple Pay

• IDEAL

• Bancontact

17

Given the user sees the order in “my orders” or the order details page on mobile or desktop

When the bag doesn’t have an product picture yet (could happen if we sell a bag before it goes LIVE)

Then display “placeholder”-image instead of a product image

18

Given the user is on the "My Orders" section on mobile or desktop
Then the paging logic should work the same way as the SnS project (see Prototype:https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6399-10460&node-type=canvas&t=Tr5rfgcq4I7OB4Gz-0&scaling=scale-down&content-scaling=fixed&page-id=6393%3A7727&starting-point-node-id=6399%3A10460&show-proto-sidebar=1 )
And on desktop, the paging should be centered instead of aligned to the right

Returns

19

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/)

When: the order is within the 14-day return period,

Then: user sees RETURN ITEM button next to each returnable product

20

Given the user is on the order detail page (e.g https://saclab.com/my-account/view-order/96861/ )

When: The return period of 14 days has expired

Then: user sees RETURN ITEM disabled (blurred out and can’t be clicked)

21

Given an item in the order is within the 14-day return period,

When the user clicks the RETURN ITEM button,

Then the return form is open so the user can fill in the return request with:

1. The order number is prefilled and can’t be edited

2. The product name number is prefilled and can’t be edited

3. The pick up address is Pre-filled with the “Shipping address” and CAN be edited

4. If the “shipping address” was missing, then the “Pick-up” address will be pre-filled with “Billing address”

5. If both “shipping address” and “billing address” were missing then the Pick – up address are not pre-filled

22

Given: The user has filled in the return request form

When: The user submitted a return request

Then: An email is sent to the sales team with all the information in the return form including:

1. Buyer’s name

2. Buyer’s email address

3. Order number

4. Product name and SKU

5. Return reason:

6. Notes

7. Pick up address

Email template: https://us12.admin.mailchimp.com/templates/edit?id=10086345

23

Given: The user has filled in the return request form

When: The user submitted a return request

Then: A slack message is sent to the channel #returnstatus with all the information in the return form including:

1. Buyer’s name

2. Buyer’s email address

3. Order number

4. Product name and SKU

5. Return reason

6. Notes

7. Pick up address

24

Given: The user has filled in the return request form

When: The user submitted a return request

Then: A confirmation email is sent to the user respectively of their language

Email template:

ENG:

Subject: We received your return request

Preview: Your return label will be sent in a separated email

Mailchimp: https://us12.admin.mailchimp.com/templates/edit?id=10086346

DE

Subject: Wir haben Ihre Rücksendeanfrage erhalten.

Preview: Ihr Rücksendeetikett wird in einer separaten E-Mail gesendet.

Mailchimp: https://us12.admin.mailchimp.com/templates/edit?id=10086347

25

Given the user submitted a return request of an item,

Then display the status of the product as RETURN REQUESTED (informative and non-clickable).

26

Given the order status is manually changed to “Returned (0->1)” by the sales team,

Then display the status as RETURNED (indicating the item is in the process of being returned but not yet refunded).

27

Given the WooC order has been partially returned
Then the user doesnt see return Status for non-returned item
And sees Status for returned item as Returned

When the WooC Order of the partial return switches to “Refunded”
Then the Status of the Product switches to “refunded”

01

Given: The admin is logged into the website’s backend

When: admin is editing a POST or PAGE.

Then: can add/ edit a UI element called “toggle button”

02

Given: the admin has inserted the Toggle button,

When: they select the button settings

Then: they can specify which element (e.g., text, image, form,etc.) the button will toggle AND if this element will be shown or hidden by default

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6682-5196&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6650-2599&m=dev

03

Given: the admin is setting up the Toggle button,

When: they define the button properties,

Then: they can customize the size, font, colour and alignment of:

1. The text label (e.g “Show more”) for when the element is hidden

2. The text label (e.g “Show less”) for when the element is shown

01

Given: Admin panel → Pages → Add New page

When: create/edit page
AND add a block called “Image tiles”

Then: see the section in edit mode to adjust the settings of the block

Desktop: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6682-6260&m=dev

Mobile: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6653-3668&m=dev

02

Given: Admin panel → Posts → Add New post

When: create/edit post
AND add a block called “Image tiles”

Then: see the section in edit mode to adjust the settings of the block

03

Given: edit mode of the block “Image tiles”

When: add/edit photos
AND/ OR add text label
AND autosave each change
AND click update the page

Then: see the updated content of the block on the website

01

Given: The user has logged into their account.

When: The user navigates to the "My reservation" section.
AND The user does not have any reservation yet

Then: Display a clean, informative screen that communicates:

• A message indicating they currently have no reservations (e.g., "You currently don’t have any reservations").

• A call-to-action (CTA) button to browse products. (direct to saclab.com/bags)

Desktop: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5982&t=cSaLUUp3uPthE41M-4

Mobile: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-10242&m=dev

02

Given: The user has logged into their account.

When: The user does not have any current reservations, but they have made reservations in the past.

Then: Display a clean, informative screen that communicates:

• A message indicating they currently have no reservations (e.g., "You currently don’t have any reservations").

• A call-to-action (CTA) button to browse products.

• A section displaying their reservation history with max 4 reservations, organized with relevant details such as:

  • Date of reservation

  • Status

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5534&m=dev

Mob:https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-9686&m=dev

03

Given: The user has logged into their account.

When: The user has an active reservation, and they have made reservations in the past.

Then: Display a clean, well-organized screen that includes:

• A section highlighting the user’s active reservation with key details:

  • Reserve time left: A countdown

  • CTA “Remove” to cancel the reservation

  • CTA “Purchase” to buy the product

• A separate section for their past reservations, organized chronologically (newest → oldest).

  • Each past reservation should include:

    • Reservation date.

    • Status

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5651&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-9791&m=dev

04

Given: The user has logged into their account.

When: The user has more than four past reservations.

Then: In Past Reservations Section:

• Show up to four past reservations at a time, organized chronologically (newest to oldest).

• Each past reservation should include:

  • Reservation date and time

  • Status

• If the user has more than four past reservations:

  • Implement pagination

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5289&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-10073&m=dev

05

Given: The user has logged into their account.

When: The user has an active reservation, and have not made reservations in the past.

Then: Display a clean, well-organized screen that includes:

• A section highlighting the user’s active reservation with key details:

  • Reserve time left: A countdown

  • CTA “Remove” to cancel the reservation

  • CTA “Purchase” to buy the product

• Reservation history section: A message indicating that the user has no past reservations (e.g., "You have no previous reservations").

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-5900&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6392-10006&m=dev

01

Given the user is on mobile
Then the navigation bar height should be 52px instead of 51px

02

Given the user is on mobile
Then icons in the navigation bar should have 44px width and height And padding around the icons should be added for a larger tap area and improved usability

03

Given the user is on mobile
Then the SACLÀB logo should be reduced in size to allow for proper icon spacing

04

Given the user is on mobile
Then the “Contact” icon should no longer be visible in the navigation bar

05

Given the user is logged in and on mobile
Then the Favorite option should no longer be in the main navigation

06

Given the user has favorited a product on desktop
Then a notification bubble is displayed on top of the Favorite Icon (function already existing)
And a notification bubble is displayed next to “My wishlist” in the “My account Menu”

07

Given the user has favorited a product on mobile
Then a notification bubble should appear on top of the user icon
And a notification bubble is displayed next to “My favorites” in the “My account Menu”

08

Given the user is on mobile or desktop and has a notification (cart, favorite, or reservation)
Then the notification bubble background color should be SACLÀB Ink Black (191A1E)

09

Given the user has an active reservation on Desktop
Then display a notification bubble on the profile Icon
And display a notification bubble next to “my reservations” in the My account menu

10

Given the user has an active reservation on Mobile
Then display a notification bubble on the profile Icon
And display a notification bubble next to “my reservations” in the My account menu

11

Given the user has an active reservation AND favorited items on Mobile
Then SUM both notifications on the profile icon
(See Figma: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6688-31748&t=Tr5rfgcq4I7OB4Gz-1 )

12

Given the user has an active reservation AND favorited items on Desktop
Then Show notifications on the separate icons

13

Given the user opens the “My Account” Menu on mobile
Then The yellow Banner should be behind the my account menu AND should darken like the background

14

Given the user is LoggedIn
When the user clicks on Profile Icon on mobile
Then the close (cross) icon is displayed in the navigation bar instead of the menu itself

15

Given the user is navigating within "My Account" on mobile or desktop
Then the active page should be displayed in SACLÀB Ink Black (HEX #191A1E) and underlined
And inactive pages should be displayed in SACLÀB Greyscale (HEX #888888) and not underlined

01

Given user visits in-stock product detail page (e.g https://saclab.com/bags/hermes-rodeo-pegasus-mm-milo-bleu-saphir-black-sesame/ )
Then both the "Description" and "Details" sections should be togglable AND opened by default

When the user clicks the "Description" or "Details" toggle
Then the sections should be able to open and close (same hitbox as on SoldOut PP)

06

Given the user is on the product page
Then the Favourite button UI should include a star icon And motion design should be added for hover (desktop) and press (mobile)

02

Given the user is logged in
When the user clicks the Favourite button
Then button turns grey during loading time AND the product is marked as a favourite AND the button changes

03

Given the user is logged in
When the user clicks the Favourite icon on the product carousel
Then the product is marked as a favourite AND the icon turns black (design and function already existing on SoldOutPP)

04

Given the user is not logged in
When the user clicks the Favourite button OR icon
Then Open the side-panel for login/register and stay at the same point on the page without scrolling up. (function already existing from SoldOut PP)

05

Given the user is on the product page
When the user clicks the brand name in the product title
Then the user is redirected to the brand’s page (function already existing)

07

Given the user is on the product page
Then only the “Contact Us” icons for email and video call should be displayed (design existing on sold-outPP)

08

Given the user is on the product page
Then the USPs should be communicated using text and illustrations, matching the design on the Sold-Out product pages (design existing on sold-outPP)

09

Given the user is on the product page
Then “Similar Items” AND “You may also like” carousels should be displayed (design and function already existing on SoldOutPP)

10

Given the user is on the product page on desktop
Then The product picture container size increased to 568x568px on screen size >1400px. Existing breakpoints should also adapt the container size. Margin to image slider below have been adapted, visible in the figma.
And the image should zoom in on hover within the container (function already existing)

Suggested Container size based on figma

• 1200px – 1399px: Increase from 420px to 496px.

• 993px – 1199px: Increase from 372.67px to 468px.

• 769px – 992px: Increase from 450px to 500px.

11

Given the user is on the product page on desktop
Then arrow distance to edge of container 8px (previously 10px)

12

Given the user is on the product page on desktop
When the user clicks on the image
Then the lightbox gallery appears (function already existing)

13

Given the user is visiting a product detail page (e.g https://saclab.com/bags/hermes-rodeo-pegasus-mm-milo-bleu-saphir-black-sesame/ )
When the product is not reserved
Then the “Reserve for 24 hours” button should be visible and clickable (function already existed)

Given the product is not reserved and user is logged In
When userA clicks button to reserve the product
Then Button turns grey and unclickable during loading time
Then the “Reserve” button should no longer be visible
And userA should see a timer for the reservation (already existing)
And the “buy now” button should be visible (already existing)
And the Apple Pay Button should be visible on iOs/MacOS Safari (already existing on stage)

14

Given the user is logged in and is visiting a product detail page (e.g https://saclab.com/bags/hermes-rodeo-pegasus-mm-milo-bleu-saphir-black-sesame/ )

When: the product is reserved by another user (UserA)
Then: for userB: The “reserve” button is hidden (already existing)
And the reservation timer should be visible (already existing)
And the “buy now” is disabled and grey (already existing)
And Apple Pay button is hidden (already existing on stage)

15

Given the user is not logged in and is visiting a non-reserved product detail page (e.g https://saclab.com/bags/hermes-rodeo-pegasus-mm-milo-bleu-saphir-black-sesame/ )

When: the user click “reserve” button
Then: user is asked to log in (function already exists)