Zomato’s new Sushi Design System

Raw Text

All new Zomato design system to create a smooth and amazing experience for our users

vijay verma · Follow

Published in Zomato Technology · 6 min read · Sep 10, 2019

--

17

Listen

Share

S ay hello to Sushi — Zomato’s all-new design system that we’ve built from the ground up. It’s not just a design system for us, but more than that it helps us provide a new and enhanced experience for our users using the Zomato app.

Let me break down what this actually means and what went into building Sushi.

What is 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.

Why build a Design System?

Our first design system was created back in 2017. It was designed to enhance the existing features but was not as scalable as we wished it would be. That’s why we started working on a more flexible and robust solution.

Given the pace at which Zomato is growing, it becomes imperative on our part to maintain good user experience. With every new feature we release, the aim should be to be able to utilize as many existing components so that we are not introducing any visual inconsistencies. Whether we are working with pixels, code, or words, it’s helpful to have design patterns in place — they not only save time but also keep our UI consistent, thereby creating a better user experience.

Instead of re-thinking the foundation of every new experience that we add on Zomato, the Sushi Design System will now allow designers, developers, product managers as well as other stakeholders to focus on easily transforming ideas to live products.

How did we come up with a brand new system?

Design Principle

Some core principles we kept in mind during this process –

User Centricity — We want to ensure that every interaction our users have with our product is a positive one and solves for something, thereby building a strong connection with our brand or product across platforms

Inclusivity — Our products serve everyone, from teens who are still in college to people not too savvy with modern-day technology. We want to design and build our platform which is viable by as many people as possible, regardless of ability, age and geography

Simplicity — We deliver delight and satisfaction through a clean and focused experience every time. By relying on existing, common design patterns that are intuitive in form, function and flow, we ensure a more user-friendly interface for all

Consistency — We create familiarity and strengthen intuition by applying the same solution to problems across our platformsStructure of Design System

We followed the Atomic Design methodology by Brad Frost and mapped it in our design system spectrum.

Creating Foundations

Foundations are digital brand guidelines, which define typography, color palettes, icons, spacing, shadow and information architecture of our design system. All foundations are atoms and are broken down into two levels –

Principles provide philosophical continuity but don’t provide any actual code, such as — how our text will truncate, scrolling behavior, spacing, etc. so that designers will refer to it and respect it while creating new design patterns.

Basics cover guidelines for aspects such as typography styles, colors, icons, imagery that help in formulating consistent components.

“A design system should not simply be a collection of user interface components along with some design theory.”

Component Library

Components refer to distinctive user interface (UI) elements that are used over and over throughout the development of a product — normally actionable or sometimes just to convey meanings. However, components can either be Molecules or Organisms as there is a fine line of distinction between the two. A few examples include buttons, inputs, selects, toggles, lists, ratings, tags, etc.

Each component is defined by titles, subtitles, images, action buttons and some optional text/elements.

All these components are stored in a shared repository called library, which is a great way to build consistent UI and speed up the app’s development. Consistency in UI increases familiarity with the app for users, bringing down user confusion to a minimum when interacting with our product.

Pattern & Templates

After defining the basics, we collect all the base components, which are then used to build more complex, reusable, and scalable snippets called pattern or templates.

The real deal

So this is all we had to share with you about Sushi. The real deal is that we are finally rolling out the new Zomato App and Zomato Web versions based on our design system, for everyone in the coming few months.

Here’s a sneak peek into our new versions –

The best tool for the job

We started building our new UI Kit, called Sushi, in the Sketch app. Because, back then everybody loved to work on a single Sketch file and only shared it when required with the help of the cloud, inVision or simply exported it. We did not highly depend on the usage of symbols or components; we just duplicated elements as needed and created another screen without using symbols to update elements. Searching for existing components and templates was always a tedious task.

Creating style and component symbols in Sketch is very much a possible task, however maintaining/using these symbols is where life gets tough. After exploring some alternatives, we found Figma to be the best suited for our design system. Figma uses a dedicated panel for assets, that makes them easily available and better organized.

Read: Why we switched to Figma here.

“The effort required to build a design system is tiny compared to the effort required to maintain it.” — Kyle Peatt

Development

All components and patterns are being implemented in our technical frameworks across platforms and our developers are working on these to push our patterns to the finish line. Soon, we’ll have everything in sync from the mobile app to web.

“A Design System isn’t a Project. It’s a Product, Serving Products. “ — Nathan Curtis

What next?

We’ve already been able to rely on our design system for some big projects and will continue to do so. The design system provides us with a shared understanding of our visual style and enables all of us to prototype and experiment with ideas in high fidelity faster and at a much lower cost.

The effort required to build a design system is tiny compared to the effort required to maintain it.

Lastly, Sushi was built on the belief that we can never predict all future requirements, we can only prepare for it. It has so far been a fruitful experience, with all the engineers and product managers understanding the value of our design system. We are looking forward to see where we go with this next.

Stay tuned to our blog for more insights on our design system.

More insight coming soon :)

Single Line Text

All new Zomato design system to create a smooth and amazing experience for our users. vijay verma · Follow. Published in Zomato Technology · 6 min read · Sep 10, 2019. -- 17. Listen. Share. S ay hello to Sushi — Zomato’s all-new design system that we’ve built from the ground up. It’s not just a design system for us, but more than that it helps us provide a new and enhanced experience for our users using the Zomato app. Let me break down what this actually means and what went into building Sushi. What is 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. Why build a Design System? Our first design system was created back in 2017. It was designed to enhance the existing features but was not as scalable as we wished it would be. That’s why we started working on a more flexible and robust solution. Given the pace at which Zomato is growing, it becomes imperative on our part to maintain good user experience. With every new feature we release, the aim should be to be able to utilize as many existing components so that we are not introducing any visual inconsistencies. Whether we are working with pixels, code, or words, it’s helpful to have design patterns in place — they not only save time but also keep our UI consistent, thereby creating a better user experience. Instead of re-thinking the foundation of every new experience that we add on Zomato, the Sushi Design System will now allow designers, developers, product managers as well as other stakeholders to focus on easily transforming ideas to live products. How did we come up with a brand new system? Design Principle. Some core principles we kept in mind during this process – User Centricity — We want to ensure that every interaction our users have with our product is a positive one and solves for something, thereby building a strong connection with our brand or product across platforms. Inclusivity — Our products serve everyone, from teens who are still in college to people not too savvy with modern-day technology. We want to design and build our platform which is viable by as many people as possible, regardless of ability, age and geography. Simplicity — We deliver delight and satisfaction through a clean and focused experience every time. By relying on existing, common design patterns that are intuitive in form, function and flow, we ensure a more user-friendly interface for all. Consistency — We create familiarity and strengthen intuition by applying the same solution to problems across our platformsStructure of Design System. We followed the Atomic Design methodology by Brad Frost and mapped it in our design system spectrum. Creating Foundations. Foundations are digital brand guidelines, which define typography, color palettes, icons, spacing, shadow and information architecture of our design system. All foundations are atoms and are broken down into two levels – Principles provide philosophical continuity but don’t provide any actual code, such as — how our text will truncate, scrolling behavior, spacing, etc. so that designers will refer to it and respect it while creating new design patterns. Basics cover guidelines for aspects such as typography styles, colors, icons, imagery that help in formulating consistent components. “A design system should not simply be a collection of user interface components along with some design theory.” Component Library. Components refer to distinctive user interface (UI) elements that are used over and over throughout the development of a product — normally actionable or sometimes just to convey meanings. However, components can either be Molecules or Organisms as there is a fine line of distinction between the two. A few examples include buttons, inputs, selects, toggles, lists, ratings, tags, etc. Each component is defined by titles, subtitles, images, action buttons and some optional text/elements. All these components are stored in a shared repository called library, which is a great way to build consistent UI and speed up the app’s development. Consistency in UI increases familiarity with the app for users, bringing down user confusion to a minimum when interacting with our product. Pattern & Templates. After defining the basics, we collect all the base components, which are then used to build more complex, reusable, and scalable snippets called pattern or templates. The real deal. So this is all we had to share with you about Sushi. The real deal is that we are finally rolling out the new Zomato App and Zomato Web versions based on our design system, for everyone in the coming few months. Here’s a sneak peek into our new versions – The best tool for the job. We started building our new UI Kit, called Sushi, in the Sketch app. Because, back then everybody loved to work on a single Sketch file and only shared it when required with the help of the cloud, inVision or simply exported it. We did not highly depend on the usage of symbols or components; we just duplicated elements as needed and created another screen without using symbols to update elements. Searching for existing components and templates was always a tedious task. Creating style and component symbols in Sketch is very much a possible task, however maintaining/using these symbols is where life gets tough. After exploring some alternatives, we found Figma to be the best suited for our design system. Figma uses a dedicated panel for assets, that makes them easily available and better organized. Read: Why we switched to Figma here. “The effort required to build a design system is tiny compared to the effort required to maintain it.” — Kyle Peatt. Development. All components and patterns are being implemented in our technical frameworks across platforms and our developers are working on these to push our patterns to the finish line. Soon, we’ll have everything in sync from the mobile app to web. “A Design System isn’t a Project. It’s a Product, Serving Products. “ — Nathan Curtis. What next? We’ve already been able to rely on our design system for some big projects and will continue to do so. The design system provides us with a shared understanding of our visual style and enables all of us to prototype and experiment with ideas in high fidelity faster and at a much lower cost. The effort required to build a design system is tiny compared to the effort required to maintain it. Lastly, Sushi was built on the belief that we can never predict all future requirements, we can only prepare for it. It has so far been a fruitful experience, with all the engineers and product managers understanding the value of our design system. We are looking forward to see where we go with this next. Stay tuned to our blog for more insights on our design system. More insight coming soon :)