Product Listing Card Token

Product Listing Card Token

Crafting a user-centric Product Listing Card component for Jio Design System 2.0, optimizing product discovery and purchase journeys within Reliance Retail's diverse e-commerce ecosystem.

Crafting a user-centric Product Listing Card component for Jio Design System 2.0, optimizing product discovery and purchase journeys within Reliance Retail's diverse e-commerce ecosystem.

Crafting a user-centric Product Listing Card component for Jio Design System 2.0, optimizing product discovery and purchase journeys within Reliance Retail's diverse e-commerce ecosystem.

Project type

E-Commerce

COMPANY

Reliance Retail

Bangalore, India

Timeline

2023

January - March

Industry

Technology, B2B, D2C

Visual Design

Rapid Prototyping

Our ecosystem products

Our ecosystem products

As it was a startup, and was only launched as a beta version

Products & Brands under Reliance ecosystem include

Products & Brands under Reliance ecosystem include

Ajio, Jio.com shop, JioMart, Reliance Digital, NetMeds, NetMeds Wholesale, Tira, Reliance Jewels, Hamleys many more. We have taken into account both the existing products within our ecosystem and potential future products.

Ajio, Jio.com shop, JioMart, Reliance Digital, NetMeds, NetMeds Wholesale, Tira, Reliance Jewels, Hamleys many more. We have taken into account both the existing products within our ecosystem and potential future products.

What is a product listing card

The product listing card component aims to provide a quick overview of essential product information, enabling users to compare options efficiently.


It also aids users in making informed decisions during their ordering experience.

Problem Statement

Challenge: Design a product listing card component for the Jio Design System that is:

Versatile: Seamlessly integrates across various applications within the Jio ecosystem.

Consistent: Maintains a unified visual language for a cohesive user experience.

Usable: Provides clear information and facilitates user interaction to drive desired actions.

Attention-grabbing: Effectively captures user attention and compels them to engage with the product.

Goal

Enhance user experience (UX) on Jio e-commerce platforms by creating a standardized product listing card component that is both informative and engaging. This component will serve as a building block for future applications, ensuring consistency and ease of use across the Jio ecosystem.

Process

The process of creating a component requires careful consideration of user experience (UX) principles, consistency, accessibility, and usability.We have followed a specific set of processes to deliver a product listing card component for our Jio Design System.

Win Win for all

Efficiency:For designers, developers & other stakeholders, It will streamline the design and development process by offering pre-defined Product Card UI component and guidelines.For users, this efficiency will translate to faster loading time, quicker navigation, and smoother interactions.

Consistency & predictabilityConsistent product card component across the Jio ecosystem. This consistency helps users build familiarity with the interface, making it easier for them to navigate, understand, and use the product.When users encounter familiar patterns and behaviours throughout an application, they can predict how certain elements will work. This reduces cognitive load and increases confidence in their interactions.

Cross-platform consistencyThe product cards will play an important role in ensuring a consistent e-commerce experience across various screen sizes and device types. Users can seamlessly transition from one device to another without feeling disoriented.

Let's understand the process of making a purchase

From the initial thought or need to the final execution. Specific steps may vary depending on the type of purchase, we created a general framework as our starting point.

Research (quantitative)

Our Goal

  1. Find out the types of PLC cards that exists in the Reliance Retail ecosystem and in competitor products.in Reliance Retail ecosystem.

  2. Find out all the attributes found on the PLC card and prioritize their needs.

  3. Document micro-aspects like placement, alignments, and behaviour of the product card and it's attributes.

Step 1: Finding use-cases
We have gone through all the products in the Reliance Jio retail ecosystem and competitor products. 150+ screenshots collected.
We have shortlisted 100 use cases found in 26 brands.

Step 2: Find out attributes of PLC. Document mico aspects

Then, we made a list of all the different attributes found in the existing product listing cards. Those were: image, product name, price, variants, offer badges, wishlist CTA, add-to-cart CTA etc.We documented micro-aspects of the product cards.This process helped us• Identify product card types.• Types of attributes.• Hierarchy.• Placement of attributes.• Alignments of attributes.

Step 3: Prioritise attributes & micro-aspects

For prioritisation, we list down all the attributes found on the PLCs & number them based on occurrence.

Types of cards found:

For prioritisation, we list down all the attributes found on the PLCs & number them based on occurrence.

Some data points: From 100 (shortlisted) use-cases found in 26 brands

• From above research in 98% cases there are fixed attributes of the cards:image, product name, price and offer.• Primary CTAs are 64 time are at the bottom of content, 36 times no button used.
• Alignment used for Primary CTA: 34 times RIGHT, 19 time left, 11 centrally aligned.• 53 times hierarchy of cards have been Product name (brand name+attribute together) and then price.
• 33 time brand name, product name and price hierarchy has been used. It is mostly in fashion and fmcg brands.
• 14 times mixed hierarchy has been used.• Carts mostly have the hierarchy in brand name+attribute together and then price.

Research (qualitative)

Research (qualitative)

45+ e-commerce products & partner brands within our Jio Ecosystem cater to a diverse range of target audiences, depending on the specific products or services they offer. We organized meetings with our stakeholders from each product to gain insights into our target audience.Additionally, we examined the existing research that the teams have conducted to define our target audience

45+ e-commerce products & partner brands within our Jio Ecosystem cater to a diverse range of target audiences, depending on the specific products or services they offer. We organized meetings with our stakeholders from each product to gain insights into our target audience.Additionally, we examined the existing research that the teams have conducted to define our target audience

Our target users

Our target users

Please note that research was done for all the verticals like grocery, tech, fashion, beauty, medicine, quick commerce & others.

To keep the case study short and to the point I have shown here the whole process using "FASHION" vertical as an example.

User journey mapping

User journey mapping

Contextual Inquiry – Understanding How Users Interact with Fashion Product Listing Cards

Objective:
To gain deeper insights into real-world shopping behaviors and decision-making processes related to fashion product listing cards on e-commerce platforms.

Methodology:

  • Participants: 20 users across diverse demographics interested in fashion.

  • Approach: Contextual enquiry paired with semi-structured interviews.

  • We used scenario-based questions and adjusted our language to be more user-friendly and familiar depending on the respondent.

  • Flexibility was maintained to deviate from the script when users shared spontaneous insights.

Sample Scenario Prompt:
"Can you walk me through how you typically shop for fashion items online—starting from the moment you decide to look for something?"

Contextual Inquiry – Understanding How Users Interact with Fashion Product Listing Cards

Objective:
To gain deeper insights into real-world shopping behaviors and decision-making processes related to fashion product listing cards on e-commerce platforms.

Methodology:

  • Participants: 20 users across diverse demographics interested in fashion.

  • Approach: Contextual enquiry paired with semi-structured interviews.

  • We used scenario-based questions and adjusted our language to be more user-friendly and familiar depending on the respondent.

  • Flexibility was maintained to deviate from the script when users shared spontaneous insights.

Sample Scenario Prompt:
"Can you walk me through how you typically shop for fashion items online—starting from the moment you decide to look for something?"

Having gained an understanding of the fashion target audience, our next step was to delve into the journeys of each persona.

We transcribed interview recordings & organised our notes from user research sessions.We used FigJam to store and manage our qualitative data, ensuring it is easily accessible to all our stakeholders and well-organized.We created journeys of each persona/personas from all our verticals. This helped us in generating ideas/finding user needs to design the master PLC component.Please note that, there were existing user journeys and interview findings created by designers specific to products. We organised collaborative sessions whenever possible. Those sessions helped us a lot.


Having gained an understanding of the fashion target audience, our next step was to delve into the journeys of each persona.

We transcribed interview recordings & organised our notes from user research sessions.We used FigJam to store and manage our qualitative data, ensuring it is easily accessible to all our stakeholders and well-organized.We created journeys of each persona/personas from all our verticals. This helped us in generating ideas/finding user needs to design the master PLC component.Please note that, there were existing user journeys and interview findings created by designers specific to products. We organised collaborative sessions whenever possible. Those sessions helped us a lot.


Testing

Testing

Testing

Objectives of usability study

Objectives of usability study

• Simplify the decision-making process for users.

• Evaluate how well users understand the information presented on the product listing cards.

• Check if users can interact with the cards in an intuitive manner.

• Measure the efficiency of users in finding relevant products.

• Confirm that the product listing cards are accessible to users with various abilities and disabilities.

• Identify user preferences regarding the display of information on the cards.

• Evaluate how well the product listing cards handle errors or unexpected user actions.

• Gather feedback on user satisfaction with the overall experience of using product listing cards.

• Use the findings from usability testing to make iterative improvements to the design and functionality of the product listing cards.

Active Users (within the first month): 1,000 (67%)
Average Time Spent on App (per session): 9 minutes

Few metrics

Task Success Rate: Measure the percentage of successfully completed tasks by users, such as finding a specific product or accessing additional details. A higher task success rate indicates better usability.


Time on Task: Evaluate the average time users take to complete specific tasks related to product listing cards. Shorter times generally indicate a more efficient and user-friendly design.


Error Rate: Monitor the frequency and type of errors users encounter while interacting with the product listing cards. A lower error rate suggests better usability, as users can navigate without confusion.

Service Bookings: 800 (45% grooming, 35% pet supplies, 20% vet consultations)
Repeat Bookings: 350 (35% of users made at least one repeat booking within the first month)

Couple of examples of test findings

Example 1

Based on the findings, we have improved the visibility of the wishlist icon. We have also created a subtle micro-interaction along with heptic feedback for add to wishlist interaction.

Example 2

Based on the findings, we have proceeded with Option 1. Additionally, we have included an extra text slot in case someone wants to write the rating in textual form.

Let's Connect

Feel free to contact me in case you have any further questions. I'm available for new projects or just to chat.

Behance

Instagram

LinkedIn

Case studies

Webinar editor

Zoop -Pet Care app

Warehouse Manager

JioMart Checkout flow

© 2025 – ShubhraSalwan

Let's Connect

Feel free to contact me in case you have any further questions. I'm available for new projects or just to chat.

Behance

Instagram

LinkedIn

Case studies

Webinar editor

Zoop -Pet Care app

Warehouse Manager

JioMart Checkout flow

© 2025 – ShubhraSalwan

Let's Connect

Feel free to contact me in case you have any further questions. I'm available for new projects or just to chat.

Behance

Instagram

LinkedIn

Case studies

Webinar editor

Zoop -Pet Care app

Warehouse Manager

JioMart Checkout flow

© 2025 – ShubhraSalwan

Create a free website with Framer, the website builder loved by startups, designers and agencies.