Product Page

Product Page

A drag-and-drop prototype

A drag-and-drop prototype

Overview

Overview

The product page was redesigned to align with the platform's growing scope of offerings. User research highlighted the need for a customizable product list, leading to the development of a drag-and-drop functionality. This feature allows users to effortlessly organize the product list to suit their preferences, enhancing personalization and overall usability.

The product page was redesigned to align with the platform's growing scope of offerings. User research highlighted the need for a customizable product list, leading to the development of a drag-and-drop functionality. This feature allows users to effortlessly organize the product list to suit their preferences, enhancing personalization and overall usability.

Screens

Screens

Here are three key interface states:

  • the initial view of the product page, showcasing three customizable slots where products can be added or removed


  • a state with one customizable slot left unfilled, emphasizing the flexibility of the layout


  • An interaction state demonstrating a drag-and-drop action, with a product being repositioned within the customizable banner.

Here are three key interface states:

  • the initial view of the product page, showcasing three customizable slots where products can be added or removed


  • a state with one customizable slot left unfilled, emphasizing the flexibility of the layout


  • An interaction state demonstrating a drag-and-drop action, with a product being repositioned within the customizable banner.

Prototype

Prototype

Derived from the three interface states, the prototype demonstrates an interface with a drag-and-drop functionality and the ability to add or remove products.

Derived from the three interface states, the prototype demonstrates an interface with a drag-and-drop functionality and the ability to add or remove products.

Components

Components

Below are the components created for the design and prototype.

Below are the components created for the design and prototype.