01

Scenario: The user visits saclab.com or any of its sub-pages (except for saclab.com/sell and career pages) for the first time.

Given: The user visits saclab.com

When: After 15 seconds of browsing

Then: See the Newsletter subscribe popup with the checkbox

(function already exist, only the checkbox needs to be added and some minor design changes)

Desktop:https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?page-id=4404%3A5861&node-id=4404-5887&viewport=1319%2C264%2C0.36&t=DOzw49IzijA3z1LS-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=4404%3A5887

Mobile: https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?page-id=4404%3A6095&node-id=4404-6120&viewport=964%2C487%2C0.42&t=JMyQGKh826Y88KNy-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=4404%3A6120

02

Scenario: The user attempts to subscribe without tick the checkbox.
Given: checkbox isn’t ticked.
When: The user clicks "Subscribe".
Then: An error message is shown, prompting the user to agree privacy policy.

03

Scenario: The user validates the newsletter subscription.

Given: The user put in the correct email format and ticked the “I accept the data….” box

When: User clicks “Subscribe”

Then: User sees “Success popup”

04

Scenario: The user subscribes to the newsletter using the popup.

Given: The user has entered their email and clicked "Subscribe".

When: user confirms the subscription via email

Then: User is added to Mailchimp “SACLAB Newsletter” Audience

(function already exists)

01

01. Given: in an analytic tool (e.g GA4 and mailchimp or similar)

When: I open the “Sold-out product pages” section

Then: I can see:

02

Version A

We need to be able to filter the metrics per device (desktop, tablet, and mobile).

1. New SoldOut PP Design

   • Page Visits: Track how many visits a sold-out product page has.

   • Notify Me Button Clicks: Track how many times the “Notify Me” button is clicked.

2. Notify Me Email Function

   • Email Addresses Collected: Track how many email addresses were collected from the “Notify Me” function.

   • Transactions from Email Campaign: Track how many transactions were made from the “Notify Me” email campaign.

   • Conversion Rate: Track the conversion rate of the “Notify Me” email campaign.

   • Opening Rate: Track the opening rate of the “Notify Me” email campaign.

   • Click Rate: Track the click rate of the “Notify Me” email campaign.

3. Product Carousel Interaction

   • Browse All [Brand] Clicks: Track how many clicks the “Browse all [Brand]” button has.

   • Product Clicks in Carousel: Track how many times users click on a product within the carousel.

   • Separate between Carousel “Similar items” and “You may also like”

03

Version B

We need to be able to filter the metrics per device (desktop, tablet, and mobile).

1. New SoldOut PP Design

   • Page Visits: Track how many visits a sold-out product page has.

   • Notify Me Button Clicks: Track how many times the “Notify Me” button is clicked.

     • Separate between Button Top and Button Bottom

2. Notify Me Email Function

   • Email Addresses Collected: Track how many email addresses were collected from the “Notify Me” function.

   • Transactions from Email Campaign: Track how many transactions were made from the “Notify Me” email campaign.

   • Conversion Rate: Track the conversion rate of the “Notify Me” email campaign.

   • Opening Rate: Track the opening rate of the “Notify Me” email campaign.

   • Click Rate: Track the click rate of the “Notify Me” email campaign.

3. Product Carousel Interaction

   • Browse All [Brand] Clicks: Track how many clicks the “Browse all [Brand]” button has.

   • Product Clicks in Carousel: Track how many times users click on a product within the carousel.

   • Separate between Carousel “Similar items” and “You may also like”

01

Scenario: User Views Sold-Out Product Page with New Carousels

When: The user visits the sold-out product page (VA or VB).

Then: The user sees two new carousels: “Similar Products” and “You may also like.” that contain In-stock products

02

Scenario: Display Similar Products Carousel

Given: Carousel “Similar Products.”

When: The user visits a sold-out product page (VA or VB).

Then: Display 10 in-stock products in the carousel with the following hierarchy:

If Same:

1. Brand/Web Model/Color/Size/Material (in stock)

2. Brand/Web Model/Color/Size (in stock)

3. Brand/Web Model/Color (in stock)

4. Brand/Web Model (in stock)

5. Brand/Color (in stock)

6. Brand (in stock)
   Display Order:

   • Show all similar “1” products first.

   • If all “1” products are displayed, fill up with “2” products.

   • If all “2” products are displayed, fill up with “3” products, and so on.

Link: “Browse all [Model]” below the header leads to the Brand/Model filter-selected page of the same brand and model.

03

Scenario: Display You may Also Like Carousel

Given: Carousel “You may also like.”

When: The user visits a sold-out product page (VA or VB).

Then: Display 10 in-stock products in the carousel with the following logic:

• Positioning:

  • Same Brand/most clicked items: positions 1, 3, 5, 7, 9.

  • Same Brand/least clicked items: positions 2, 4, 6, 8, 10.

Link: Below the header leads to the Brand page.

04

Scenario: User Interaction with Carousels on Desktop

Given: Carousel “Similar Products” or carousel “You may also like” on Desktop.

When: The user interacts.

Then:

• The carousel can be swiped.

• Arrows can be used to move the products one at a time.

• The products must loop continuously.

05

Scenario: User Interaction with Carousels on Mobile

Given: Carousel “Similar Products” or carousel “You may also like” on Mobile.

When: The user interacts.

Then:

• The carousel can be swiped.

• Arrows can be used to move the products one at a time.

• The products must loop continuously, returning to the start.

01

Scenario: User Opens Notify Me PopUp

Given: A user visits a sold-out product page.

When: The user clicks on “Notify Me.”

Then: The user sees a PopUp to enter their email.

02

Scenario: User Submits Email in Notify Me PopUp

Given: A user visits a sold-out product page and the “Notify Me” PopUp is open.

When: The user adds their email and clicks on “Notify Me” within the PopUp.

Then:

• The PopUp disappears.

• The “Notify Me” button changes color and shows a bell animation.

• An email is sent: “You’re on the list for the |BName|!” (Templates detailed below).

Email Templates:

• Template EN https://us12.admin.mailchimp.com/templates/edit?id=10084758#f_folder:17913;t:files-list

  • Subject: You’re on the list for the |BName|!

  • Preview: One step closer to your dream bag.

  • Add merge Tag: Display Product Image

  • Button: SEE SIMILAR BAGS (links to the product feed with the same Brand and Model on http://saclab.com ).

• Template DE https://us12.admin.mailchimp.com/templates/edit?id=10084790#

  • Subject: Sie stehen auf der Liste für die |BName|!

  • Preview: Ihrer Traumtasche einen Schritt näher.

  • Add merge Tag: Display Product Image

  • Button: ÄHNLICHE TASCHEN ENTDECKEN (links to the product feed with the same Brand and Model on http://saclab.com ).

• Template FRhttps://us12.admin.mailchimp.com/templates/edit?id=10084802#

  • Subject: Vous êtes sur la liste pour le |BName|!

  • Preview: Un pas de plus vers le sac de vos rêves.

  • Add merge Tag: Display Product Image

  • Button: VOIR SACS SIMILAIRS (links to the product feed with the same Brand and Model on http://saclab.com ).

03

Scenario: Product Back in Stock Notification

Given: visitor has signed up via email to be notified about a specific Bag

When: Product gets back in Stock AND product is still instock at 10:30am CEST the following working day

Then: send eMail “The Wait is over … back in Stock”
AND Opt the user out of the “Notify Me” function to prevent further notifications for the same bag. The user can click “Notify Me” again if they wish to re-enroll.

Template EN https://us12.admin.mailchimp.com/templates/edit?id=10084762
Subject EN The wait is over — |BName| is back in stock.
Preview EN Make it yours before it’s gone.
Add new Merge Tag: Display Product Image
Button SHOP NOW leads to Product that is now back in Stock

Template DE https://us12.admin.mailchimp.com/templates/edit?id=10084794
Subject DE Das Warten hat ein Ende – die |BName| ist wieder verfügbar!
Preview DE Sichern Sie sich jetzt Ihre Wunschtasche.
Add new Merge Tag: Display Product Image
Button JETZT SHOPPEN leads to Product that is now back in Stock

Template FR https://us12.admin.mailchimp.com/templates/edit?id=10084806
Subject FR L’attente est terminée – |BName| est de nouveau en stock.
Preview FR Faites-le vôtre avant qu’il ne soit trop tard.
Add new Merge Tag: Display Product Image
Button ACHETEZ MAINTENANT leads to Product that is now back in Stock

04

Scenario: Product Not Back in Stock Notification After 14 Days

Given: A visitor has signed up via email to be notified about a specific bag.

When: 14 days after user clicked “Notify me” to receive email “You’re on the list for the |BName|!” AND email “The wait is over — |BName| is back in stock.” wasn’t sent before

Then: send eMail “Your favourite |BName| hasn’t returned yet”
AND Opt-Out user from “Notify Me” function

Template EN https://us12.admin.mailchimp.com/templates/edit?id=10084766
Subject EN Your favourite |BName| hasn’t returned yet
Preview EN But we’re happy to hunt it down for you… 
Add new Merge Tag: Display Product Image
Button “SHOP SIMILAR BAGS” leads to saclab.com product feed with same [Brand]+[Model]

Template DE https://us12.admin.mailchimp.com/templates/edit?id=10084798
Subject DE Ihre Lieblingstasche |BName| ist noch nicht zurückgekehrt
Preview DE Aber wir helfen Ihnen gerne, Sie zu finden…
Add new Merge Tag: Display Product Image
Button “ÄHNLICHE TASCHEN ENTDECKEN” leads to saclab.com product feed with same [Brand]+[Model]

Template FR https://us12.admin.mailchimp.com/templates/edit?id=10084810
Subject FR Votre favori |BName| n’est pas encore revenu
Preview FR Mais nous sommes heureux de le retrouver pour vous…
Add new Merge Tag: Display Product Image
Button “ACHETER DES SACS SIMILAIRES” leads to saclab.com product feed with same [Brand]+[Model]

05

More info in Story 23.5
Metrics to Track:

• Transactions: Number of sales generated.

• Conversion Rate: Percentage of users who make a purchase after clicking on the email.

• Opening Rate: Percentage of users who open the email.

• Click Rate: Percentage of users who click on links within the email.

Tracking via UTM Codes:

• Campaign Medium: Source of the email campaign.

• Template Name: Specific email template used.

• Bag SKU (if possible): Unique identifier for the product.

Reason: We aim to track potential bag sales resulting from these emails.

Then: Display the success of email links in a centralized location, preferably using Google Analytics 4 (GA4).

Note: Please include an estimation of how many hours this (04) would take to impleme

01

Scenario: Displaying version A or B of a sold-out product page

Given: a product is sold out

When: A user visits this sold-out product page.

Then: The user will randomly see different design version A or B of the product page (50/50).

• Prototype VA: Figma Prototype VA

• Prototype VB: Figma Prototype VB

Note VB: Product Image and title are clickable, for more details see Prototype.

02

Scenario: User Clicks on Brand in Product Title

Given: A user visits a sold-out product page (A or B).

When: The user clicks on the brand (in the product title).

Then: Link the user to the brand page (function already existing).

03

Scenario: User Clicks on Description or Details

Given: A user visits a sold-out product page (A or B).

When: The user clicks on "Description" or "Details."

Then: The Description or Details become visible and toggle open. The Description or Details can be toggle closed. see Prototype for Interaction

04

Scenario: User Hovers on "Notify Me" on Desktop

Given: A user visits a sold-out product page (A or B) on Desktop

When: The user hovers on "Notify Me."

Then: The animation/motion design visible in the prototype is shown.

• Animation Prototype

05

Scenario: User Hovers on "Notify Me" on Mobile

Given: A user visits a sold-out product page (A or B) on Mobile

When: The user presses on "Notify Me."

Then: The animation/motion design visible in the prototype is shown.

• https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=5431-10012&t=3Ljy6ncKednLZvWJ-1&scaling=scale-down&content-scaling=fixed&page-id=5431%3A9912&starting-point-node-id=5431%3A10012&show-proto-sidebar=1

06

Scenario: User Clicks on "Notify Me"

Given: A user visits a sold-out product page (A or B).

When: The user clicks on "Notify Me."

Then: A PopUp to enter email appears.

07

Scenario: Interaction within the PopUp with correct eMail Format

Given: The PopUp to enter email appears.

When: User enters a valid email address AND the user clicks on "Notify Me" button within the PopUp AND the user ticks the box to accept the privacy policy.

Then:

• The PopUp disappears.

• The "Notify Me" button changes color and a bell animation is shown.

• An email is sent: "You’re on the list for the |BName|!” (described in Story 23.3).

08

Scenario: Interaction within the PopUp with incorrect eMail Format

Given:
The PopUp to enter an email address appears.

When:
The user enters an incorrectly formatted email address and clicks on "Notify Me" within the PopUp.

Then:

• A message is displayed: "Please enter a valid email address." AND the textbox outside line turns red

Scenario: Interaction within the PopUp with correct eMail Format

Given:
The PopUp to enter an email address appears.

When:
The user enters an incorrectly formatted email address AND doesn’t tick the box to accept the privacy policy AND clicks on "Notify Me" within the PopUp.

Then:

• A message is displayed: "Please agree to our data privacy policy" AND the checkbox outside line turns red

09

Scenario: User Visits Sold-Out Product Page (A or B) – Contact Us Icons

Given: A user visits a sold-out product page (A or B).

Then: Icons are now only "Contact Us," with options for email or booking a virtual appointment (function already existing).

10

Scenario: User Visits Sold-Out Product Page (A or B) on Mobile

Given: A user visits a sold-out product page (A or B) on mobile.

Then: The BUY and SELL sticky buttons should be removed from the page.

11

Scenario: USPs Communicated through Text and Illustrations

Given: A user visits a sold-out product page (A or B).

Then: USPs are communicated through text and illustrations.

12

Scenario: Non-Logged In User Tries to Favorite a Sold-Out Product

Given: A non-logged in user visits a sold-out product page (A or B).

When: The non-logged in user clicks on the Favorite Star in the carousel.

Then: Open the side-panel for login/register (function already existing) and stay at the same point on the page without scrolling up.

13

Scenario: Post-Login Display and Product Favoriting

Given:
The user has successfully logged in or signed up.

When:
The user finishes the login/signup process.

Then:

• Display the s/o Product Page at the scrolling stage where the user initially started the login/signup process.

• Bag that started the LogIn/SignUp process is favourited

• Display the favourited product in the top navigation favourite icon

• Mark the Favorite Star of the bag (that started the login process via the side panel) with a black star.

14

Scenario: Logged In User Favorites a Product

Given: A logged in user visits a sold-out product page (A or B).

When: The user clicks on the star in the carousel.

Then: The star turns black and the product gets favorited (function already existing).

15

Scenario: Admin Visits Sold-Out Product Page

Given: A SACLAB admin is logged in.

When: The SACLAB admin visits a sold-out product page (A or B).

Then: The SACLAB employee sees the "Price on Saclab."

16

Scenario: Customer (Non-admin) Visits Product Page

Given: A user is not logged in OR is logged in but not a SACLAB employee (A or B).

When: The user visits a product page.

Then: The user does not see the any price here

01

Scenario: SACLAB Employee Views Product Feed

Given: A SACLAB employee is logged in.

When: The employee visits the product feed (via search, filter, or other methods).

Then: The employee sees the "Price Sold" (already existing).

02

Scenario: Non-Employee Views Product Feed

Given: A user is not logged in OR is logged in but not a SACLAB employee.

When: The user visits the product feed (via search, filter, or other methods).

Then: The user does not see the "Price Sold."

01

Given: editing a post

When: add “Table of contents” block

Then: see on the front-end part of the site the table of content

(function already exists)

02

Given: editing a page

When: add “Table of contents” block

Then: see on the front-end part of the site the table of content

01

Given: Admin panel → Pages → Add New page

When: create new page AND press publish button

Then: see on the front-end part of the site new page with the published date
Text: published on mar 12 2023
Format: 12 Mar 2023

02

Given: Admin panel → Pages → Add New page

When: change some text and media
AND press update button

Then: see on the front-end part of the site updated page with the published and updated date
Text: published on mar 12 2023 / updated on DEC 12 2023
Format: 12 Mar 2023

03

No extra work from admin should be required