User satisfaction increased from 5.7 to 8.6, and profit targets were exceeded by $78.5 million
Published at:
Jun 2, 2024
Read:
8 minutes
My role:
UX/UI Designer
After sanctions against Russian banks, they lost the ability to serve customers on iOS. The industry shifted towards advanced web applications, making PWAs popular among banks with modernized internet banking. I joined the bank during this time and led the complete redesign of the old internet bank, adding new features for a better client experience. In March 2023, I began redesigning the PWA. Initially, 23% of our clients used it, with a rating of 5.7. By April, usage rose to 45%, and the rating improved to 8.5.
Users often complained about the transaction history in online banking. This negatively impacted their experience, so we decided to investigate and redesign it.
Note: The design was developed for a Russian-language interface and translated automatically for demonstration purposes, so it may not fully convey the intended meaning.
Competitive analysis: We reviewed implementations by other major banks in the industry to understand what users are accustomed to.
Focus groups: We gathered insights on how users utilize similar functionality in other banks.
Client interviews: We explored what users would like to see in the application.
JTBD formulation: Based on user behavior studies, we identified key user tasks.
As a result, we identified several problems:
Considering the problem we faced, we proposed several hypotheses:
We selected a range of metrics to evaluate the result, which I'll show you later on.
Once we settled on the hypotheses, we began thinking about the solution and its delivery. We conducted brainstorming sessions to determine the essential functionalities.
It became clear that the task was too large for one design iteration, so the Art Director suggested breaking it down into three iterations. The first iteration focused on filters and search, the second on transaction display and details, and the third on financial analytics. This iterative approach allowed us to decompose the task, define deadlines, and launch the first results into production quickly, rather than prolonging the process for months.
We decided to study solutions from market leaders to understand what users are accustomed to and identify best practices.
I created a prototype in Figma and conducted corridor testing, asking bank employees to use the new functionality to check its usability and identify potential problems early on. The design process involved numerous meetings discussing technical limitations and business requirements.
First Iteration: I presented the solution, it was approved by the Art Director, and we launched an A/B test with 40,000 users over four weeks, where half used the old version and half used the new transaction history version.
Subsequent Iterations: A similar process was followed for the second and third iterations.
On the Operations History screen, the filters are in a fairly familiar position under the search bar. However, during usability testing, I observed that users scroll up and down while looking for operations when they need to customise the filters. Therefore, we decided to pin them at the top and make them sticky.
Handling financial analytics was a bit more challenging. We needed to show the user that they could click on an inactive circle to activate it and reveal the categories within it. However, it was difficult to make it clear to the user that the inactive circle was clickable. Then I thought about which design element works on the same principle, where only one of two options is possible and it is clear which element is active. Of course, this is a toggle or a switch. So, I decided to place the circles inside a switcher, which solved the problem. This will be shown further.
Different states of interface were considered
During this project, I collaborated with various teams on different tasks. Initially, apart from my main responsibilities of creating wireframes, I conducted competitive analysis, formulated user cases with analysts, and defended my solutions to stakeholders and team members. I also participated in brainstorming sessions with the product team and was partially involved in UX research with the UX research team. After handing over the designs to development, I supported the developers by helping to resolve issues that arose during implementation, addressing any ambiguities or new cases that had not been previously considered.
Upon accessing the "Transaction History" page, users see the functionality implemented in the first iteration, where they can choose the necessary filters or click "Find Transaction" and select where to search. By entering specific criteria (e.g., date, specific card, expenses over 1000 rubles), users see all transactions meeting these criteria.
Added Functionality: Based on the research data, we decided to add the option to download statements based on specified filters, providing a competitive edge.
Clicking on a transaction displays a modal window with detailed information. Here, we show comprehensive details about the transaction and reworked transaction status. Users can also change the category for more accurate financial analytics. There is a block showing client bonuses and management buttons (e.g., view receipt, create template, repeat transaction, set up autopayment). Each button opens a new window.
Like in video's example this is the process of setting up an autopayment allows users to fill in details like name, amount, and frequency (one-time, daily, weekly, monthly). After confirming the details and entering an OTP code, users see a success or error message.
Third Iteration: Users can access financial analytics, filtered by set criteria, with the option to reset filters. Financial analytics show two circles representing expenses and income, divided into categories. Selecting a category specifies the search.
I've learned to effectively collaborate with developers and other project stakeholders, gaining experience in teamwork and project management.
Furthermore, I've developed skills in analysing user behavior data and making decisions based on this data to enhance the user experience. I've also learned independence in decision-making and interacting with various product teams. Moreover, I contributed to an increase in the bank's profit.
I will be glad to any cooperation
What’s on
Skills
UI/UX Design
Collaboration
Decision-Making
Problem-Solving
Profit Optimization
User Research
Prototyping