ICICI Bank Mobile App interface for Credit Card with toggle buttons
The design byte - 001 // SAT. 20 JUNE. 2020

The intelligent feature and UI that saved the day 

Welcome to design bytes, small stories and observations related to various domains of design. Today’s observation related to user interface design. I can recall that day very vividly. I was in urgent need of cash. I rushed to the ATM. Quickly pulled out my card and requested 40K in cash. What happened later was about why I did not get the money and how was I saved from the mess.

I had inserted my credit card in the ATM, instead of the debit. This is technically called a cash-advance transaction. It attracts a 2–3% flat fee on the amount being withdrawn, plus interest to be charged until repaid without the interest free-window period. An interest-free window period is the amount of time you get to repay your credit card when you do a swipe transaction. Had I swiped the card for 40K I would have got a 45 day period to return the money. But fortunately, the feature in the ICICI bank mobile app credit card interface came as a saviour. This is what I want to share.  

So here’s the story. I rushed to the ATM and placed a request for 40k. The transaction is declined. It irritates me. When I have money in my account why did the transaction decline? I make a second attempt, again declined. I said to myself something is wrong. This is when I realised I was attempting the transaction with my credit card.

Why the cash request did not go through? 
The credit card cash request did not go through because I had switched the feature ATM withdrawal ‘OFF’ on my ICICI mobile app credit card interface (See fig.1). So, if by mistake I attempt a cash transaction with my credit card it will not go through. A feature that saved my day. An intelligent and user-friendly feature mapping a latent need.
Figure 1. Toggle button to switch off ATM transactions in the mobile interface
The facility of the toggle buttons for ATM cash withdrawal, online transaction and international transactions are handy. It gives you complete control over the behaviour and usage of the credit card, so that forgetful people like can set their preferences.

Auto-renewal for subscription payments

ICICI Bank Mobile App interface for Credit Card with toggle buttons
Image 2: All features are switched OFF, I can switch then ON when required.
There is one more scenario to demonstrate the usefulness of these toggle buttons. Imagine you have saved your credit card information for a subscription at the merchant end. Most of the time the subscriptions services prefer auto-renewal for payments and wish to save the payment modes (your credit card details) at their end. However, the facility to switch-off the auto-renewal for a subscription is generally not upfront. Everyone has experienced losing money to auto-renewals, which you forgot to cancel.
“Your understanding of a feature and its user interface 
broadens when you experience the contexts in
which it is found useful.” 
– Mandar Rane 
To avoid such auto-renewals, I keep the switch for online transactions ‘OFF’ in my mobile app credit card interface. So even if a transaction is attempted by the merchant, it gets rejected and I get an alert via SMS. I review the subscription and if required make the payment. One might argue that auto renewal is useful as I don't have to pay attention for petty things. Yes, you are right, this is important when the transaction cost of the subscription is of high value, I mean transactions in US dollars for a website plugin purchase, with a yearly subscription. This is when the feature to toggle ON or OFF at will is helpful for people like me who are forgetful. So, if your bank offers these features on your mobile app, try them.

One more feature that is useful is that of the virtual card and I assume not many people are aware of it. In this case, apart from the physical card, you can create your own virtual card. It allows you to set the credit-limit in the card and use it specifically for online transactions. This is helpful because the whole credit-limit of the physical card is not exposed to the internet. 

Do other banks have this feature? Why toggle buttons should be preferred in this scenario?

Yes, below is the image of a similar feature by an Indian bank which allows a switch-off but without a toggle button. Switch off button as text labels do not display the status of the service. A toggle makes the status of the service clear and upfront at a glance, instead of digging for your decision two links deep.

Choice of user interface elements plays a key role in designing experiences. The differences are subtle and therefore may go unnoticed, but they make a huge difference until experienced.
Axis bank mobile app interface
Image 2: An Indian bank with similar feature but executed without a toggle button
One more example of similar interface on CitiBank App - Picture credits // Rugwed Deshpande
Citibank Userinterface
Attacking the problem at the source:
Well, all of this can be resolved by attacking the problem at the source, I mean when I insert my card in the ATM, the system can alert me by saying, its a credit card and the transaction charges will be high. I don't know whether banks do it, we need to find out. Check how your credit card behaves by using it at the ATM.