User Experience and User Interface (UX/UI) Analysis — Zomato, Part-2
This is the part-2 of my UX/UI Analysis on Zomato. You can read the part-1 here.
Product / Restaurant Page
The excellent UX and UI design of Zomato’s app follows into the product page which is the restaurant page. The product page is the most important page for the business because this is where the revenue is generated, this is where the money-making Call-To-Action (CTA) is placed.
The layout is nicely designed with the restaurant featured image at the top catching the user’s eye. Since the product page contains a lot of content, they have divided the important parts into separate pages accessible by the nav bar at the bottom. This navbar takes the place of global navigation to save space and also not confuse the user with 2 navigations.
In the Overview section, important content related to the place is shown prominently below the image with great typography using font sizes perfectly. And contains the CTA, which is a button to call the restaurant, prominently in color among grey text content. The featured image has a good aspect ratio and clicking on it opens up the gallery view. The user can slide across the images, but a thing that they have missed is actually letting the user know that it is a slider. They did add the slider dots on the home page but missed them here.
Below the overview are the common actions, like bookmarking, reviewing, etc. And other important actions important for the business, like booking a table. The rest of the secondary information for the place follows after using appropriate layouts like scrolling tags, lists, alternate background colors, etc. This properly differentiates between the content, helps the user in skimming over the content, and does not look very monotonous.
Another important feature of a product page is cross-selling, up-selling, and related products. Only related products matter in the context of Zomato and they do this by showing similar restaurants at the bottom, in form of small cards. It is important to show them at the bottom so that they do not compete with the current product.
The rest of the sections are also well designed. All of the sections contain the primary info and primary CTA at the top except the featured image, so that users can easily use the CTA.
The menu section contains image galleries, differentiated into different categories. The photos section is also well designed. It categorizes the type of images, for example, food, ambiance, interior, exterior, etc. And the categories tabs contain a grid view to have an overview of all restaurant images or easily jump to a particular image.
Last is the reviews section. Customer reviews are important as they form trust in the user by the experiences of fellow users. Review sections are common in eCommerce, but Zomato goes a bit above the standard. First, they find and show common phrases & points in reviews and show them at the top to give an overview of the experiences people usually had. They show the most mentioned and dishes that people liked the most. This is good for the users who do not want to read lengthy reviews and just want an overview. In addition to review filters, Zomato also allows searching in the reviews for users who are looking for a particular thing.
Profile / Settings Page
The profile is a no-nonsense screen with frequently accessed options in a tab form at the top and all other options clearly separated into sections. The screen also has your name and display photo at the top to give it a personalized look. Here we can again see how we can choose frequently accessed things in a data-driven way by using analytics correctly. And Zomato does this nicely in different parts of the app as we have seen.
Summary
Zomato’s team have created an app, and improved it over the years, with a very good user experience and interface, so much so that the user’s don’t even notice it. Which is THE best thing a good interface can acheive, keep itself out of the way of the user to perform the actual task they want to do.
