Designing Swiggy Instamart – The Inside Story

The leaflet that accompanies an Instamart order says, “Swiggy redefined the way you order food. Now, we are redefining the way you order groceries.”

Instamart, Swiggy’s brand-new cloud grocery initiative, is currently piloting in Bengaluru and Gurgaon. The last couple of years have seen Swiggy expand beyond its core restaurant delivery offering, to hyperlocal logistics with Swiggy Genie, and then daily need deliveries through its acquisition of Supr in 2018. Instamart is probably its boldest move yet, bringing it into a highly competitive space with players like Walmart/Flipkart, Amazon, JioMart and BigBasket. It is probably a testament to Swiggy’s product, design and engineering team that the pilot was shipped in just a month.

All cloud groceries solve for the frustration of outdated inventory and non-availability of items in brick and mortar stores. Swiggy is aware that its offering and value proposition need to be sharply differentiated. Based on the insight that households order a limited subset of products every day, Swiggy Instamart promises to deliver your order within 45 minutes, from 7 am to 1 am. The promise of this high-convenience model is backed by ‘dark stores’ and a hub-and-spoke configuration of micro-fulfillment pods.

But that’s not all – the Instamart user experience is a far cry from the vanilla, functional interfaces that most grocery apps present. We spoke with Srinath Rangamani, Head of Design at Swiggy, to understand the thinking behind the Instamart interface and user experience design.

Restoring the ‘Joy of Shopping’

Groceries are an everyday affair and their purchase is a personal, often emotional act. Unlike the in-store experience, online grocery shopping lacks the same opportunity for discovery that a shopper might have as they walk the aisles. In fact, a trip to a brick and mortar store is enjoyable, because it is accompanied by a multi-sensorial process of browsing and discovery. How could this process be taken online to restore the ‘joy of shopping’ for groceries? To answer this question, the Swiggy team went back to decoding shopping behaviour from first principles.

The 3i Framework: Intent, Indulgence, Inspiration

“Think about your behaviour when you enter a store”, says Srinath. “You will focus on filling your cart with the items you need. In that journey, you might indulge and pick up an item or two on impulse. You will probably wander around a bit, pausing before an interesting display that catches your eye.”

The structure of the Instamart landing page follows a ‘3i’ framework that maps to these three user need-states: Intent, Indulgence and Inspiration. Instead of a one-size-fits-all cookie cutter experience, Instamart focuses on customer journeys that continually expose the user to new ideas.

1. Enabling Intent

The first half of the Instamart landing page has the familiar ‘Frequently bought items’ and ‘Shop by category’. This is where users are expected to quickly buy the essential items they need.

2. Tempting Indulgence

‘Must try this week,’ is the next section on the landing page. It offers interesting finds — from exotic fruit ice-creams to a variety of chips and specialties like a coconut-aloe drink. Tempting the user to discover and indulge are sections like ‘Chocolate Love’ and ‘Monsoon Treats.’ Careful thought has gone into curating the items in each section — for instance, a berry-flavoured yogurt and peanut chikki find their way into a ‘Sweet Cravings’ section, alongside more typical sweets and desserts.

There is also a brands partnership widget that lets you explore a set of curated, ‘cool brands.’

3. Driving Inspiration

The last part of the page, with its endless scroll, is where the Instamart difference really shines through. ‘Stir up a Party’ has the mixers and munchies you would need if friends were dropping by for drinks. ‘The Weekend Chef’ has a selection of pasta and noodles, with accompanying sauces. The idea is to inspire you to try something different, with the convenience of all products available in one place and delivered in less than an hour.

The All-Important Moment

So far, all online grocery apps have focused on convenience and offers. Swiggy is well-placed to address the need for convenience. Not only does it have access to deep data on purchase and stocking patterns, it also has robust technical and delivery infrastructure. While Instamart does have offers and discounts, the company says these will never be its primary value proposition.

Instead, Swiggy hopes to move online grocery shopping to an intersection between efficiency and enjoyment, by capturing ‘moments’ that matter in the customer’s everyday life: The moment when a family decides to cook together, the moment when you want to munch something in front of the TV, the moment when you decide you want a healthy snack.

This depth of outside-in thinking has long been the preserve of FMCG giants. A.G. Lafely, Chairman & President, Proctor & Gamble famously coined three moments of truth:

1. The first moment of truth occurs when the customer is confronted with the product, online or offline
2. The second moment of truth occurs when the customer purchases the product and weighs the actual experience against the brand promise
3. The third moment of truth occurs when the customer gives feedback

In 2011, Google added the ‘Zero Moment of Truth’ to this list, which referred to the research a customer does before taking any action.

Swiggy is defining a ‘moment’ as an experience with a long emotional tail — a consumption-led activity within your home that leaves you feeling happy and fulfilled.

At that moment, Swiggy wants Instamart to be top of your mind.

The Design Choices

It is fair to say that Swiggy has always been known for good design and Instamart is no exception. The team has worked on every element — from the sharp product images to the sophisticated but cheerful colour palette — to make the interface feel as tactile as possible.

Srinath says that the decision to use illustrations and 3D imagery, instead of photographs with human models, was a carefully considered one. “No matter how realistically they are shot, live models can be hard to identify with”, he says. There will always be a group of users who feel, “That’s not me.”

What’s Next?

It is early days for Instamart yet, although the initial response has been overwhelmingly positive.

A 2020 McKinsey report says “We believe the winners in e-grocery will be those that deliver a great and consistent customer experience the fastest. They will give customers the sense of discovery, exploration, and inspiration they seek from any grocer, whether in a physical or virtual environment.”

In a world where all cloud grocery apps tend to look, feel and act alike, Instamart’s bold, differentiated approach may just be what customers want to add to cart.

————————————————————————————————————————————-

The Instamart team at Swiggy

Design: Srinath Rangamani, Prasanna Venkatesh, Vysak AS, Sarangh Somaraj, Snehal Patil, Shivam Thapliyal, Akshay Prabhu and Saptarshi Prakash.

Merchandise: Supreeth Samuk, Pearl Rhea, Ganesh Maiyya, Nikhil CG, Arjun S Nair, Soubhik Ray, Srija Podder