User Experience and User Interface (UX/UI) Analysis — Zomato, Part-1
Food is an important part of the life of all human beings. It’s not only about sustenance but part of our lives, cultures, celebrations and it brings enjoyment to life. It is common for people around the world for people to go out on weekends and get together over dinner. It is central to our social gatherings.
One important part of going out is discovering where you want to have food. There are a lot of restaurants and food outlets in all cities around the world and too many in metropolitan cities. It can get difficult to identify even for locals where good food is cooking and for people new in a city can be challenging. So there exists a market for a platform to exist where foodies can get together, try new food, leave reviews, and do not fall to the marketing of bigger brands. This is one of the things I have missed in Stockholm, a good food platform. You have Google Maps in most cities around the world, but it is not a platform specifically made for this. I was so used to Zomato in India, that it is difficult for me to identify good restaurants in Stockholm. In this post, I will have a detailed look at how Zomato solves this problem and how efficiently it has developed over the years.
Login Screen
Let’s start with the opening screen. Zomato does not present onboarding screens since they are already a popular brand and they do not have any complex UX flows that they need to explain. So the first screen is actually the login/signup screen. The screen follows the language of flat design along with graphical food assets rather than actual food images. While at the same time maintaining the aesthetics appetizing enough appropriate to an app dedicated to food.
The login process should as simple as possible for the users. Zomato has provided easy login with social accounts (Google and Facebook), and for privacy focused users they allow login with an email address or phone number. It is to be noticed that there is no differentiation between login and signup, which is a large departure from general UX heuristics. But they try to manage this in an elegant way. If you log in using a social account, they manage it in the background if the user is a new or a returning user. In case of phone number or email login, they achieve this by sending One Time Password (OTP) for each login attempt. And there is no password !!! So there is no need to remember the password, all logins are authenticated through OTP. This is very secure and convenient at the same time. This is a great example of UX and tech working towards the same goals i.e. convenience and privacy.
Users can also use the app without logging in or creating an account. They can skip the page and directly start using the app. This is an example where it the responsibility of a UX designer to manage business needs as well as user’s needs. Business needs to onboard new user’s for revenue generation and the UX designer needs to allow that in a non-intrusive way.
Home Screen
Zomato follows classic Bottom Bar Menu primary navigation popularized by iOS, although I am looking at their Android application, which promotes Google Material Design language. Personally, I like iOS style navigation more because it is easier to reach on modern large phones.
- The home screen favors a large search bar at the top which can search for restaurants, cuisines, dishes, etc. which will be the main feature users will utilize in the app.
- Below that is a slider for advertisements and campaigns. There are 2 popular options to show horizontal content: Partially hidden content or Slider dots. Zomato went with the latter, which is better for their content’s aspect ratio. But it is easily made known of the horizontal content to the user by changing of slides as well. The text is also carefully added to the images so that the image is given appropriate space to speak to the user, as well as add small text to set the context.
- There are cards for easy access to commonly searched terms, like Cafe, Fine Dining, Bars, etc. There is a huge scope of adding analytics supported content, by checking what content are the users searching for most to reduce the number of clicks to get to the user’s needs.
- Scrolling below that, users can directly access the content, which is the list of restaurants. Restaurants are shown as cards with a good aspect ratio and a good percentage of image vs textual content. The cards contain minimal relevant content which is necessary to compare between the different restaurants. The cards also contain a button to bookmark which is a commonly required feature in exploratory apps.
- The floating filter bar is another example to reduce the number of clicks by using quick filters. A thing to notice here is that more filter buttons are available as horizontal content which is made apparent to the user by Partially hidden buttons, which makes perfect sense in this scenario since the content does not contain visual appeal and the aspect ratio of the content also suits best.
Search and Filters
Zomato has a fuzzy matching search for restaurant names, restaurant type, collections, cuisines, dishes, and other food terms. This makes the search very user-friendly, provided that the tech behind the search is good which is good in their case. Searching only a single type of item has become a dated technology now and users expect better in the world of Google.
Different types of search results are presented well, separated properly and the user can click to see a specific type of results, for example only restaurants, only dishes, or only cuisines. There are CTAs on search results that are very good for users who are looking for a specific action, like ordering food.
The filters for search are also very well designed. The tabbed structure really simplifies the application of different types of filters. The results are not refreshed unless you have selected your choices and touched apply. Applied filters are also clearly shown as clickable tags which can be individually removed by clicking them.
I will cover the rest of the parts of the app in an upcoming post.
