How I designed the listing for a brand new Food App

The story of how the item-listing of Swiggy Daily was designed

Saptarshi Prakash
Oct 11 · 8 min read

I recently completed a year at Swiggy. In this one year, I have done all kinds of jobs, right from shooting pictures for Instagram to crafting a whole new app from the scratch (yup, you heard that right). On my day-3, I was told that my first project will be something completely new and different. So different that it will not even be on the Swiggy App, to start with 😂

So there I began the exhilarating journey of designing Swiggy Daily, a brand new app from the celebrated house of Swiggy. The interesting thing about Daily is that, unlike Swiggy, there are no restaurants on it. It is a platform offering meals cooked in a homely way, by small-sized kitchens and home-chefs.

The good’ ol Swiggy and the brand new Daily

To sum up,

  • Swiggy App — for restaurant food (and a few more things)
  • Daily App — for homestyle food

The building of Daily was nothing short of an epic. Each and every day was so eventful that it can be made into a super-engrossing movie! (Alright.. a Netflix series at least 😉). From all the episodes that I lived, there is one thing I still fondly remember. It is the journey of how we designed a small, but very significant element of the Daily App — The listing of a meal.

Listing — The core of any e-commerce product

You won’t believe, this seemingly simple thing called ‘listing’ can get fairly complicated at times. Let us look into the anatomy of a generic listing. It has a name, image, price and a perhaps a button for the action. Something like this:

Seeing this, you must be wondering,

Thats a perfectly sound analysis, but for designers, things don’t end here. If it did, there wouldn’t be the need to design anything further, ever. We could sell everything using one common template.

One size fits all?

There is a reason why a Candy Shop looks poles apart from a Car Dealership or an Apparel Store. The audience, their emotions, expectations and uncertainties are very different in all these cases. So, one size does NOT fit all.

It is exactly the same in case of digital apps. A user who wants to buy food and a user who wants to buy a shirt will have very different expectations, queries and states of mind. This is precisely where design comes into the picture.

Designing the Listing

In the Daily app, we ensured that you find your food right away, without having to go through the hassle of browsing restaurants. We call it the food-first approach. Since there are no restaurants in the platform, it became even easier to adopt this approach. Win-Win 😎

🎬 Take 1 — Starting Safe

I like to start with something tried-&-tested, and then build over it based on the need. Since it was food-first, I started with the exact same listing as POP (the food-first section of the Swiggy Main App) — This one:

The tried-&-tested listing of Swiggy POP. It’s food after all.

Looks elegant. It has everything we need — The name of the item, image, name of the vendor, price… It just works, doesn’t it?

Not yet. Let us pass it through a test of sanity before deciding.

🎬 Take 2 — Getting Real

Chicken Whopper from Burger King is NOT what we plan to sell in Daily. So let us substitute it with something more realistic and see if it still works. How about, “Deluxe North Indian Egg Meal by Ms. Nidhi Parulkar”? That sounds like a real Indian meal by a home-chef! 😎 There you go:

The listing of Swiggy POP with relevant content

But wait a minute… What else do you get in this Deluxe Egg Meal? Is it the items that you see in the picture? What is that second bowl on the plate? Is it spinach or okra? Can’t figure out clearly…

🎬 Take 3 — Making it Work

This is a full meal and not just a single item (like a burger) and people will surely want to know what they get when they buy it. So, let us get a little more transparent by adding a line of description to it:

Listing with a line of text mentioning the items

Well, well, well… functionally this works, but what seemed great with Chicken Whopper, doesn’t seem good enough with real content. With 4 different groups of text, the elegance has gone for a toss! 😕 Let us see what we can do.

PRO TIP: Always design with real content. As you have seen, decisions can massively change based on this.

🎬 Take 4 — Making it Elegant

When we say ‘homestyle food’ it is the look & feel that creates the first impression of homeliness and NOT the fancy ‘Deluxe’ name. So, how about we remove the redundant name, and use the description as the name instead? Also, let’s try bigger images this time!

In this regard, we also paid extra attention while shooting the images, keeping in mind the homestyle nature of the meals. When at home, Indians love to eat from stainless-steel plates, you know 😀

An evolved listing with bigger images + merged name and description.

I agree, that having bigger images would also mean that we get to show fewer listings in a single viewport. But in the context of Daily where the number of offerings are relatively less, we felt this approach should be fine.

PRO TIP: The use of bigger images is a double edged sword. It can do wonders if they are shot well. But if they are not, it can completely go south!

Alright then… Things look good 🙌

BUT,

“Who is Nidhi Parulkar??”

Never heard of her, right? She is not the Gordon Ramsays or the Burger Kings of the world which you have seen and heard of. She is just a new home-chef in town, who is yet to make her mark. Would you trust her?

This is exactly what happens every time a new and unknown restaurant gets listed on Swiggy as well. We as users, find it hard to trust anything unknown.

The new kid in town

In Swiggy, however, there is a small advantage. The perception of an unfamiliar thing, tends to get better with the presence of familiar things around. This is an interesting combination of Halo and Cheerleader Effects. (I just read a research paper on one of them and yes, I have the right to show-off my jargons 😂)

In simple language, if you are often seen hanging around with the CEOs, people may assume you are one of them. Well, you may indeed be one, but the bias in this case is created because of the people around you and not necessarily for who you actually are. Similarly, when an unknown restaurant is listed in the vicinity of the known ones, users tend to be a little more confident about it, even though it is new, unknown and unrated.

Halo does the magic!

But, in case of Daily, even halos couldn’t help because there were none! All the vendors on the the platform are new who are yet to build their reputations.

In such a scenario, there aren’t any criterion to choose between the Rajma Rice by Ms. Nupur Gupta and the Rajma Rice by Deepti’s Kitchen. So what can we do?

🎬 Final Take — Making it Easy

We tried to humanise the concept of homestyle food because it is, after all, a human who is preparing your food with love and care. What if we show you a small picture of the chef? Now, you can at least imagine the person cooking your food and perhaps even relate him with someone known 🙂

Listing with the image of the chef
Listing with the image of the chef
Listing with the image of the chef

How about we add another line of text, highlighting the uniqueness of the chef? A personal touch… something like this?

Listing with the image of the chef and a personalised description

You see, how a simple humanising element can instil so much of empathy. Not just that, we also included a short story for every vendor so that you can have a sneak-peek, not just into their kitchens but into their lives as well. Along with all these, all our chefs and kitchens are duly certified by FSSAI. We are strict with laws, you see 😎

🎬 FINAL FINAL Take

Nah… just kidding 😂

No more takes (at least for now). We are done and it looks lovely! The next step is to wait and watch if the decisions and the assumptions that we have made are right or not. If you have any feedback, we are all ears.

So that, my friend, was the story of how we designed this seemingly simple thing called Listing.


Btw, did I tell you that the first designed version of Swiggy Daily was black? It was dark long before Dark-Mode became cool. We later resorted to the simple white visuals — Why? Well, thats a different story 🙂


I hope you found it interesting. To check out more things I do and discover, follow us on Dribbble 🙌

Swiggy Design

Musings & Perspectives of the Swiggy Design Team

Saptarshi Prakash

Written by

Designer | Traveller | Speaker | Teacher | Engineer | Manager

Swiggy Design

Musings & Perspectives of the Swiggy Design Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade