Recognized by Forrester as India's #1 banking app in 2024, IDFC FIRST Bank sought to evolve its industry-leading design system. This initiative focuses on future-proofing the interface to seamlessly integrate emerging technologies like AI and Blockchain.
Role
Design System Architect
Project type
UI/UX design, User research and Usability testing
Client
IDFC First Bank
The Challenge
IDFC FIRST Bank didn't just need a UI refresh; they needed a future-proof foundation. With the strategic goal of evolving their mobile presence into a comprehensive "Superapp" and integrating emerging technologies like AI-driven insights and Blockchain, the existing design debt had become a bottleneck.
The brief was high-stakes: dismantle a fragmented ecosystem of legacy components and replace them with a high-performance system capable of supporting rapid feature scaling without compromising on the bank's signature security and trust.
Creating a true "System of Systems"
Background Research
The Diagnostic Audit
I led a "stress test" of the current library against the new Superapp roadmap. We found that while 60% of basic components existed, they lacked the property-driven flexibility (Variant logic) needed for modern engineering stacks. This forced designers to "detach" components, rendering the system's source of truth useless.
Through stakeholder interviews, we uncovered a "shadow design economy." Because the existing system was too rigid, product squads were creating their own custom patterns. This resulted in a 40% increase in design debt with every new feature release.
Background Research
Competitive Analysis
I conducted a comparative audit against direct rivals (HDFC, ICICI) and indirect disruptors (Revolut, PhonePe). The goal was to identify where IDFC’s legacy system was creating a "modernity gap" that hindered its transition into a Superapp.
Key Success Metrics Identified
To ensure the system's long-term health, I prioritized adoption tracking and efficiency metrics, transforming the library from a static asset into a measurable business tool.
Process
Double Diamond Framework
We followed the Double Diamond approach to ensure the design system was grounded in real user needs while remaining scalable for enterprise use.
Engineering the Architecture
Develop
Multi-tier Token Strategy
Global Tokens (Core): Moving to static values for color, type, and spacing.
Alias Tokens (Semantic): The logic layer. Translating
Blue-500toAction-Primaryto enable seamless dark mode and multi-brand theming.Component Tokens (Execution): Scoped attributes (e.g.,
Button-Radius) that prevent "system drift" when squads customize features.
I rebuilt the library from the ground up using Atomic Design principles, optimized for Figma’s modern engine:
Property-Driven Variants: I reduced 50+ detached buttons into a single Main Component with boolean toggles and instance swaps.
The "Lego" Approach: Molecules (like Input Fields) were built to be "slotted" into Organisms (like Transaction Cards), allowing for rapid prototyping of complex banking flows.
Building Intelligent "Patterns"
Develop
Smart components
Slot-Based Architecture: Used "slots" to allow feature squads to swap content (e.g., a simple receipt vs. a complex crypto-hash) while maintaining a locked container.
State Management: Built-in logic for Loading, Success, Error, and "AI-Suggestion" states, reducing design handoff specs by 28%.
Dynamic Content Hooks: Created flexible headers that adapt based on the transaction type (e.g., standard UPI vs. a Blockchain-verified cross-border payment).
Visual Hierarchy: Established a clear "Data-First" grid, ensuring that even with high information density, the user’s primary action is never lost.
Operationalizing the System
Deliver
Living Documentation
Semantic Documentation: Every component includes usage guidelines, accessibility specs (A11y), and "Do’s and Don'ts."
Engineering Parity: Mapped Figma variables 1:1 with [Storybook/React] props, ensuring that a "Primary Button" in design is the exact same object in code.
The "Promote" Workflow: When a squad (e.g., Wealth Management) identifies a gap, we co-design the solution. Once vetted for accessibility and scalability, it is "promoted" to the Core Library.
System Syncs: Established weekly office hours and a dedicated support channel to resolve "System Drift" in real-time.
Conclusion
Went from Design Debt to Design Equity
The overhaul of IDFC’s system replaced a fragmented "Shadow Economy" with a scalable, code-synced architecture. We moved the needle from drawing screens to engineering logic.
40% Debt Reduction: Eliminated the bottleneck of legacy patterns, allowing squads to launch features in days, not weeks.
Engineering Velocity: Achieved 1:1 parity between Figma and [Codebase], cutting front-end dev time by [X%].
100% Adoption: Reached full library saturation across core squads, ending "component detaching" entirely.
Global Standards: Built a foundation compliant with EAA (Accessibility) standards, future-proofing the app for the next billion users.
Product Design
№001
Brand Strategy
№002
No Code Dev
№003
UX Reserach
№004