Theme

Story 23.4 New Product Carousels

Written by

in

General info

We’re redesigning our Sold-Out Product Page. The goal is to slim down the page, so a user is more likely to browse similar bags below the product. Additionally, we’re going to offer a new “Notify me” email function for bags that get back in stock.

Changes:

  • Overall new design

    • Toggled Description + Details

    • New image elements

  • New “Notify me” function

  • New Carousel logics

    • Carousel “Similar Products”

    • Carousel “You may also like”

  • Price Sold on PP hidden for “normal” users

User story

As a customer I come across a sold-out Product. I’m interested in similar bags to purchase now, so I scroll down to browse, see the carousels and click on a similar in-stock bag.

Visual design:

Desktop: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=5433-22512&t=z0lXRInix8IUwKK8-1

Mobile: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=5431-9912&t=z0lXRInix8IUwKK8-1

Detailed Carousel rules:

https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=5433-26143&t=z0lXRInix8IUwKK8-1

Acceptance criteria

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

Screenshot 2024-06-24 at 20.29.27.png

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.

Screenshot 2024-07-04 at 11.19.39.png

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.

Screenshot 2024-07-04 at 11.20.08.png

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.

Carousel Desktop Recording.mov

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.

Carousel Mobile Recording.mov

Comments

Leave a Reply

More posts