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.
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.
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.
Over the past 2 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. Maintaining & Enhancing Components
4. Contributing to Brand Refresh
5. DS Governance
6. Expanding Icon Library
7. Providing DS Eduction
8. Defining Design Patterns
9. Maintaining Figma Library
10. Making Blade Open Source
11. DS Evangelisation
More details about each of these and the impact created are below.
What I did?
Designed 18 components from scratch that are being used across 30+ 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.
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.
What I did?
Analysed, validated and made enhancements to 5 existing components to support new use cases across products.
Collaborated with i18n team and added internationalisation support to required components (Amount & Phone Number Input).
Impact Created
Validating & supporting various product use cases without making the components obsolete.
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.
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.
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.
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.
What I did?
Identified and added 2 design patterns to the system that are using across various product flows.
Impact Created
Drived systemic consistency and scalability by defining common reusable patterns.
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.
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.
You can check the Figma community file here: Blade DSL Community File
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 4.6k+ downloads and 200+ likes within 2 months of its launch.
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.