Redesigning the which has already made a benchmark and has millions of active users is one tough task to do. We didn’t know how to get started. Should we straight away pick pages, products or features and redesign? How do we design the without knowing how the interface will turn out? But also, how do we make the interface when we don’t even have a defined the UI kit? That’s when we developed the Zomato Design System.

Design System

We used the Atomic Design model to organize our assets in Atoms > Molecules > Organisms > Templates > Pages.

Also, while designing the components, we learned that we need to redesign the app and component system in parallel to order to understand what element works in the context of the real app.

Then we picked up the most important pages from the app and listed down the goals of each page that we need to solve through the redesign.


  • Solve for the ad model and scalability: Instead of fixed inventory slots, click-based model will allow us to rotate ads across different platforms in relevant categories and required locations or subzones. We will now have the flexibility to improve user experience, by building a user first product, which can even serve better results for the merchants.
  • Transactions: Popular businesses which generate revenue should be at the most prominent position.
  • Cuisine Searches: Our data states a lot of people on Zomato search on what to eat or order by filtering from cuisine type. So we should recommend them throughly in the discovery phase.
  • Showcasing Collections — This has been one of the most top trusted features. We realized that a lot of our users open Zomato with no idea about what to search. They just want to go out, and have a good time. This is why “Collections” became popular. Collections package the best your city has to offer into a simple, visually engaging experience. To showcase these great restaurants, we’ve designed a new card carrousel based browsing experience in our apps that will keep you flipping through Collections for more! When something catches your eye, tuck it into your Wishlist for future deliciousness.
  • Quick action button to add review and photo: We love it when users share their experiences in the form of a review or photo. Also helps the restaurant improve and get better every day. Therefore we wanted to make the discovery upfront for easy accessibility and navigation.
Comparison of the Old and New Homepage of Zomato

Search Result Page

Studying different personas and use cases helped us understand that all users are unique. They don’t think of eating out or ordering-in, in the same way as others. Therefore, showing them relevant content is very important. For instance, someone who has come to order food is not interested in booking a table or to know about gold membership and vice-versa. Hence these search result cards had to be in sync with the user’s search or the entry point they are coming from.

Solving for different types of searches:

  • Book a Table: If a person has come to book a table, all he cares about is the reservation time. Along with it if he has a Gold subscription — then can he access it at a particular restaurant. Are there any dining offers on his cards etc.
  • Zomato Gold Member: Which all restaurants can I access Gold membership and if there is any event happening at that particular restaurant.
  • Order food: A user wants to order food, and his decision-making factors are — what is the delivery time (in how much time can I get my food) and what is the minimum order I need to place.
Search result cards based on the entry point

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here