View the original post
An account of the UX process followed by grofers in redesigning product listing pages of grocery app to accommodate general merchandise
The mobile platform grofers is operating in about 28 cities in India with more than 15,000 products available for sale, distributed into over 110 distinct categories. These categories include both grocery and general merchandise (GM).
Product listing pages (PLP) or category pages are pages on the app that display the items that are available for sale in store. User experience of PLP is as important to e-commerce apps, as visual merchandising is to retail stores. These pages are most likely where shoppers will be first introduced to products.
In grofers we had more than 12000 items in GM categories. Though users showed interest in them, they were not purchasing these items. Narrow range of assortment as compared to other platforms was considered the primary reason of low user penetration, but adding assortment did not make any significant changes.
Going deep into the problem, we identified that users were unable to find the necessary information required to make buying decisions in product listing pages.
The PLP in grofers had information about each product grouped in to separate product cards. The purpose of product cards is to allow users to easily and accurately determine which products to investigate further. Product cards lead to product detail pages (PDP) where users can find detailed information about each product in the listing.
Though users checked out PLP of GM categories they did not further explore the product detail pages of the products.
Abbreviations used in this article:
- PLP- Product listing page(s)
- PDP- Product detail page(s)
- GM- General merchandise
Heuristic evaluation of contents in PLP
Users select or reject products in PLP based on the information available about each item in the product cards. Manner in which information is displayed is as important as having it in the first place. We did some market research and listed information shown in GM product listing pages of most popular apps which were not displayed on grofers’ listing pages.
Features that grofers did not display on PLP:
- Wishlist feature
- Bank offers & product offers
- Variants (Colour, design, etc)
What we know from the past
The design of product cards on our app were identical across categories irrespective of them being grocery or GM. However, we knew from former user research that shopping behaviour of same users vary across categories.
For instance, consider the example of purchasing grocery staples. While purchasing staples, most users have a brand preference and would prefer products that they have been using and already trust. Hence they just have to skim through PLP to find the items they usually buy and add them. In this use case the decision is mostly made by skimming through the product images and names. Users wouldn’t require any additional information to make the choice.
In case of GM, same users would want to know more about products before buying because the products are new to them and they are unsure of quality. Also mostly GM purchases are one time purchases. GM buying behaviour had to be closely studied to understand what kind information users were looking for while exploring the listing page.
Formulating the unknowns
We formed a few questions to be answered through user research:
- What kind of information about the product do users expect in PLP?
- How important is the size of image in product cards?
- How do users shortlist items in the app?
- How significant are product names for user?
- At what point of user journey would users look for ratings and their count?
- Does delivery time play a major role in user’s choice of products to purchase?
User research: Understanding delights and pain points in the buying journey
Many of our users are non tech savvy and grofers might be the only application that they’re familiar with. Hence, standard and fancy components which work for most other applications might not necessarily work for many of our users.
We reached out to a few users who had explored GM product listing pages recently on grofers for a qualitative analysis of user experience in PLP. We closely inspected the walk-throughs of tasks performed by users in PLP of grofers and a few competitor apps . In addition to this, we conducted follow-up interviews with same users to empathise by understanding the pain points, opportunities and delight factors.
There are three important phases in a users buying journey:
Although there are three discrete phases in buying journey, customers go through them in a staggered, non-linear fashion. They might very well start searching for a product, go through some options in the listing, then give up halfway after being distracted by a WhatsApp message or app notifications.
PLP assumes a very important role in consideration phase. This is where users gets to skim through products, compare and shortlist items based on their requirements.
Insights from user research
Through this research, it was safe to conclude that product information required by users in consideration phase include:
- Vivid product image
- Brand & model
- Relevant product features (this could vary category wise)
- Product Ratings
- Pricing details
Problem areas and how they were resolved in the new design
The product images were not very visible previously. We solved the issue by curating bigger and better images.
Users had to go through the product name or PDP to know the product features in order to make a buying decision. To ease the process we added feature tags to each product card.
Feature tags would show the features or attributes unique to the product which are required by users to make the buying decision. For example in case of bed linen, features like size, colour, material, print, thread count, etc would be shown as feature tags.
Ratings and count of ratings
In the new experience product cards would only have ratings. We removed rating count from product cards since it was evident from user interviews that users found this information irrelevant in PLP and expect to find the count of ratings in PDP only. Count of ratings was hence moved to PDP to avoid unnecessary clutter in PLP.
It was difficult for users to explore products based on their features in PLP. We introduced filters in the new design to make discovery of products easier. The design process of filter feature is too elaborate and hence has not been included in this case study.
Future scope: ‘Save for later’ feature
Unlike on other apps, users shortlisted products by adding them to cart. Later to make a decision they checked PDP of the added products from cart to make a choice. Order is then placed by removing all the products other than the chosen one from cart.
Users liked to keep some products aside to purchase them later during a price drop or sale. However there were no means to do so because the only way to shortlist products was by adding them to cart. Sadly they would have to delete these products from cart to place their grocery orders which cannot be kept on hold and would end up losing the items.
This insight in the light of current user behaviour on our app pointed out to one commonly used solution; ‘Save for later’ feature. The touch point to execute the feature was cart and hence has been considered as scope for future improvement.
Impact of new PLP design
Thank you for reading! Hope you enjoyed the read. If you have any feedback or questions, feel free to contact me at firstname.lastname@example.org
My role in the project: UX designer
Anshika Garg, UX Researcher
Rajat Mudgal, Product Manager
Arjun Ajith, Front-end Engineer
Sakshi Shrivas, Back-end Engineer
The art of turning visitors to prospective customers: A UX case study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.