I redesigned Kuda's homepage card security LottieFiles animation. Being able to block your payment card instantly can save you from losing your hard-earned money if the card is lost or stolen. 😪 This security feature gives users peace of mind, knowing they are in control when it matters most. 😮‍💨 Kuda is one of the leading banks offering this feature. They make it easy for users to understand by displaying a LottieFiles animation demo on their homepage. 🖥️ My redesign of the animation makes it interactive and adds motion to show the real-time impact of each action (blocking and unblocking). In this version, users can toggle the feature. When the card is blocked, the POS shows “Declined.” When unblocked, it reloads and shows a green checkmark for approval. It’s a small touch that helps users see how this feature protects them in real life. Built with LottieFiles State Machine, this Lottie animation shows how motion can tell a story of safety, control, and trust.

The final size of the animation with its interactivity is 28KB (dotLottie).

You can interact with the animation with the link below:

https://lottie.host/embed/cb7afde0-6505-4778-a7c2-69643f2e27c2/zAiflsKy9R.lottie?stateMachineId=StateMachine1

Get the source file of the animation on the LottieFiles platform for FREE:

https://lottiefiles.com/free-animation/interactive-fintech-app-payment-card-blocking-unblocking-F0BD3ykXjK

My breakdown of the animation process: