Meesho’s earlier design was meant for entrepreneurs — after all, 15 million of them achieved financial independence through our platform 😎
However, as our users grew, so did the number of consumers buying directly from us.
This necessitated a change.
In the first part of this blog series, I outlined why our earlier design didn’t work for us, and how we approached the product listing problem.
Next up: Designing the product card.
Understanding new Indian consumers
Through user research, we identified some offline traits that affected users’ shopping behavior:
- Budget-driven, since most households run on limited income
- Affinity towards latest trends or popular products
- Intent to see more options in colours or pattern of a product
- High loyalty and trust towards specific shops/shopkeepers
- Marking products to buy later; window shopping
Channelising these trends helped us create the right information architecture for our product cards. Let’s dive in 🤿
Designing the product cards
Basic merchandising information 📝
Three things play an important role in shortlisting a product for our users:
- Looks
Users want to see the design of a product (especially for fashion categories), and visualise how it would look on them.
Having uniformity in uploaded photos is a challenge in unorganized retail space, so we adopted a square (1:1) aspect ratio for product images in our first version.
2. Cost
Cost is a primary eliminator for most of our users since they are always on a budget.
We’ve observed conversions (number of orders) go up when users realise products are being availed at lower than market prices.
Showing strikethrough pricing and price drop have always worked in e-commerce. Our suppliers run multiple offers, dropping the price significantly below MRP.
In certain cases, FOMO drives higher purchases when they see a timed deal that would expire soon.
Let’s see how the product card looks with these details:
3. Product
The current card looks minimal and neat, but what is being sold? You could easily say kurti from this image.
However, various categories of products are available on Meesho. One could easily come across a situation like this:
Are we selling a microwave or the cover?
In order to avoid such confusion, calling out the product name (example: Chumbak Yellow Microwave Cover) becomes pivotal. It provides subjective information like fabric and colour, which further helps them filter their options.
Helping users choose between products ⭐
Our returning users’ feeds are highly personalised. We had to find a way to be able to distinguish similar products in terms of quality. This reduces confusion and helps conversion.
Here’s how we eased the process:
- Using colour-coded badges to showcase average product rating and number of user reviews. Products from top-rated suppliers are also marked as ‘mtrusted’. This is to enhance user’s trust in certain stores/sellers.
- Using social proofing badges like ‘trending’, ‘bestseller’ etc that validate popularity since we know our users like to keep up with latest trends.
This helps highlight certain products over others, further simplifying the decision-making process.
Communicating variety in catalogues 👚👖
Catalogues consist of similar products that are slightly different in colour or design. For example, someone who likes the design of a kurti might not like its colour.
For those users, we need to communicate the availability of choices.
We decided to subtly show the total count of variants like ‘+5 more’, covering the least possible image area in design.
For cross-navigation of products in a catalogue, the Product Display Page (PDP) also enables users to check out other available variants.
Setting the Interactions 🕹️
Think about the layout of an Indian news channel. Between the flash cards, the ticker, and the headings, a viewer doesn’t know what to focus on.
Information overload is a real thing! Laying out all possible actions on a product could overwhelm our users, or lead to confusion — Hick’s law!
We would only incorporate wishlist and share as features to the card. Adding to Cart is a decision that happens once users have viewed product details, and would be present only on the PDP.
- Wishlisting 💛 is a primary way of shortlisting products for later, and that decision-making happens mostly based on image and price. So we position the wishlist option proximal to the image.
- On the other hand, entrepreneurs tend to share products 🔗 by reviewing other key details on offers, quality etc. So the option to share sits in context with other product-related information.
And here’s what our final product listing page on the Meesho app looks like:
Did our Grand Central become a landmark?
These design enhancements brought about significant improvements in the shopping funnel for consumers.
But don’t take my word for it — here are some numbers!
- Orders/viewer increased by 14%, because users could view more products in a given time.
- Clicks on Add to Cart increased by 17%, because the option became more discoverable with 2-step navigation.
- Efficiency of the order placing process increased by 15%, with reduction in time taken to convert users to buyers.
But not all impacts were positive. The number of shares from the listing page went slightly down as a result of the redesign.
But quantity ≠ quality.
We noticed an uptick in the quality of shares, i.e., conversion rate of the shared products now was much higher than that of earlier shares.
We’re all happy campers with these outcomes 😁
With the revamp of product-based discovery we were fairly able to provide our users with an optimum navigation and IA experience. We will continue iterating upon this in order to further enhance the user journey.
The architects behind the redesign 🧑🎨
Thanks to Tanya Batra from the Product team for helping out on problem discovery and definition, and for enabling us to launch this redesign in a short timeline of one month!
While we looked at solving the core information design problems for the B2C shift as a part of this project, we would soon publish our stories of solving merchandising issues and optimising the checkout flow. So stay tuned! 😄
If you want to join me in designing for Bharat's next billion users, head to meesho.io to check out our openings!
