Zomato & Swiggy — Experience matters

the saga of the two juggernauts in the food delivery space in India

Food. I’d rarely find anyone hesitant to talk about this subject. Sure, there can be a discussion on what someone hates and loves in this, but I think everybody loves food. Today’s topic is on that. Yay!

Well, to clarify, it’s about the two most famous food delivery apps in India. Both of them provide the same service fundamentally, deliver from almost all the same restaurants, and many of their delivery agents work for both. We’re looking at Zomato and Swiggy. Both companies compete on offers, delivery exclusivity with some restaurants, and on who burns more money to acquire customers.

Do note that Zomato also has a booming Food Discovery service, but today, we will only be looking at its delivery sides of both of these apps/businesses. And, about the user experience design in them.

Good design is invisible.

Don’t you feel at home with certain apps sometimes? Like, somehow everything’s just right? Colors, fonts or text-sizes? This can be due to a variety of reasons. But, we all get that feeling with certain apps.

I, for one, would prefer to chat on Whatsapp/iMessage over Facebook Messenger/Hike. I have my reasons but if I were to summarize it on one line, it’s that the former apps somehow feel natural and conducive to texting. You can disagree because you might feel differently, but we all feel naturally inclined towards some apps.

This natural inclination you can’t put into words is a result of good design aimed at you and likeminded people. The success of an app can simply be measured by the number of users and how many people find it easy to use.

Swiggy and Zomato barely have any differentiation in terms of their business models. They operate primarily through their apps. Before we dive deep, do you inherently feel inclined towards one of these apps from a design/user-experience perspective? I do. I prefer Swiggy. And, let me show you all the reasons why.

The First Screen

Left — Zomato | Right — Swiggy

Off the bat, you can see how busy Zomato is on the left side. Deep and dark colors. Very bright and detailed pictures, details of which you can’t see much.

On the right, with Swiggy, there’s more room for the content to breathe. You can follow the content line by line without getting distracted or with a tonne of content tightly packed. For example, check out how crowded the ‘Lockdown Cravings Section’ on the Zomato app is.

Let’s do a differences breakdown:

• Font sizes : Zomato has a smaller font size than Swiggy. Therefore, making Swiggy more readable.
• Colors : The orange theme of Swiggy is beautifully used while the Zomato’s red feels a little overpowering in the graphics
• Amount of content : Swiggy has a little more hierarchy and order to it. First they talk about the most important offer, then about the restaurants (which is what you came to the app for) and then a few other additional features. The amount of time it takes you to reach the top picks, the app has curated for you, is also lesser.
• Search Field : I’d give the point here to Zomato because it is more prominent but I wish it were smaller. On Swiggy the search is one of the four icons in the bottom.
• Priority : People come to Swiggy/Zomato for offers and the top right part of the app screen is dedicated just for that. While Zomato may have an equivalent offering, Swiggy ensures that part grabs your attention.

In summary, I feel that Swiggy is more guiding in its design. There’s a hierarchy of data.

Next, scrolling a bit lower

Left — Zomato | Right — Swiggy

I am actually conflicted here. While Zomato does give more room for you to see the restaurant name and dishes, it’ll take forever for you to check out their listings. Whereas, in Swiggy, the amount of space allocated per restaurant is lesser, but you can see more.

I personally prefer Swiggy here, because I would like to check out more in a shorter span of time rather than go one by one really slowly.

Let’s do a design breakdown between these two screens:

• Offers : Point Swiggy. I can see it more clearly than in the Zomato app. Especially with Swiggy displaying the Coupons For You section more vividly.
• Data Organization : Swiggy has the most important data all grouped together closer and in the alignment that one generally reads. 4.4, 28 mins, and 250 for two, are the most important data points for someone to evaluate a restaurant and I would think it’s the ideal order as well. Versus Zomato where the data is presented vertically, on the right side.
• More White Space : White space is not wasted space. It gives more room for content to breathe and people to focus on the important elements. Colors also stand out more. You can find this in plenty and more well-used in the Swiggy app.

Swiggy manages to pack more data in the same space. While it is borderline crowded, I’d say it’s much better than the overkill of space-usage in the Zomato app.

Restaurant Page

Left — Zomato | Right — Swiggy

I think, by now, you can judge for yourself that Swiggy’s UI is far more welcoming, and easy to comprehend.

Let me illustrate a few glaring contrasts between these two:

• Too much color on the Zomato app. The overpowering blue and red on the left screen dominates the pictures of the food
• Zomato has too much information packed and in a very dense manner. Small font sizes, and very bright distracting colours.
• The Zomato Pro seems to be a positive thing, but the red bar behind it says otherwise. Swiggy has no such contradicting elements.
• During these times, it’s imperative for a service like this to harp on the safety standards maintained by these restaurants and you can see that more pronounced in the Swiggy app on the right. A clear green bar with big bold text versus a small complicated looking icon with even smaller text. In the Zomato app, the Max Safety part can easily be mistaken for some award that the restaurant won. Also, Swiggy mentions the ‘Best Safety Standards’ twice. Really no harm in it. It’s always good to reiterate such important messages.
• Offers are far more clearer and presented in order on the Swiggy app versus Zomato making you scroll for it.

I know that might have sounded like thrashing the Zomato app but I am very curious about their design decisions with a very important screen like this. I think Swiggy wins here too.

Menu discovery

Left — Zomato | Right — Swiggy

This is probably the most important screen after the restaurant discovery page in the app. My review for these screens is pretty much the same as the ones in the last few screens.

Overcrowding, small text sizes, data organization weirdness — Zomato. Good use of white space, clear names, clear indicators of veg/non-veg, good image sizes, prominent ADD buttons, a prominent Menu button — Swiggy

The veg/non-veg indicators are very important for an Indian consumer and why they are nestled within the food images on the Zomato app, I am not sure. I think it’s important to find those indicators easily.

–

Concluding notes:

I am very intrigued by Zomato’s design decisions with their app design. Zomato did get into the delivery business much later than Swiggy. Not sure if Swiggy’s app is better designed because of the greater number of years of experience in this space.

An app that’s easier to navigate and explore is definitely a plus. Especially, for a company/service that’s dependent on people clicking the Add/Buy button.