Aditya Birla Capital Digital
Overview
ABCD is a financial super-app built by Canvs — bringing payments, insurance, investments, and loans under one roof. I created product flow animations and design system motion to showcase and explain how the app works. Winner of Best in Class UI at Global Fintech Fest 2024.
Design System
Motion for Jasper — ABCD's design system — covering charts, information density components, sliders, and form inputs.
Charts Animated data visualisations covering line, bar, and gauge formats used across the investments and insurance flows.
Information density A condenser component that progressively reveals detail on tap, keeping dense financial data manageable on small screens.
Sliders and dials Input controls for EMI calculators, investment allocation, and coverage selectors across the app.
Scalable form systems Animated validation states, field transitions, and multi-step flows used across onboarding and KYC.
Design System
Motion for Jasper — ABCD's design system — covering charts, information density components, sliders, and form inputs.
Charts Animated data visualisations covering line, bar, and gauge formats used across the investments and insurance flows.
Information density A condenser component that progressively reveals detail on tap, keeping dense financial data manageable on small screens.
Sliders and dials Input controls for EMI calculators, investment allocation, and coverage selectors across the app.
Scalable form systems Animated validation states, field transitions, and multi-step flows used across onboarding and KYC.
Product Animations
Animations walking through key user flows — consolidated views, add-ons, cross-product navigation, and progressive disclosure patterns.
Consolidated view All active financial products in a single scrollable dashboard with real-time balance visibility.
Progressive disclosure Layered detail revealing on interaction, keeping the interface clean while surfacing depth on demand.
Add-ons Contextual upsell flows for insurance riders and loan top-ups, integrated directly into the product detail view.
Cross-product navigation Credit Score as a connector surfacing across all touchpoints, accessible from any product in the app.
Product Animations
Animations walking through key user flows — consolidated views, add-ons, cross-product navigation, and progressive disclosure patterns.
Consolidated view All active financial products in a single scrollable dashboard with real-time balance visibility.
Progressive disclosure Layered detail revealing on interaction, keeping the interface clean while surfacing depth on demand.
Add-ons Contextual upsell flows for insurance riders and loan top-ups, integrated directly into the product detail view.
Cross-product navigation Credit Score as a connector surfacing across all touchpoints, accessible from any product in the app.
