In today's saturated digital environment, app users have become more demanding and are looking for applications that are intuitive, functional, and extremely easy to use. It is essential to understand and apply UI and UX best practices to avoid errors that can damage your business reputation and cost millions.
However, despite the glaring importance of having a properly designed UI, many businesses still take it for granted until they are faced with dire consequences. This post will cover the importance of good UI and showcase the case study of how a poorly designed UI cost Citibank a $500,000 mistake.
First, let's clarify the essence of UI and UX.
Key things to know about UI and UX
User Interface (UI) and User Experience (UX) are often used interchangeably, and most of the time, people do not understand the difference between the two.
UI is the graphical layout of your website or application. It includes the screen layout, text, buttons, images, sliders, and all other visual elements that people interact with while using your application. UI designers focus on improving the look and feel of digital products.
On the flip side, UX refers to the overall experience a user has while interacting with your application or website. While UI designers are more concerned about how your application interface looks, UX designers focus on the interface's structure and how it functions. A great UI helps users navigate from one point to the other effortlessly and achieve quality interactions with your products.
Both UX and UI are essential and complement each other to increase user engagement, ensure proper usability, smoother navigation, and provide a consistent and user-friendly overall user experience.
As a result, when you give up on good UI and UX, you are taking a risk to heart your business in a sometimes very unexpected manner.
How poor UI cost Citibank $500 million
On 20th August 2020, a poorly-designed UI cost Citibank a $500 million error. Acting as an agent for Revlon, a company owing creditors millions of dollars, Citibank accidentally sent out about $900 million (principal and interest) to Revlon's creditors instead of $7.8 million (accrued interest).
With most of the loans undue until 2023, Citibank scrambled to get the funds back. Some creditors send the funds back; others refused, leaving the bank out with $500 million.
The image above shows the Flexcube interface that was used for the transaction. The interface was designed in such a way that to pay accrued interests; the user has to enter the transaction on Flexcube as if paying off the entire loan. This process is expected to trigger the payment of accrued interests to creditors while directing the principal to an internal Citibank account – wash account.
However, the subcontractor executing this particular transaction thought that by entering the Citibank wash account number into the principal field and checking the box, the principal payment would move to the wash account. He got it wrong – so the principal payment left the bank alongside the interests.
To make the principal portion of the payment stay in the bank, he should have inputted the wash account into the "front" and "fund" fields and checked their boxes too. This transaction was also signed off by three other people, including a senior Citibank official. They all believed setting the wash account and checking the box will keep the payment within the bank.
The error would have been avoided if Citibank's application UX was better thought through and tested, while UI was more intuitive to understand and use.
Other good reads you might be interested in:
