Zomato Design System takeaways

 Developing the zomato design system

Goals: the team wanted to bring consistency in all the platforms where zomato app is used. like ios, android, etc. This was to ensure a better user experience.

the team wants to incorporate modern visual designs to give a fresh and delightful experience.

MAKING OF UI KIT

Tip: While redesigning an app, take care that the new app design user is finding it difficult to use. Like if we design it completely it will cause difficulty for the users to relearn the app use again. So having a fair balance between the old and the new design was also really important.

1. The team started designing the UI kit with the help of the Atom design principles. We are not designing pages. we are designing systems of components. 

Atoms > molecules> organisms>templates>pages

Atom: fonts, colors, icon, size

Molecules: button, form, fields, table cells

2. The team tested if these molecules work. If they worked, no problem. If not, we need to go back to edit the atoms. So point to be noted is that if the molecule component didn't work, we have to go back to make the changes at the atomic level.

Goals in detail

1. Drive consistent user experience across different products.

*Team listed down the design principles which define zomato as a brand.

* Make a sketch library with all components to make collaboration easier.

* Make a UIKIT with reusable code and components.

2. Make the app look modern and everlasting. 

*changes the iOS app font from SF UI to Avenir next.

SF UI: clean representation of geometric typeface, versatile, 

Avenir Next: gives a fresh feel, more readability

*Colour palette

the team made all call-to-action with green colors. The red color was used to cancel and delete the order.

green: signal for go, positivity, nature, green signal means go forward.

red: danger, negative connotations. 

3. Figure-ground: It is based on the ability to focus on one specific piece of info in a busy background.

For this: they used white cards with ground shadows. Users were able to focus better on the elevated info as compared to the flat info.

Added more white space to make the interface look cleaner, more breathable, increase legibility, and help users consume information in a focused manner.

Takeaways:

Collecting info online is a never-ending process. So it is better to first define your business goals, system, and MVP.