“The effort required to build a design system is tiny compared to the effort required to maintain it.” – Kyle Peatt
Say 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.
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.
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.
Some core principles we kept in mind during this process –
We followed the Atomic Design methodology by Brad Frost and mapped it in our design system spectrum.
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.
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.
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.
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.
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.
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.
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.
[If you are a product designer who loves challenges and is keen on working with Zomato, do check this out.]