Challenges and complexities of a
Technical debt, user dissatisfaction
Company
Transbank
rOL
UI Focal
aÑO
2024
A long-standing technical debt
Fernanda, a talented UX/UI designer at Transbank, faced a considerable challenge: the interface of the Android payment terminals had accumulated a technical debt that negatively impacted the experience of businesses. Users found the system slow, confusing, and unintuitive, leading to widespread dissatisfaction.
Renewal Initiative
In January 2024, the business and experience team decided to tackle these issues at their core. They set clear objectives:
Create an intuitive interface consistent with the company's Design System.
Ensure the interoperability of the interface with other products.
Maintain a consistent voice and tone with the company's ecosystem.
Reduce the number of screens to simplify transaction flows.
Decrease the execution times of each operation.
Scope
The UX team had repeatedly expressed the need for an interface compliant with the Design System, which adhered to good UI practices and offered adaptability to different devices (interoperability). In this context, it was proposed that the UI in the first phase support the following teams:
The process
Fernanda started by analyzing the basic payment flows, identifying seven key screens where users needed to make decisions. She questioned aspects such as the use of blue instead of the corporate magenta and the possibility of simplifying the tip options. In addition, she considered automating the printing of receipts to reduce unnecessary steps.
She also identified special flows that required additional parameters, such as "change" and "receipt", which added two more steps to the standard process, raising the total to nine.
Competitive Analysis
Fernanda conducted a comparative analysis with the main competitors in the market. She discovered that other devices completed a standard sale with a debit card in an average of 3 to 4 seconds, while Transbank's current system took 14 seconds. This difference highlighted the urgent need to optimize performance.
Usability Testing
She designed proposals that included simplifying steps and improving the interface. For example, she developed two keyboard variants to enhance accessibility for users with visual impairments. Usability tests showed that 100% of participants understood the functions of correct, delete, and accept.
“I like that one (option B) because it looks more like Transbank's, due to the colors, it's more intuitive” - Jesús.
“I personally prefer the truth. It's more noticeable, I mean, since I work with elderly people, they can't see or whatever, I like that one more (option B) - It's just that visually it looks better” - Génesis.
Additionally, she simplified the presentation of tip options, displaying the calculations in a more agile manner on the same screen. Users appreciated these improvements, indicating that the new interface was more intuitive and visually pleasing.
“I like it because it's quite detailed. Yes, I mean, I'm going to tell you like a legend” - Thamaris.
“The detail would be useful for me, it's super good” - Jesús.
The solution
After analyzing the results of the usability tests, an executive report was presented to the company. In this presentation, the results and opinions of paying users, cashiers, and store managers were highlighted. A notable comment was made by Paola Ledezma, (Divisional Manager) "Why did it take us so long to make these changes?".
The direct impact of this first MVP was a 40% increase in the speed of the standard flow, reducing it from 7 to 4 steps.
Scalable UI KIT
Leveraging the latest trends and updates from Figma, Fernanda implemented a system based on the new Variables functionality. She defined the sizes of the devices and created a series of parameters dependent on each size.
Results
Thanks to Fernanda's work, the new interface achieved:
Reducing the number of screens in transaction flows.
Significantly decreasing the execution times of each operation.
Improving user satisfaction, as they found the system more intuitive and accessible.
Prototype Instructions
Test the interactive prototype by following these steps:
Enter the amount: Input $5.000 and press the green button to continue.
Select the tip: Choose 10% and press "Continue".
Enter the parameters: Input "1" for employee and "2" for receipt. Press the green button to continue.
Simulate the payment: On the payment gateway screen, tap anywhere on the screen to simulate "tapping" the card.
Select the change: Choose $5.000 and press "Continue".
Enter your PIN: Input "1234" and press the green button to continue.
Print or don’t print the receipt: Choose either option.