General Info

We are redesigning our Product Page to create a more user-friendly and modern experience. The goal is to improve interactivity, update the visual design, and streamline functionality for better user engagement. Key focus areas include enhancing the product interaction features, improving the carousel design, adding motion elements, and refining how users engage with brand information and product details.

Changes

Updated Favourite button design with star icon and motion effects
Improved product favouriting for logged-in users directly within the carousels
Toggleable Description and Details sections for in-stock products, with both sections open by default
Updated contact options with “Contact Us” icons for email and video call
2-product carousel with links to brand page/similar items to get the user to browse saclab.com
Increased product image size, maintaining the hover zoom effect
Moved the arrows of the image container
Enhanced reservation system, showing reservation status and dynamic buttons based on user interaction

User Story

As a customer viewing a product page, I can easily interact with the product features like favouriting, view brand details, and see an enhanced product image. I can also reserve a product and get clear feedback on the reservation status. The new design allows me to navigate through product details and descriptions more seamlessly and interact with CTAs in carousels for related products.

Visual design

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

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

Prototype Desktop https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6458-6162&node-type=FRAME&t=F7nGhsMRMaVC57ls-1&scaling=scale-down&content-scaling=fixed&page-id=1279%3A9621&starting-point-node-id=6458%3A6162&show-proto-sidebar=1

Prototype Mobile https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6459-11305&node-type=CANVAS&t=vF9o50nynHuWgaUu-0&scaling=scale-down&content-scaling=fixed&page-id=1278%3A9196&starting-point-node-id=6459%3A11305&show-proto-sidebar=1

	Acceptance Criteria	Screenshots
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)