Unification of bill payments in Alpha Bank between web and mobile
Unification of bill payments in Alpha Bank between web and mobile
Alfa-Bank is one of the largest banks in the Russian Federation. The business aimed to simplify the transition of clients from the web version to the mobile application and reduce development costs through a unified customer experience.
My task was to standardize bill payments between platforms using only existing patterns and components.
Alfa-Bank is one of the largest banks in the Russian Federation. The business aimed to simplify the transition of clients from the web version to the mobile application and reduce development costs through a unified customer experience.
My task was to standardize bill payments between platforms using only existing patterns and components.
Year
2022
2022
Team
PM
Analyst
Designer
UX-researcher
PM
Analyst
Designer
UX-researcher
Исследования
Interview
Market research
UX-tests
Interview
Market research
UX-tests
Моя роль
Design
Prototypes
Support
Design
Prototypes
Support
Results
Results
I simplified invoice payments based on real user scenarios. The hypothesis was validated through an A/B test: the payment conversion rate increased significantly.
Later, I unified the solution across web and mobile to ensure a consistent user experience.
I simplified invoice payments based on real user scenarios. The hypothesis was validated through an A/B test: the payment conversion rate increased significantly.
Later, I unified the solution across web and mobile to ensure a consistent user experience.
I simplified invoice payments based on real user scenarios. The hypothesis was validated through an A/B test: the payment conversion rate increased significantly.
Later, I unified the solution across web and mobile to ensure a consistent user experience.
Process
Process
I started with analyzing both platforms to determine the approach to unification. I compared existing solutions, identified their advantages and disadvantages on each platform. It became clear that simply reusing a solution from one platform on another would not work, as there was no clear winner.
Then I analyzed user behavior and realized that the interfaces were overly complicated and did not correspond to real payment scenarios. The section poorly addressed the main task — to quickly detect and pay bills.
I started with analyzing both platforms to determine the approach to unification. I compared existing solutions, identified their advantages and disadvantages on each platform. It became clear that simply reusing a solution from one platform on another would not work, as there was no clear winner.
Then I analyzed user behavior and realized that the interfaces were overly complicated and did not correspond to real payment scenarios. The section poorly addressed the main task — to quickly detect and pay bills.
I started with analyzing both platforms to determine the approach to unification. I compared existing solutions, identified their advantages and disadvantages on each platform. It became clear that simply reusing a solution from one platform on another would not work, as there was no clear winner.
Then I analyzed user behavior and realized that the interfaces were overly complicated and did not correspond to real payment scenarios. The section poorly addressed the main task — to quickly detect and pay bills.
What I did
What I did
What I did
UX audit
UX audit
UX audit
job stories, IA
job stories, IA
job stories, IA
competitive analysis
competitive analysis
competitive analysis
production-ready design for iOS and Android
production-ready design for iOS and Android
production-ready design for iOS and Android
prototypes for tests
prototypes for tests
dev consulting and quality control
dev consulting and quality control
dev consulting and quality control
When I have bills with different payment due dates, I want to see their urgency in one place, so I don't miss the deadline and don't overpay.
Insight
When I have bills with different payment due dates, I want to see their urgency in one place, so I don't miss the deadline and don't overpay.
Insight
Insight
When I don't have bills, I want to understand whether to expect them in the future so I don't miss new bills.
Insight
When I don't have bills, I want to understand whether to expect them in the future so I don't miss new bills.
The average number of unpaid bills for a user at the time of entering the "Payments and Transfers" section.
Insight
The average number of unpaid bills for a user at the time of entering the "Payments and Transfers" section.
Insight
Solutions
Solutions
Both platforms grouped bills: by subscriptions in mobile app and by categories in the web. This created problems in several directions.
Both platforms grouped bills: by subscriptions in mobile app and by categories in the web. This created problems in several directions.
Both platforms grouped bills: by subscriptions in mobile app and by categories in the web. This created problems in several directions.
New bills visibility
New bills visibility
New bills visibility
Subscriptions and categories without bills distracted attention from already issued bills, reducing their visibility.
Subscriptions and categories without bills distracted attention from already issued bills, reducing their visibility.
Bills were scattered or hidden within categories, making it harder to assess the urgency of paying them.
Bills were scattered or hidden within categories, making it harder to assess the urgency of paying them.
Considering that the average user has 3 bills, I suggested removing the grouping. This allowed us to focus the user's attention only on what requires their attention right now:
Considering that the average user has 3 bills, I suggested removing the grouping. This allowed us to focus the user's attention only on what requires their attention right now:
Considering that the average user has 3 bills, I suggested removing the grouping. This allowed us to focus the user's attention only on what requires their attention right now:
quickly notice all the issued bills
quickly notice all the issued bills
prioritize bills by payment urgency
prioritize bills by payment urgency
До
После
До
После
До
После
До
После
Ключевая проблема
Widget
Widget
The widget is the first point of contact with bills. Understanding whether there are bills and whether action is required directly impacts the likelihood of payment.
The above issues also pertained to the widget, as its logic directly reflects the structure of the bills section.
The widget is the first point of contact with bills. Understanding whether there are bills and whether action is required directly impacts the likelihood of payment.
The above issues also pertained to the widget, as its logic directly reflects the structure of the bills section.
The widget is the first point of contact with bills. Understanding whether there are bills and whether action is required directly impacts the likelihood of payment.
The above issues also pertained to the widget, as its logic directly reflects the structure of the bills section.
Additionally:
Additionally:
Additionally:
In the mobile app, there were no amounts displayed, and account identifiers were not informative.
In the mobile app, there were no amounts displayed, and account identifiers were not informative.
In the web version, there were no logos, which reduced the visibility of bills.
In the web version, there were no logos, which reduced the visibility of bills.
Showing only issued bills focused users’ attention on actions, while provider logos and amounts were more quickly recognized as payment items.
Showing only issued bills focused users’ attention on actions, while provider logos and amounts were more quickly recognized as payment items.
До
После
До
После
До
После
До
После
Ключевая проблема
Payment flow
Payment flow
To pay a bill, users had to go through a subscriptions or categories screen. This provided no value to the user and only lengthened the path to payment.
To pay a bill, users had to go through a subscriptions or categories screen. This provided no value to the user and only lengthened the path to payment.
Without grouping, users could access bill payments in a single tap. The shorter the payment flow, the more likely a bill is to be paid.
Without grouping, users could access bill payments in a single tap. The shorter the payment flow, the more likely a bill is to be paid.
До
После
До
После
До
После
До
После
Ключевая проблема
What if there are no bills?
What if there are no bills?
Even if there are no bills at the moment, users need to know they are being tracked. This creates confidence and trust in the bank.
Even if there are no bills at the moment, users need to know they are being tracked. This creates confidence and trust in the bank.
Even if there are no bills at the moment, users need to know they are being tracked. This creates confidence and trust in the bank.
During UX testing of the mobile app, respondents were unable to confidently determine whether there were no bills. The difference between states was poorly perceived, which is equally problematic across all use cases.
During UX testing of the mobile app, respondents were unable to confidently determine whether there were no bills. The difference between states was poorly perceived, which is equally problematic across all use cases.
I made the “No bills” state explicit and unambiguous. It is clearly distinct from the state with active bills and can be understood instantly, without requiring users to interpret the interface.
I made the “No bills” state explicit and unambiguous. It is clearly distinct from the state with active bills and can be understood instantly, without requiring users to interpret the interface.
До
После
До
После
До
После
До
После
До
После
До
После
До
После
До
После
Team reviews
Team reviews
I worked with Slava on payment features, including automatic payments, templates, and subscriptions for receiving invoices. He demonstrated a strong sense of ownership and delivered high-quality work, conducting thorough competitor analysis and proposing well-optimized solutions. The project was successfully completed on time.
PO in Alfa-bank
I worked with Slava on payment features, including automatic payments, templates, and subscriptions for receiving invoices. He demonstrated a strong sense of ownership and delivered high-quality work, conducting thorough competitor analysis and proposing well-optimized solutions. The project was successfully completed on time.
PO in Alfa-bank
Slava is the most experienced and outstanding designer I’ve had the chance to work with. He doesn’t just create stunning UI — he turns ideas into a crystal-clear product. His work on the personal financial assistant for bank clients exceeded our expectations in both quality and speed.
CPO in Alfa-bank
Slava is the most experienced and outstanding designer I’ve had the chance to work with. He doesn’t just create stunning UI — he turns ideas into a crystal-clear product. His work on the personal financial assistant for bank clients exceeded our expectations in both quality and speed.
CPO in Alfa-bank
