Swiggy Instamart -Designing for (one of) the world’s largest Instant grocery Platform-

I have been part of the Swiggy Design team for a while now and have been involved in driving key consumer initiatives, be it leading the “Food Search” experience or leading design initiatives for multiple 0–1 products( Swiggy Handpicked and Swiggy Mall) entirely on my own. However, when I was given the chance to lead the consumer experience at Swiggy Instamart, the (one of the) largest quick grocery platform in the world with close to a million orders/day ( Yes, really!) I grabbed it with both hands ( and legs too 😂 ).

While it might sound a once in a lifetime opportunity (which it was) it came with it’s fair share of challenges, mostly because of the massive scale at which we were operating in and the general dynamics of an online grocery model. While it is not possible to very deep into each and every aspect of the problems the intent of the article is to provide a very brief overview of how things work at scale and how I, as the lead designer while working with my counterparts simultaneously drove business and customer goals.

Disclaimer : This is not going to be a full fledged case study of one product but rather 3 small products ( out of the many in production) that I helped ship and are currently live on the Instamart Storefront. I will keep the description very short and crisp to not bore you to death with redundant details which is very important while building the products but not so much to the readers. So, let’s cut the chase and jump right in!

Compact Masthead

What?

The landing page of any product is extremely important and the masthead , especially for a product like Instamart it’s even more important, primary because:

1. It drives key perceptions, primarily around speed and speed is the major determinant in asserting ones superiority over other competitors.
2. Most expensive property that a brand pays for and hence drives key monetisation goals.
3. It also plays a major role in driving key consumer objectives and important informations like delay in delivery, surge, bad weather etc etc.

Why?

The common problems with the mast head :

1) Too big and clunky. Eating up a lot of real estate for showing far too less. 2) Persistent information hogging up space for other important initiatives. 3) Visually very heavy and the information sometime tends to get lost in the mix.

How?

The solution:

1. Moved the SLA near the address bar it anchors the user’s vision on a fixed co-ordinate every time they land on Instamart and create a consistent pattern.
2. The negative scenarios are handled through progressive disclosure where the information slides down, stays for a brief period and then slides up freeing space for other important stuff. The idea here is, once the user has been informed there’s no need for th user to keep seeing the same info.
3. An additional flash animation is added on top when the promised SLA is faster than the average driving perception of speed and eventually value in the long run.

Shop By Categories

What?

Shop by Categories, just like any other shopping app is the product’s primary navigation and way finding. Imagine stepping into a mall without without clear navigation and wayfinding, nightmare right? Same is the case with any digital shopping platform. Shop by categeories is an integral part of the ecosystem and the is the most important widget leading to maximum conversions.

Why?

The older navigation section was 3 tile per row and with a lot of padding, more than it was needed. While it make the tiles easy to scan it was coming at the expense of real estate and was pushing a lot of the categories beyond the range of one scroll. Hence, it was necessary the Shop by categories was re thought and the aspect of navigation of improved upon. It was purely a visual design exercise and while it might look trivial as a surface level the amount of thought process and craft that has gone into the details is truly astounding

How?

We tried both 4 tiles and 5 tiles / row and while the 5 tiles approach was more space efficient and the team was divided between the two options we finally decided to ado quick hallways testings to finalise one approach, where the 4 tile layout was preferred over the 5 tile. The details of the design are shred in the illustration below.

Offer/Value Perception Widget

What?

One fundamental aspect that influences buyers online and makes them choose one platform over others is the perception of value-meaning which platform offers the best prices for the products?This is a behaviour that forms over a gradual period of time and is very hard to chnage once formed. At Instamart, when doing consumer immersions we found out that several customers feel Instamart to be pricier than their nearest competitors even when there is a price parity. Infact, Instamart had better deals across a wide assortment of products but users seem to not care much.

How?

Well the perception of value is a tricky problem to solve and multiple interventions needed to be taken at several junctions of user’s journey to gradually change the perception. The path of least resistance was to build a specialised offer widget on the storefront with a strong emphasis on savings and value and the category team would ensure that only the products with the best deals populate this space. To ensure the success of this product ot had to be :

1. Attention grabbing
2. Screams savings and value.
3. Feels almost celebratory to boost shopping intention.

Few out of the countless that were closer to the final output

Conclusion :

To wrap up, while these initiates were driven by me from design, it would not have been possible without he able guidance of Srinath ( VP of Design at Swiggy), Prasanna ( Director of Design, NI, Swiggy) and my extremely talented product counterparts who helped me gain additional content from a business POV as their their timely feedback to improve upon the products. I have deliberately avoided going too much into numbers primarily because some of them are confidential, they are too early in their release cycle to fetch any meaningful data and also because they hold very little value beyond the scope of business and product. Until then!