Zomato Technology
Published in

Zomato Technology

Making Design Collaboration Seamless With Sushi

How Zomato’s Sushi design system ensures easy collaboration between designers, product managers and engineers.

The problem

As we grow, we adapt to the dynamic customer requirements by constantly modifying or adding new features to our products.

  • Slow design and development process — Lack of reusable design assets slow down designers and developers as the elements are then required to be created from scratch.
  • Onboarding difficulties — The onboarding of new designers and developers is a tedious process, and does in fact become more time consuming with an elaborate training.

The big question was

How can we ensure an all-encompassing positive experience for customers, designers, product managers, and developers?

The solution was

To build a design system that helps release and test new features better, and increasingly faster.

  1. Formulating the design system foundation
  2. Creating component libraries
  3. Governing the system
  4. Building support for all platforms
  5. Mapping workflows and onboarding

1. Auditing the UI inventory

Instead of starting from scratch, we took a deeper look at what we had created in the past. We had a collection of unlabelled components such as typography, colors, layouts, sizes, etc. This gave us something to start with.

Screenshots of our old product interface

1.1 Kickstarting the audit

Brad Frost (author of Atomic Design) suggests that the process to build the inventory should start by consolidating screenshots of the product interface, and then categorising them into chunks. Here’s how we achieved this –

2. Formulating the design system

Post the UI audit, we had a basic style guide ready with colours, typography, icons, spacing, shadows, information architecture, etc. These helped us create unified and reusable components that formed the foundations of our design system.

2.1 Naming conventions

A fundamental part of any design system is how we name our styles and components.

Solution 1

This approach included the usage of generic names in a more abstract format, such as xsmall, small, medium, large for typography or lighter, light, darker for colour. Even though this was easy to recognize, but was not scalable after a certain point.

Solution 2

Here, we added incremental numbers to names, such as Red1, Red2, Red3 and so on.

Solution 3

This approach allowed us to easily inject values between two adjacent places, as we kept a considerable amount of gap between two values. For example, between 10 and 20, we had room for nine different tints to be injected.

Solution 4 (we are using this)

This approach was similar, but better than solution 3 as it gave us more room to scale our values with gaps of 100 available between two adjacent places.

Naming convention explorations

2.2 Colours

Colours are one of the most important building blocks of any interface. Thus, it was imperative for us to clearly define all the colour tints in our design system.

20 Shades of grey
  • Generated colours based on HSL to ensure a harmonious colour palette
  • Validated colours with WCAG 2.0 rules in order to maintain contrast and accessibility
  • Bucketed all colours into primary and secondary groups. Each colour had 10 tints, which were generated with the help of HSL colour conversion.
Color system

2.3 Typography

Typography is another very important aspect of design systems. How we utilise font families, size and weights in our design depends heavily on typography.

  • Line height, letter spacing, and font weight were well defined, and HIG or Web standard guidelines were followed
  • Responsiveness was a key factor in formulating our typography system. For example, font size 13px on Mobile was mapped to 16px on Web

2.4 Icons

Icons are of prime importance because customers can be immensely motivated to perform an action by simply looking at an icon.

  • We created a new repository called Wasabi, and it goes extremely well with Sushi 🙂

2.5 Spaces

Spaces are needed everywhere when it comes to design, specifically in the form of padding and margins.

3. Creating component libraries

Components help designers work in a consistent way, and are used repeatedly throughout the development of a product.

  • Fast development — Since these are easy to use for developers, they ensure an increased delivery speed
  • Efficient collaboration — Anyone can pick up components from the component library and create their own solutions
  • Consistency — Since all stakeholders are referring to the same libraries and are using the same components, the usage remains consistent throughout
  • Customization and flexibility — Most of them follow a certain business logic that is integrated within them, and are open to adhering to new ones

3.1 How to create, contribute and add new components

Though we have a large set of components available in our repository called the library, sometimes the solutions to certain problems require us to design new patterns in our products.

  • Why don’t the current patterns support this use-case?
  • How can we use this component beyond our current scope?

4. Governing the system

The design system helps us create a better design culture where everyone can contribute to its continued development. This results in building inclusive customer experiences, as well as in achieving business goals faster.

5. Building support for all platforms

iOS, Android and Web platforms have their own specific requirements. The design system must have rich components in place to fulfil the requirements of these platforms.

6. Mapping workflows and onboarding

Most of the work involved in building Sushi helped bring people together, along with shipping products faster, and more effectively. It also reduced the amount of time it took for new members to get trained and adapt to the processes we follow internally. Now –

  • Design team members can collaborate and design with the latest design components
  • Developers can conduct rapid prototyping with clickable prototypes

What’s next?

Building a design system is an endless job, rather it’s just the beginning of a job. The ecosystem gets optimized version by version as we continue to ship new products and features.

  • Integrate remaining interface elements that are still in the ideation phase
  • Ensure that visible interface elements can be localized for multiple regions
  • Update components for new upcoming feature releases

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
vijay verma

Design Wizard ✦ Making Open source designs 2D/3D ✦ Creating NFT arts ✦ Voyaging in the Metaverse