BACK

Blade Design System - The DS that powers Razorpay

Building, maintaining and enhancing the design system that powers the products of Razorpay

Background

Razorpay is a "one stop money movement solution for businesses". It provides a range of products ranging from payments suite to banking suite, from loyalty program management platforms to physical POS device products. It helps processes online payments for online as well as offline businesses.

Problem Statement

How do we drive consistency for our products while facilitating collaboration and making it easy to use for consumers.

Razorpay has 6-8 different business verticals, and has over 100+ frontend engineers and 60+ designers. As the teams and products kept scaling up, three major challenges started to arise:
‍
1. Consistency:
Products started looking inconsistent, both from visual and interaction standpoint
‍
2. Collaboration: 
There used to be lot of back and forth between designers and developers before shipping a product
‍
3. Ease of Use:
Designers and engineers were creating custom builds for their products which could have been a reusable pattern.

Target Users

Our first set of primary users were designers and developers inside the org and then the next set of users were the end users who were using Razorpay's products.

What this meant was, while designing we had to keep in mind how using the system becomes easier for our primary set of user while keeping in mind that the visuals and interactions of the components should be easily usable by the secondary set of users.

Contributions as a Design Systems Designer

Over the past 4 years, working as a designer with the design systems team, I have been able to build and contribute to the growth of design systems in various ways. Here is a list of the notable contributions that I have done:

1. Shipping Components
2. Defining Motion & Interaction of Components
3. Defining Design Patterns
4. Building a Data Viz. System
5. Building Figma Plugins
6. Expanding Icon Library
7. DS Governance
8. Providing DS Eduction
9. Maintaining Figma Library
10. Making Blade Open Source
11. DS Evangelisation
12. Contributing to Brand Refresh

More details about each of these and the impact created are below.

Shipping Components

What I did?

  • Designed 30+ components from scratch that are being used across 50+ products across Razorpay.

  • Owned the end-to-end design of the component, including user research, API integration decisions, execution, stakeholder reviews, and final delivery.

Impact Created

  • Increased the overall component coverage of the design system by 40%.

  • Saved around INR 50,00,00 ($60,000) and 2000+ hours (~ 1 quarter) by creating reusable design components.

  • Drived systemic consistency and scalability in terms of visual aesthetics & interaction pattern.

Defining Motion & Interaction of Components

What I did?

  • Designed the interaction behaviour and motion of 32 components that are being used across 30+ products.

  • Owned the end-to-end motion design flow of the components, including research, execution, reviews, and final delivery.

Impact Created

  • Integrated consistent motion in 75% of the components in the design system.

  • Saved around INR 20,00,00 ($24,000) and 700+ hours (~ 1 month) by integrating consistent motion in the design components. 48L-

  • Drived systemic consistency and scalability in terms of component behaviour & interaction pattern.

Defining Design Patterns

What I did?

  • Identified and added 4+ design patterns to the system that are using across various product flows.

Impact Created

  • Drived systemic consistency and scalability by defining common reusable patterns.

Building Figma Plugins

What I did?

  • Built Pattern Creator Plugin for easier discovery and usage of UI patterns.

  • Made enhancement to Table Creator Plugin to generate tables with realistic data.

  • Added Amplitude instrumentation to track usage of plugins.

Impact Created

  • Easier discovery and adoption of UI patterns with being used by ~5 designers per week.

Building a Data Viz. System

What I did?

  • Identified ~10 chart component use cases and built 4 of the most used data viz. components

  • Defined the color logic and foundations for a scalable data visualisation syste,

Impact Created

  • Built a unified data representation system being used in multiple products.

  • Improved designer efficiency by 80% and developer efficiency by 90%

Expanding Icon Library

What I did?

  • Defined design guidelines for designers to refer & contribute icons to Blade.

  • Identified and added 28 system icons that are used/ requested frequently.

  • Collaborated with communication designers to add 40+ product icons to the icon library.

Impact Created

  • Setup processes so that designers can contribute icons to the system.

  • Scaled up the icon library to handle new products and use cases while maintaining consistency.

DS Governance

What I did?

  • Owned up the deviation requests coming from consumers for various components.

  • Reviewing and provided inputs on DS implementation in key projects across the organisation

  • Resolving consumer queries and unblocked them.

  • Conducted FGDs and brainstorming sessions with designers across teams to understand their pain points better.

  • Participated and made meaningful additions to the team roadmap.

  • Enabling others to contribute to the system by pairing up, providing inputs and reviewing the designs.

Impact Created

  • Drived systemic consistency across brand by validating & reviewing designs.

  • Contributing to the team roadmap to make meaningful impact.

Providing DS Education

What I did?

  • Teamed up with the Learning and Development team to create educational content on DS Onboarding for new joiners to the team.

  • Conducted multiple workshops, KT sessions and office hours to educate designers on design system.

Impact Created

  • Scaled up DS to the org by educating consumers on using DS and Figma functionalities.

Maintaining Figma Library

What I did?

  • Integrated new Figma features and functionalities in the components to keep every component up to date.

  • Ran internal plugins on a periodic basis to ensure the foundations in design and dev are in sync.

  • Conducted regular hygiene checks across the DS file.

Impact Created

  • Led to an overall 70% reduction in total number of variants across 40+ components without compromising the functionalities of the components.

  • Enhanced designer experience by making the components lighter.

  • Enhanced developer experience by running plugins and generating code syntax for each foundation.

Making Blade Open Source

What I did?

  • Led the initiative to make Blade DS open source on Figma community.

  • Upgraded the components, cleaned up and structured the DSL file to publish it on Figma community

  • Created teaser video for public announcement of the launch.

Impact Created

  • Evangelising the design system outside the organisation.

  • Sharing our learnings and building a holistic design systems community in India.

  • The Figma community file received around 16k+ downloads.

DS Evangelisation

What I did?

  • Wrote a detailed article on the component design process that we follow to design components.

  • Gave 4 external talks on various aspects of Blade Design System.

  • Made Blade design open source, teh community file is available in Figma community.

  • Created branding elements and announcement videos to celebrate wins.

Impact Created

  • Led to global recognition of Blade DS and it being placed along with some mature design systems in the DS community.

  • Evangelising the design system inside and outside the organisation.

  • Sharing our learnings and building a holistic design systems community in India.

Contributing to Brand Refresh

What I did?

  • Collaborated with brand designers and DS designers to test out the new foundation structure and later setting them up in Figma.

  • Migrated 25+ components to the new revamped foundations.

  • Paired up with designers from different pods enabling them to migrate the components to new foundations, by doing KT sessions and reviewing the components.

  • Upgraded the documentation structure of components for easier consumption.

Impact Created

  • Rigorous testing of foundations led to ensuring that the foundations work fine in different consumer products.

  • Led to faster migration of components to new refreshed foundation, enabling products to use them faster.