Redesigning Product “Checkout” for the Next Billion Users

The Meesho app clocks in an average of more than 2.4 million orders every day.

There was a time, until early 2021, when most of these orders would be placed by our women entrepreneurs or resellers, who share the products on our platform with their customers via Whatsapp, Facebook etc., negotiate the price, lock the order down, and come back to Meesho app to place the order.

Our platform was optimised for this “reseller” business model as well. But as we’ve grown, we’ve seen a steady and direct consumer transactions exceed the number of transactions done via resellers.

Changing times need changing vision

It became imperative to revamp our checkout flow to efficiently serve for both direct consumers and entrepreneurs.

Here’s how we did it.

Is Checkout Funnel that Complex? 🥲

A consumer’s journey of placing an order on Meesho is dramatically different from that of a reseller.

Entrepreneur’s checkout funnel often begins on social media where they negotiate a price (Product price + Margin) and decide on mode of payment with their customer. Once that is set, they move on to the Meesho app and then place an order based on these decisions. Our checkout funnel is built such a way that its primary focus is “Payment Mode” and “Margin” and then go on to ‘Address’ and other details.

A consumer’s journey, meanwhile, starts when they like a product on our app. They then need some space and opportunity to Evaluate, Decide, Engage and Purchase the product.

So, we conducted a detailed Contextual Enquiry to understand behaviour and interaction patterns of both the user cohorts at various maturity levels. This diligent exercise helped us understand Psychological bias and trust issues consumers are facing with the existing funnel hence causing the hike in drop-off numbers.

• Asking payment method first aligns with entrepreneur mental model as the cart contents are already decided between them and their customer
• This very step made consumers uncomfortable, as they needed to check/verify their cart first, leading to ~40% drop off at cart screen

• Margin is a very, if not the most crucial step for resellers. But not at all for a consumer, they are buying for themselves. Duh!
• Sender info is also no longer relevant as there is no reseller involved whose information has to be put on the box

Long story short — Checkout flow has become unnecessarily cumbersome for consumers. So we designed a new one.

Seamless checkout with low friction 🛍

We evaluated two types of workflows:

a. Hybrid workflow

b. Focussed workflow

Design Byte #1
Although reducing steps is considered as a way to go in revamps usually, our “User-First” lens broke that bubble for us. Our users found this hybrid approach to be chaotic, and they ended up overlooking certain features with too many actions appeared in a single screen.

So, “Focussed Approach” it is!

We defined four clear steps in the new checkout flow:

1. Cart

• Users are no longer forced to select payment methods first, instead they are given a clear view of the items in the cart. Users can change size or add quantity or remove items to the cart
• Price details info is made sticky with the Call To Action (CTA) “View Price Details”. This is to ensure that users can see the price details of all the items in their cart at any viewport.

Design Byte #2

While talking to consumers, we understood a few interesting reasons for drop off on cart screen. Lack of transparency in the no. of steps in the checkout flow induces anxiety in consumers. This is very important for Bharat users as they get very anxious on clicking on every button in a check-out flow. They ask questions like “Continue dabane se paise toh nahi kat jaaenge?”.

Here’s how we accounted for this anxiety:

• All the checkout steps are displayed clearly at the top of the screen, to ensure guided anticipation and transparency for consumers
• Info text “Clicking on ‘Continue’ will not deduct any money” attached to CTA helps users go through checkout process without feeling anxious about payment

2. Address

Previous address selection(radio button) didn’t inform users well about their selection of an existing address, which led to confusion and misclicks.

“Proceed” CTA at the bottom of the screen also didn’t help the case.

Redesigned screen has more prominent visual distinction on selection and CTA “Deliver to this address” appears in context with the address selected, drawing user’s attention to the right spot. Although, it is different from the general perception that CTA should be closer to thumb, it worked wonders for us in this use case.

“Adding a new address” earlier used to be a confusing for the users with no demarcation between the type of data to be entered. Redesign ensures there is grouping of information to be entered, to give users a sense of accomplishment on filling information on filling each section.

3. Payment

Selecting the mode of payment still remains the same. Change comes in “margin” comprehension as this screen serves for entrepreneurs and consumers.

We need to make sure entrepreneurs notice and interact with “margin” section, while consumers comprehend and ignore the section by choice.

The solution:

• Add a binary(YES/NO) question — “Reselling the order?”

The default selection is “No”, as we are solving consumers first, so they can move ahead without any friction.

When an entrepreneur selects “Yes,” the section expands to input their final price including margin.

4. Summary

The mandatory sender info earlier was an irrelevant step for consumers.

• In the redesigned order summary “Sender info” section is only visible if the user selects “Yes” to “Reselling the order?” in the payment screen.
• The new “Order Summary” contains cards representing the steps the user went through thus far. The cards are stacked in the order of the user’s journey: “Cart” on the top, “Address” in the middle, and “Payment” right above “Price Details”.

The “Chevrons” on the right of each card indicate the editable opportunity before proceeding to place an order

Design Byte #3

We took this opportunity to add in a few micro animations to enable a sense of progress, as well as user delight.

What did the revamp do for us? 🧐

These design enhancements brought significant uplift in the shopping funnel for consumers.

Don’t believe us? — Here’s some data

• Orders/Visitor increased by 10%, because consumers checkout with least amount of friction
• Order/Add to cart continue increased by 7%, because the steps are transparent and focussed on single action which helped with user trust
• Median Time to convert from “Add to cart” to “Order Placed” reduced from
  1.9 minutes to 1.3 minutes (for 1+ Order)
  8.5 minutes to 7 minutes (for 0–1 Order)
• Most importantly we got some amazing feedback from our users themselves

“Agar customer k liye le rahe ho toh “yes” karna hota hai”

“Yeh bohot sahi hai, baar baar margin ₹0 daalna nahi padega ab”

Epilogue ✨

Solving for the changing consumer base of Meesho has challenged me in ways that needed me to rebuild the mental model for consumers and resellers as they will coexist now. This only teaches us that reinventing ourselves from time to time is the only way for these changing markets, users and their needs.

If you want to join me in designing for Bharat’s next billion users, head to meesho.io to check out our openings!

Credits:

Brains behind the redesign: Seamless Collaboration between Product, Design and Tech led to the immense success of this project.

Cover Image: Ved Sarkar (Portfolio, Linkedin)

Editor: Mangala Dilip