Every solution is born whenever there is a problem.

Rebel Foods is expanding drastically. As time is passing, we at Rebel Foods making our cloud kitchen module stronger with the support of awesome products around from SKU tracking, Inventory Management, our mother brand “Eatsure and much more”.

With Food Delivery growing exponentially worldwide, there is an opportunity to build the world's most valuable restaurant company on the internet, superfast. We have the formula to be that company. Today, we can safely say Rebel is the world's largest delivery only / internet restaurant company, and by a wide margin. It’s still Day 1, but we know we are onto something very, very big. We have a once-in-a-lifetime opportunity to change a 500-year-old industry.

Being with the Rebel for the last 3 yrs. I have seen the last 10+ products build in B2B and B2C domains.

Systems are huge, massive functionalities, growth is at 10x speed.

It is not always about building the product but also about product sustainability.

What problems did we start facing when the products expand?

1. Lot of inconsistency in the basic elements like typeface, colour, grids, framework, navigations etc.
2. Not one system from where we can refer elements that can be used across.
3. Very time consuming whenever a new feature is born.
4. Massive stakeholders and users for these products. So need to create a system, which will help users intuitively navigate and successfully interact with different sections of the product depends on their role wise permissions.

What are all ideas coming into the mind?

1. List down the different contexts, environments, types of users.
2. Depending on the above, start collating all the colours used in the system like primary, secondary, tertiary, error, greys etc.
3. Breaking the features.
4. Reducing the inconsistency.
5. Minimizing the elements.
6. Composing and naming the standard frameworks.
7. Making the variants.
8. Playing around and with auto-layout arrangements of the elements in the framework.
9. Defining the typeface used across depending on the purpose.
10. Categorising the illustrations type usage when and wherein different products.

Time for execution

Hussle in making the common usable types together.
This design system and component library, not only help designers but also help developers in execution. It really helps us in uploading our designs seamlessly on zeplin. A proper section of a style guide for developers was very useful.

1. Categorize the Design system into two parts one common usable and another feature-wise component.

2. Defining primary, secondary, tertiary, error, illustration colour variants, typeface, their weights, their alignments, icons, their sizes, illustrations variety(dense, simple and minimalism)

3. As products are vast, systems are huge, with approximately 50+ features across all products.
4. Defining each and every component feature-wise was really an important but time-consuming task. But in the end, it will increase the efficiency of the designers while building the new features or modifying the existing ones.
5. After making the parent components, there can be multiple child components. If changes are made in the parent component, it will automatically reflect on child components. But vice - versa is not true.

6. Variants plays a very important role.

This exercise was time-consuming but really going to be effective in building and modifying upcoming features. This also make us realise that there was some inconsistency across the product. So we decided to resolve this going forward one by one and shipping in every dev sprint. So that eventually our products will evolve fruitfully.

Learnings

1. Very effective structure comes out in terms of scalability
2. Fewer conversations with the dev team on assets hunting.
3. Some frameworks having the same functionality we build can be used across different products like text fields representation, calendar usages, filters, sorting, search etc.