Efficiency: Filtering out the products that do not belong to the selected subcategory can help the user save time and effort in scrolling through irrelevant products. There might be a lot of product in the subcategory as well so ideally no user will be scrolling down to get the other categories

Consistency: Showing all the products in the parent category, even if they are not relevant to the selected subcategory, can create inconsistency in the user interface.

Reference from swiggy -

⁠

RPReplay_Final1683272738.MP4

2 MB

⁠

Problem statement

The Product Listing pages for various categories on Parkplus Stores contain over 40 SKUs within each category, which makes it challenging for users to explore available products. Users must scroll down 10+ times to reach any listing page, leading to a poor user experience and reduced engagement. To enhance user satisfaction and engagement, we need to develop a subcategory feature with a horizontal carousel of subcategories as well as a collateral banner on the product listing page.

Feature Goals:

Allow users to easily navigate and find relevant products within a specific category.

Provide a clear and intuitive user interface that enhances the user experience.

Increase user engagement and satisfaction with the e-commerce app.

Users (collapsible)

User Personas:

Casual shoppers who are browsing for products

Dedicated shoppers who are looking for specific products

Users who are familiar with the app and its navigation

New users who are not familiar with the app's navigation and need guidance

Mobile users who prefer using the app on-the-go

User Segments:

Returning customers who have previously made purchases on the app

Product searchers who are looking for products in specific categories

First-time users who are exploring the app's features and functionality

Mobile shoppers who use the app to search for products while on their devices

Potential Pain Points :

Users may find it difficult to locate relevant products within specific categories due to the high number of SKUs

Solution

Existing solution : so we currently do not have a subcategory section in the Product listing pages, as in a few parent categories there aren't a lot of SKUs so we haven't addressed this as an impacting feature.

Proposed Solution : Subcategory carousel with banner

Pros and Cons of the Solution

Pros:

Improved user experience and satisfaction by providing easier navigation and context for products

Ability to highlight specific product categories and improve discoverability for users

Cons:

Potential for users to become overwhelmed with too many subcategories or options

Potential Risks:

Decreased engagement or conversion rates if the subcategory carousel is not effective or useful for users

Features:

A category section will be added to the header of the listing page.

The category section will have a horizontal carousel of subcategories to choose from. (DESIGN)

A dynamic banner will be added to the header of the listing page.

User journeys/flow diagram:

User selects a parent category from the Product listing page

User scrolls through the horizontal carousel of subcategories to explore available options

User clicks on a subcategory to filter out products mapped to that category

Functional and Non- Functional requirements:

Subcategory Carousel: The feature will include a horizontal carousel of different subcategories that are mapped to the different products (design)

Clicking on a subcategory filters out products mapped to that category and displays them on the same listing page

The banner will be added to the top-fold of the listing page.

The banner must be able to display both images and text, also the banner will be dynamic and able to be updated easily.

The banner must be able to redirect users to the corresponding product or offer page ( if applicable)

The banner and category section will be responsive and adapt to different screen sizes.

Selected Category Indication: When a user clicks on a subcategory, the icon of that subcategory will become highlighted(size of icon-bigger) to indicate the selected category.

Use cases:

Happy flow: User successfully navigates through the horizontal carousel of subcategories and filters out products mapped to the selected subcategory

Edge cases:

The user selects a subcategory with no products mapped to it: In this case, the system should not display a category that have no products mapped to it

The user selects multiple subcategories at the same time: In this case, the system should prioritize the first selected subcategory and ignore any subsequent selections. (can be implemented in the future scope)

Product Metrics

Success Metrics:

Conversion rates for users who view products within specific subcategories^

North Star Product Metrics:

Conversion rate within specific subcategories

standard metrics we're already tracking

Secondary Metrics:

Repeat rate of users who have used the subcategory feature (define use)

Revenue generated from sales within specific subcategories

Business Metrics:

Increased revenue from sales within specific subcategories

Kill Metrics:

Decreased conversion rates for users who do not use the subcategory feature

Tech systems interaction:

Interaction with backend systems for mapping products to different subcategories and filtering out products based on user selection (As we are using Magento to manage SKUs, we will need to ensure that the subcategory feature is integrated with Magento to ensure that the correct products are displayed under the subcategories. This may require additional operational processes for SKU mapping and management.)

Interaction with frontend systems for displaying subcategory carousel Mandatory data requirements:

Mapping of products to subcategories for accurate filtering

@rohanchopra

Possible new events

Subcategory selection: When the user clicks on a particular subcategory

Scope

Phase 1 Scope:

Implement a horizontal subcategory carousel on the product listing page for each parent category

Allow users to click on a subcategory and filter the product listing page to show only products within that subcategory

Include basic tracking of user interactions with the subcategory carousel (e.g. clicks, views, time spent)

Phase 2 Scope:

Add more advanced tracking and analytics to better understand user behavior and improve the effectiveness of the subcategory carousel

Allow users to select multiple sub categories

Add more customization options for the subcategory carousel, such as the ability to reorder subcategories or add new ones

Potential Risks:

Decreased engagement or conversion rates if the subcategory carousel is not effective or useful for users

Roll-out plan: This is a standard/generic rollout plan, we may not adhere to it.

Phase 1: A/B testing with limited users

Phase 2: Gradual rollout

The feature will be gradually rolled out to all users in a controlled manner.

The rollout will start with a small percentage of users and increase gradually over time.

Switch on/off: To control the rollout of the feature, a switch on/off functionality will be implemented. This will allow us to turn on the feature for a specific set of users while keeping it off for others. This will help us to control the impact of the feature and minimize any potential risks or issues.

Cases where a rollback might be required:

Major technical issues

Negative impact on user experience, if users are reporting issues with the feature, a rollback might be necessary

Negative impact on business metrics

Rollback Plan

Notify the tech team to disable the subcategory feature on the product listing page.

Revert any changes made to the frontend design and restore the original layout.

Check the database to ensure that the products are sorted and filtered correctly.

Conduct testing to ensure that the original functionality is restored and working correctly.

Notify the customer support team to inform customers about the rollback and provide assistance for any issues they may encounter.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.