At Blinkit (formerly Grofers), things move faster than the Flash. With multiple teams and parallel development cycles, it is difficult for designers to be constantly aligned and consistent with our limited resources library. We used to rely heavily on internal UI kits and Sketch libraries which were not regularly updated or maintained. As a result, we inherited a lot of design debt and disparity across platforms.

We started looking for a more comprehensive solution that would help us design consistent and meaningful experiences at scale and speed. To match the pace at which our business is moving, we need a system that allows us to be more flexible and agile in our design process. What we want to achieve with this system is to:

• Be consistent and cohesive across platforms — We audited our designs across the board, listed down the inconsistencies and figured that most of them were present because of the lack of unifying design philosophy. We need a well-maintained design system with reusable components reducing friction for any designer to quickly put together a screen without worrying about being out of alignment with our design principles.

• Improve speed — We aim to define all components, flows and patterns within our apps & website with the help of a few reusable components.It will speed up our design and development process and lead to better communication and collaboration across the company.

• Provide better user experience — We have had issues maintaining feature parity across platforms and providing a consistent experience because different designs are misaligned. Unknowingly, we ended up introducing a lot of cognitive load and frustration for our users.

Our design philosophy

Blinkit’s mission is to provide better lives for more people. We want to remove the pain of grocery shopping from our customers’ lives by making the experience as seamless and as fast as we can. Our design philosophy originates from this basic construct.

• Customer is the focus
• Clean and simple interface

Bolt design system

While deciding on the structure of our design system, we came across Brad Frost’s Atomic Design principles that resonated with our goals and allowed us to navigate through parts and the whole of our designs in an iterative way.

Atomic Design is a straightforward methodology created by Brad Frost to craft interface design systems more deliberately with explicit order and hierarchy. There are six distinct levels in Blinkit design system:

• Constants
• Elements
• Components
• Widgets
• Templates/Pages

Constants
Constants are the smallest possible units that define a particular characteristic of an element. A constant can be font (and its styles), colors, shadows, spacing, and icons in the Design System. Constants are used to give character to different elements based on their functions. We selected Gilroy for our iOS android and mobile web for its versatility. It is a clear and clean representation of a modern geometric typeface. While Gilroy maintains a fresh feel, it has a good balance with readability and updated color palettes. We have also updated the color palettes, which give an immaculate and fresh feeling.

Elements
Elements are the basic building blocks of matter, with distinct properties that can’t be broken down further without losing their meaning. To add value, they need to combine it similar to toy blocks or puzzle pieces. In a Design System sense, buttons, input fields, links, tags are all independent elements that become useful only when they are assembled.

Components
Components are groups of elements (or constants) that function together as a unit. In a Design System, molecules can be any number of elements ranging from question texts and confirmation buttons to search functionality with a form element and button.

Widgets
Widgets are groups of components, elements or constants bound together to form a more sophisticated structure. Applied to a Design System, this could be a unique section of an interface, such as a date picker that contains form elements, text, numbers, styles, calculations, navigation buttons etc.

Pages
A group of Widgets working together forms a Template/Pages, where something concrete like a layout becomes visible to end-users. Pages are unique instances that replace the template placeholders with actual content.

How does a design system help us?

Single source of truth:

• Usage of Figma’s history option
• A singular approach to Figma files
• Eliminates confusion about active files

Design System as a hierarchy:

• An organized approach to the design system
• Files are always in order and easily accessible
• Keeps the developer code design system in the loop

File discovery time reduced:

• Reduces the time in locating design files
• Every designer is fully aware of the file requirements
• More fruitful coordination between team members

Dev time saving:

• A code language of design components, elements and constants
• Reduces discussion time by the dev team as objectives are clear
• Increases daily productivity

Smoother onboarding process:

• Centralized circulation of information
• Induction and knowledge transfer are more efficient
• New member grasps the work process, design philosophy and structures faster

Happier Customers = Happy Team

It took us three months to get it to the desired shape and it is an ever-evolving process. Since we started using our design system as the only source of truth, communication among all stakeholders has improved significantly. We have a set of guiding principles to turn to if we find ourselves in a state of dilemma.

We not only built a Figma library but are also collaborating with developers to get all these components and widgets developed in Lego for quick and easy access. This will speed our product development cycle enormously. Stay tuned for another post where we will be sharing our learnings from a technical perspective.

Gaurav Jamini is a Senior UI Designer at Blinkit. Follow him on Dribbble, Instagram, and LinkedIn.

And yes Blinkit is hiring! If you want to be part of the design gang mentioned above, we’d love to hear from you.