All You Need to Know About the Sushi Design Principles

Did you know that targeted and planned user experience has the potential to drive up conversion rates by as much as 400%? This number speaks volumes about why it is crucial to have a sound design system in place. Many businesses involve a team of specialists to tweak the design system as per their corporate philosophies and customer preferences. Companies like Zomato have gone one step ahead and invented a totally fresh new design system.

Enter the Sushi Design System

This system is named ‘Sushi design,’ and Zomato’s designers have built it from grounds up. The intention of the system is to de-clutter valuable real estate on the small screen of a smartphone.

The design system breaks down the layout and format into reusable components. At different layers, these components store different sets of rules and visual information. This action clearly demarcates the different rules as well as maintains consistency within the same rules. They act as visual guidance in the product development stage and ensures that everyone is on the same page with these rules.

Why the need for a new system?

Zomato’s previous design system overhaul was done only in 2017. But they realized that 3 years is a lot of time from a design perspective, for their fast-growing company. Every new feature addition made a compelling case to go for a design revamp to augment the user experience delivered to mobile users.

What’s in the box?

At the heart of the new design system is the same set of rules that we see in Atomic Design Principles by Brad Frost. Every element is broken into an ‘atom’ which has two broad sets of information –

A — Principles — talks about triggers, behaviors, and other aspects that ensure a smooth performing app. Text truncation, spacing, scrolling behavior etc. form a part of the ‘principles.’

B — Basics — has visual guidelines for traits and elements like fonts, colors, typography, imagery, and styles.

Also, there is the component library, which acts as a visual database for all elements like buttons, bars, inputs, toggles, ratings, etc. these are the molecules that will need the atomic information (As described above) to be rendered seamlessly and consistently across the site and app.

These components are stored in a repository known as the library. So, when a designer needs to make a button, all he needs to do is invoke the corresponding library, without having to worry about characteristics like colors, spacing, size, shadow, etc. This action accelerates development time, as the designer need not second guess or do trial and error. This mechanism also removes any chances of inconsistencies in the visual aspects, and thus, improves the user experience overall.

To conclude

An organization needs to adopt a UI/U design as per their corporate offerings, and the audience targeted. Zomato seems to have got it right by building the Sushi design system from the ground up. This design upheaval has resulted in a fantastic user experience that is sure to add impetus to its growth story.