Our AI writing assistant, WriteUp, can assist you in easily writing any text. Click here to experience its capabilities.

Zomato’s new Sushi Design System

View Original View Raw

Summary

Zomato has created a new design system called Sushi that is intended to provide a smooth and enhanced experience for their users. The design system follows the Atomic Design methodology and includes components, patterns, and templates. The design system also follows principles of user-centricity, inclusivity, simplicity, and consistency. The Sushi design system will be rolled out in the coming months across the Zomato App and Zomato Web versions. The Sketch app and Figma were used to build the design system and developers are currently working on implementations. The goal is to create a design system that is easy to maintain and can adapt to future needs.

Q&As

What is the Zomato Design System (Sushi) and why was it created?
The Zomato Design System (Sushi) is a large set of reusable components combined with a set of rules, storing visual design information, like colours or spacing, that enables Zomato to build consistent applications quickly. It was created to enhance existing features and to provide a more flexible and robust solution.

What design principles were kept in mind during the design process?
The core principles kept in mind during the design process were user centricity, inclusivity, simplicity, and consistency.

What are the components of the design system?
The components of the design system are foundations, a component library, patterns and templates.

What tools did Zomato use to create the design system?
Zomato used the Sketch app and Figma to create the design system.

What are the benefits of the design system?
The benefits of the design system are that it saves time, keeps the UI consistent, and allows designers, developers, product managers, and other stakeholders to focus on transforming ideas to live products.

AI Comments

👍 This article provides a great overview of Zomato's new design system, Sushi. It explains the core principles, components, patterns, and templates that have gone into building Sushi. It's clear that the design team has done an excellent job of creating a user-friendly and intuitive experience for their customers.

👎 This article does not provide enough detail on the development process behind Sushi and how it will be implemented in the Zomato App and Web versions. It would also be helpful to get more insight into the technical aspects of Sushi and how it will be maintained in the future.

AI Discussion

Me: It's about Zomato's new design system called Sushi. They built it from the ground up to provide an enhanced user experience for their app. They wanted to build a flexible and robust system that could keep up with the pace of their growth.

Friend: That's really interesting. What are the implications of the article?

Me: The implications of the article are that by creating a design system, Zomato can streamline their product development process and create a consistent and user-friendly interface. This also allows them to focus on transforming ideas into live products more quickly and efficiently. Additionally, creating a design system that is inclusive and accessible to everyone can help Zomato build a strong connection with their brand and product across multiple platforms.

Action items

Research other design systems and their features to compare and contrast with Zomato's Sushi Design System.
Create a prototype of a product using the Sushi Design System to test its effectiveness.
Develop a plan to maintain and update the Sushi Design System as Zomato grows.

Technical terms

Design System: A design system is a large set of reusable components combined with a set of rules, storing visual design information, like colours or spacing, and enables us to build consistent applications quickly.
Atomic Design: Atomic Design is a methodology for creating design systems, developed by Brad Frost. It is based on the idea of breaking down a design into its smallest parts, or atoms, and then building up from there.
Component Library: A component library is a shared repository of components that can be used to build consistent UI and speed up the development of an app.
Patterns & Templates: Patterns and templates are reusable snippets of code that can be used to create more complex, reusable, and scalable components.
Figma: Figma is a design and prototyping tool that is used to create and maintain design systems. It uses a dedicated panel for assets, making them easily available and better organized.