top of page
Grocery cover.jpeg

Redesigning the Grocery Shopping Experience for the Next  100 Million+ Users

Overview

01

Keywords

Product Design, E-Commerce, Grocery, Gamification, Retention, Information Architecture, Navigation

 

Design Timeline

Sep 2021 - May 2022

Highlights

Recognized in renowned news websites 🔥: LiveMint, The Hard Copy, Indian Express, Economic Times, and more!

Team Members

CPO(Grocery), a Product Manager, and 2 User Researchers

My Role

Lead Designer: Project Proposal, Wireframing, Visual Design, Prototyping, Micro-Animations, and Hand-off

Project Summary

02

Objective

How might we enable users to build a Grocery cart efficiently and stay engaged throughout the process?

For Whom?

Value-conscious Flipkart Grocery users from small towns in India. 

Final Outcome

Grocery tabbed entry point, bottom navigation to enable cart building, and a gamified offer-unlocking experience to motivate cart building.
Top Bar Showcase.png
Navigation Showcase.png
D2R progressing
Cart.gif

Impact

32% ↑

New users from introducing Grocery tab entry point.

24% ↑

Cart builds from introducing a new bottom navigation.

1.4% ↑

Increase in GMV solely from gamified offer strip.

Project Recognized by Renowned News Platforms

News Recognition.png

Context

03

Do you shop for onions the same way you shop for a pair of jeans?

People shop for Different Kinds of Products Differently

Shops in the real world cater to these differences. Clothing stores offer mirrors for trying on items, while electronics stores don’t.

Group 6809_edited.png
indian-address_mainbanner.jpg

Flipkart, India's Largest E-Commerce Platform with
150 Million+ Active users

Flipkart is a super-app like Walmart that offers everything from groceries to airline tickets.

Need for Category-Specific Shopping Experiences in Multi-Category i.e., 'Super Apps'

Like other super apps, Flipkart faces the challenge of delivering tailored shopping experiences for each category while maintaining consistency.

Empty cart.png

Flipkart Journey for Fashion

  • Shopping occurs once every other month 

  • Shoppers, on average, buy 2 items

  • Items sold by sellers = Cart items shipped separately

Flipkart Grocery Journey

  • A recurring need 1-3 times per month

  • Shoppers, on average, buy 14 items

  • Items are sold by Flipkart = cart items shipped together

User.png

Grocery's Target User

The Value Hunter

" I like to compare prices and offers. I always use the app that I feel gives me the best overall value. "

What is the problem?

It takes 4 sessions for users to build a Grocery cart, turning a routine task into a tedious process and reducing confidence in their choices.
How Does this Affect the Business?

Flipkart needed to respond quickly to growing Grocery demand to secure and expand its market share in a crowded market.

Market crowd.png

Research Insights

04

Key Pain Points and Opportunities basis Usability & Data Analytics
Old Experience.png
Binoculars.png

Hidden entry point to Grocery

Sneaker.png

Strained product discovery and forward navigation.

BatteryVerticalLow.png

Low incentive to build a big cart - add all needed items & more.

How Might We

create a shopping experience tailored to grocery shopping, enabling users to quickly discover the most suitable items?

Ideation

05

Design Sprints to Ideate on Pain-Points

Grouping high-level ideas and prioritizing features using 'RICE' scoring.

Screen Shot 2022-12-29 at 03.09.18.png
RICE
Binoculars.png
Eye.png

Flipkart homepage with an intuitive Grocery entry point

Sneaker.png
SneakerMove.png

New navigation within Grocery

BatteryVerticalLow.png
BatteryVerticalFull.png

Gamified offer unlocking experience with an ‘offer strip’.

Attack Plan
Product Roadmap.jpeg

Iteration

06

Mapping Information Architecture
IA.png
Evaluating Entry Points for Grocery
3.jpg
ThumbsUp.png

Scalable for future use cases.

ThumbsDown Warn.png

Flipkart and Grocery have separate carts, making this hierarchy incorrect.

ThumbsDown Warn.png

Users intending to shop for Grocery first see Flipkart search instead of Grocery.

4.jpg
ThumbsUp.png

Users are clearly guided to select based on their intent: Flipkart or Grocery.

ThumbsUp.png

Prominence draws Flipkart users who are new to Grocery.

ThumbsDown Warn.png

Not as scalable to accommodate new marketplaces in the future. 

Evaluating L0 Node Philosophy for Grocery Bottom Navigation

Given that each option came with distinct advantages and challenges—and after much internal debate—we decided the best approach was to observe real user behavior in navigating the app.

User bb.jpg
ThumbsUp.png

Caters to current user habits of majority of users making the experience intuitive.

Logical bb.jpg
ThumbsUp.png

Organized layout makes it easy for users to locate features intuitively in the future.

Gamified Offer Unlocking Strip Interaction

The gamified offer strip needed to motivate users without disrupting their shopping flow or creating unrealistic expectations about the unlocked offers. The design also had to support unlocking various types of rewards, such as free delivery, basket discounts, and freebies.

D2R Explorations.png

Usability Testing

07

Unique Usability Testing Using an Engineered App Build

90 Min Sessions with 16 Users Across India

This significant navigation change required thorough validation, so I collaborated with engineers to develop an app build for testing. A Figma prototype would have been too limited to accurately capture user engagement.

Navigation prob.png
ThumbsDown Warn.png

Most users couldn't comprehend the 'Smart List' node and were unsure of how its working.

ThumbsDown Warn.png

Although users found ‘Offers’ valuable, it appeared too similar to the content in ‘Home.'

ThumbsDown Warn.png

The 'G' icon wasn't co-related to 'Grocery'.

D2r PROB.png
ThumbsDown Warn.png

Most users missed the offer strip, and those who didn't only did it when it was nearly full.

Final Designs

07

Kickstart Shopping with Intent-Based Entry Points
Flipkart to grocery.gif
Effortless Shopping with a Grocery Specific Bottom Navigation

Our users prefer to shop from a mix of Search, category trees, and merchandising banners, which the new navigation enables. A bottom navigation is a familiar pattern that allows for easy task switching, enabling users to complete main tasks quickly.

Grocery.png
Categories.png
Cart.gif
Child.png
Effortlessly Move Between Inside Pages to Keep the Journey Moving Forward
Confetti
Dynamic Offer Strip: Unlock Rewards as You Shop

As users add items, the progress bar fills, showing how close they are to the next reward. Upon reaching the threshold, a confetti celebration appears, and the golden strip lights up, prominently.

D2R progressing

Confetti Celebration

Expanded D2R Strip

Expanded Strip with Milestones

Cart.gif

Delight element to enhance savings realization

Savings strip.gif

Threshold to next offer

Confetti
Savings Strip to Realize Incentives Received on Shopping with Flipkart Grocery

Impact

08

Impact

32% ↑

New users from introducing Grocery tab entry point.

24% ↑

Cart builds from introducing a new bottom navigation.

1.4% ↑

Increase in GMV solely from gamified offer strip.

bottom of page