ABR Bank App Redesign
A New User Experience for
Over 25 Million Users
Over 25 Million Users
Why the Redesign Was Essential
Over the years, the app accumulated a growing list of usability concerns
- User Expirience ProblemsCustomer support received numerous repetitive requests—users struggled to find the same essential features.
- Visual MisalignmentSome features of the application were developed by third-party vendors, and while their design aligned with the core visual language, it didn’t fully integrate seamlessly into the overall system.
- Technical and Design DebtOver the years, the application accumulated a substantial amount of design debt, which had never been properly documented. Additionally, there was significant debt on the frontend development side, particularly in design implementation and consistency, with no systematic tracking or oversight in place.
- Rigid SystemThe legacy system was rigid, making seamless integration of new features nearly impossible.
- It became clear that incremental fixes were no longer enough to address the growing usability challenges and structural limitations. The fragmented design, technical constraints, and lack of scalability demanded a more comprehensive approach. A bold, large-scale redesign was not just an improvement—it was a necessity to ensure a seamless, modern, and future-ready user experience.
Primary Goals & Challenges
Brand Positioning
Refreshing the bank’s image as a modern, tech-savvy competitor
User Satisfaction
Keep patters familiar for users but solve problems that leads for support requeststs
Retent Younger Users
Establish the app as an additional communication channel with customers
Design System
Create a design system that meets the app's current needs while providing a clear framework for future growth.
Multi-Device Support
Clients use a variety of devices, it was important to ensure the design worked smoothly on all screens.
Inclusive Design
App should be easy to use for for all users, regardless of ability, age, or background
The Work Process
1
Discovery & Research Phase
We gathered feedback from support, development, and business teams to identify key pain points. Based on our findings, we drafted an initial project roadmap.
2
Application Audite
We reviewed the application's implementation, components, and architecture to assess feasible changes and their impact.
3
UX Ideation
We generated and tested UX hypotheses to address pain points in the existing application
4
Design Phase
At this stage, we designed an entirely new set of components for the design system, along with new screens and user flows.
5
Implementation
During this phase, I worked closely with the development team, ensuring a smooth transition to the new component system.
6
Feedback Collection
At this stage, we gathered feedback from stakeholders and users.
UI Deep Dive
Design Decisions in Facts & Visuals
Application Grid
To ensure the system performs well on both modern and older devices, we opted for a 4-column layout, minimizing margin splits except in exceptional cases. The minimum supported screen width was set at 320 pixels.
Main Color
A key client requirement was to use the corporate dark blue instead of black in the interface. On one hand, this allowed us to create a smoother visual experience. On the other hand, it introduced challenges in accessibility for users with visual impairments. However, we successfully addressed these challenges.
Icons
A banking app requires simple, clear, and scalable icons for its specialized functionality. We designed them and established guidelines to ensure consistency across the system.
Harmonizing Legacy Requirements
A banking app must balance user convenience with legal requirements, often requiring certain screens to be displayed multiple times with the same information. We focused on making this experience more engaging and less repetitive to prevent user frustration.
"Before and After"
