Is Zomato’s Sushi Design any good? 🍣🤔

WASA, BAE?!

Before we put on our food critic shoes and give our feedback on the sushi design, let us understand what a design system is. 😉

By definition, A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

To make it a bit simpler, it is a set of reusable components which enables you to build applications quickly with consistency. These components contain design information and follow a specific set of rules.

The ultimate goal of a design system is to create a better user experience by NOT introducing any inconsistencies in design and visuals 😀

Substantially, this article revolves around the experience and design of the upcoming Zomato app. Also, it’s full of sushi puns. I will share my unbiased perspective on the mock design of the app and web.

Let’s Roll! 🍣

Why was the new design system needed?

There is no doubt that Zomato provides us with a great service whether it is for getting our food delivered or helping us pick a restaurant to dine-in. But is the user equally happy with the experience, while browsing the Zomato app? Are the UX standards meeting the service standards? Not exactly. 🙇🏽‍♂️

One of the major problems Zomato was facing was that a lot of pages, products, features, and components were not in sync with each other in terms of UI and UX. There was no unifying design philosophy or principles to guide the design. Over a period of time, the products started to look like different apps across all platforms.

That’s when and why the design team at Zomato came up with a new design system and named it Sushi. The new design is just as aesthetically appealing as the actual Sushi. 🙌🏽

Less cluttered, more focused on the user and has a new visual flow. Ultimately it is beautiful and provides a rice, oh wait, nice user experience.

Pick up your chopsticks and prepare yourself for some Sushi!

What is the Sushi Design system? This design system complies with the Atomic Design methodology by Brad Frost. Atomic Design is a methodology that involves breaking a web or app layout down into its basic components, which are then reused throughout the site. It makes it easier for both the designer and the developer and results in a consistent and simple UI.

The sushi design system is greatly focused on keeping its user-centered, inclusive, consistent and simple. Resulting in a platform which is viable to everyone, regardless of age and ability, solves user problems and builds a positive connection with Zomato. ⭐️

To understand the design system in more depth visit the article on Zomato design blog, which covers the principles, foundations, components, templates and what-not of the atomic design system.

Link 👉🏽 https://www.zomato.com/blog/sushi

The UI — Eat the sushi with your eyes

If you think of your product like a cake, then good design is like a cherry on top. Well, in this case, red caviar on a Sushi!

• New icons: The first change which I noticed was the change in the icons. The icons look much minimal as compared to the ones they used before. Honestly, I was a big fan of the colorful illustrative icons which Zomato were going within their previous design. But again, a jump from that too much more simple and monochromatic icons was a good move.
• Shades of Red: Previously Zomato would use a bright shade of red as their primary color, which has now been replaced with a lighter shade of red. Also instead of a single shade of red, they are using 9 shades of red in their color system.
• Less Cluttered: There was a LOT of clutter before. The new design simply feels less cluttered than before. LESS is MORE and it always results in great user experience. It is now much more breathable.
• More White space: The raw fish might be the star of the sushi but the essential part is the rice. Similarly, paying importance to enough white space is just as essential to paying importance to the content on the page. The new design system provides enough white space (i.e. padding) to make the product look clean, breathable, increased legibility and help users consume more information at a glance, in a much more focused manner.

The UX — How is the Sushi tasting experience?

What is the most important factor in the design of the website? Stats, please.

The user experience is almost ~7x more important than the UI of the app.

Developing the best UX for a food discovery/delivery app is complicated. The simpler the experience is for the user, the more difficult it has been for the designer to prepare it and vice versa.

Humans are habitual by nature, they would tend to order things again and again when they like them. Also, we have to consider their tendency to discover new food and restaurant options. So how does one reach the equilibrium between both?

Another such dilemma is ‘more text' or ‘more pictures’? According to a study by Nielsen Norman Group, people tend to read only 20% of the text on the page. Worse, on sites with more contents. So we introduce eye-catching thumbnails of food. But we cannot add too many pictures because it leads to clutter and too much color — also another thing to keep in mind is that more attention should be given to the name, cuisine and location. So how exactly do we go about solving this issue?

The truth is, this issue cannot be solved completely. There has to be a fine line drawn to see what works and what doesn’t. It should ideally be a mix of the two.

So how has Zomato dealt with these problems? 🤔

• Smaller thumbnails: On the home page the thumbnails seem pretty smaller than before. This focuses the user's attention on the text stating the cuisine, name, and type of food (i.e. quick bites, casual dining, bar, etc.) Personally, as a user, my primary focus while discovering new places would be on the cuisine, pricing and how far away it is from my location and not on the how good their food looks in pictures. Of course, good looking food and the ambiance is important but that becomes my secondary priority. On the other hand, if I was booking myself a hotel, I would pay more focus on the pictures and ambiance. So, this was a good step taken by Zomato keeping visual hierarchy and the user in mind.
• Not spoiled by choices: As a designer, one thing we learn at the very start is to focus on “Less is more”. Imagine going to a restaurant and choosing from a menu of 100 items. Reading through the available options is going to take longer than choosing from a selected 20 items. Same goes with designing. While there is no doubt that people love to make a choice but having too many options can make the user confused. This relates to Hick’s Law.

• Improved filtering: Now Zomato offers a better filtering experience. Most of the people use the cuisine filter to choose their restaurant but a lot of times, users open Zomato with no idea about what to search. They just want to go out and have a good time. This is the reason why Collections by Zomato is one of their top features. Collections have been improved in this version of the design. Also on the home page, a lot of filtering options have been added, like, order again, top cuisines, highest rated and the ability to filter without jumping onto a new page. Also, more new filters include Express delivery, Zomato exclusive, Healthy food, Pure Veg places…

The UX has seen some noticeable changes in the Zomato sushi design system.

Wrapping up

We’re now onto the last bite of the Sushi.

I hope this article gave you a better insight into the new version of the Zomato app and website.

Lastly, if your ideas are different than mine or there are other benefits or drawbacks you’ve come across which people would benefit by knowing, don’t hesitate to share in the comments. I am excited to hear from you!

Have a rice day! 🤤

Niket Kamat Satoskar is an alumnus of the Nova Semita Fellowship, which helps undervalued talent from Indian colleges rise up. He currently works remotely, leading design at a stealth mode FinTech startup in the US.