How I designed the listing for a brand new Food App
The story of how the item-listing of Swiggy Daily was designed
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.
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,
It’s literally 3 lines of text, 2 boxes and an image… What is so complicated about it?!
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.
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:
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:
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:
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 😀
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.
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.
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?
How might we, instil confidence and make choices easy for our users?
🎬 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 🙂
How about we add another line of text, highlighting the uniqueness of the chef? A personal touch… something like this?
YouTube cooking instructor? Must be a celeb chef!
Oh.. An ex-IT Employee who is following his passion for cooking… Someone just like me! Need to try this
She uses her 30-year-old family recipes.. wow! Has to be the most authentic!!
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 🙌
If you are curious about UX and Design, do check out my YouTube channel for tips, suggestions and tutorials related to design.
