cft

Power of the Design System and a component library

Design system plays a very important role when organisation's products are increasing and scaling. It helps customers to retain and increase the recall value of the product's feature. Basic design principles, harmony and rhythm plays a very important role whole defining the basics of design system.


user

Sarvistha

a year ago | 3 min read


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.


Glimpse of variants!
Glimpse of variants!

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.

Upvote


user
Created by

Sarvistha

Principal Product Designer

5+ years experience working as a User Experience Designer with a demonstrated history of working with different brands like Paytm, Bank of Baroda, Coca-Cola, Uber, Rebel Foods, etc. with a human-centred approach. Graduated from NID, Ahmedabad as a Product Designer. Recently completed the "Data-Driven Product Management" course from IIM Lucknow. Got an opportunity to add impactful experiences in B2B, B2B2C and B2C products portfolio like chatbot system, inventory management, partner collaborations, training platform, IOT(Hardware and software connections), content management, storage systems, finance, banking, sports, food ecosystem and more to go :) Skilled in hard skills like Researching, Whiteboarding, Sketching, Wire-framing, Prototyping, System Mapping, Instant product solutions. Coming to soft skills I like training and managing the product design team, got an auspicious opportunity of leadership. Love to explore tools like figma, Jira, confluence, Adobe, Lottie, Miro etc.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles