case study
A corporate mobile banking app
Roles: UX Researcher, UX/UI Designer
Challenges: Development of an app nearly from scratch, huge backend legacy, high security rate
Introduction
Promsvyazbank’s corporate clients are large organizations and holdings. Although IT services were available for them, both desktop and mobile applications did not meet market demands.
The task at hand was to develop a mobile application almost from scratch, as the previously developed application was hardly used.
The desktop service was also being reworked, and its primary users were identified as individuals who interacted with the company’s financial information, such as accountants and financiers. Since these individuals interacted with the company’s financial information during their work hours at their workplace, their work already revolved around interacting with the desktop.
The task at hand was to develop a mobile application almost from scratch, as the previously developed application was hardly used.
The desktop service was also being reworked, and its primary users were identified as individuals who interacted with the company’s financial information, such as accountants and financiers. Since these individuals interacted with the company’s financial information during their work hours at their workplace, their work already revolved around interacting with the desktop.
Still, another group of users had an interest in quickly understanding the company’s current status: top managers. Due to the nature of their positions, they often spend their working hours in meetings or on the go, have unpredictable schedules, and prioritize speed and efficiency when obtaining information. As a result, they were our primary target users.
Our stakeholder was a colleague from operations management who had a strong financial background and had previously served as a financial director.
I was responsible for both UX research and UX/UI design, and I led the project from its inception under the supervision of the lead of the corporate services design department.
Our stakeholder was a colleague from operations management who had a strong financial background and had previously served as a financial director.
I was responsible for both UX research and UX/UI design, and I led the project from its inception under the supervision of the lead of the corporate services design department.
User portrait
Any gender, over 40 years old.
Positions: CEO, COO (Operating Director), CFO
They have a significant level of responsibility and are often tasked with multiple assignments at once. They frequently have an irregular work schedule and workplace, attending negotiations, meetings, or traveling frequently. These individuals highly value their time and the speed at which they can obtain information.
The types of information they may find relevant:
— Status of payments under agreements and transfers to counterparties;
— Reliability of the counterparty;
— History of interactions with the counterparty;
— Operating indicators of the company (profit, revenue, dynamics of the movement of funds on accounts);
— Banking products and offers — opportunities to profitably dispose of the company’s free funds;
— News of financial and banking sphere;
— Communication with bank representatives.
Positions: CEO, COO (Operating Director), CFO
They have a significant level of responsibility and are often tasked with multiple assignments at once. They frequently have an irregular work schedule and workplace, attending negotiations, meetings, or traveling frequently. These individuals highly value their time and the speed at which they can obtain information.
The types of information they may find relevant:
— Status of payments under agreements and transfers to counterparties;
— Reliability of the counterparty;
— History of interactions with the counterparty;
— Operating indicators of the company (profit, revenue, dynamics of the movement of funds on accounts);
— Banking products and offers — opportunities to profitably dispose of the company’s free funds;
— News of financial and banking sphere;
— Communication with bank representatives.
Competitor analysis
Many of our competitors do not differentiate between small and large businesses, and their business applications offer combined functionality.
We conducted research on our competitors' choices in functionality and how they implement it.
We conducted research on our competitors' choices in functionality and how they implement it.
Screenshot from the competitor analysis board
User scenarios
and functionality
and functionality
We started by revealing 11 user scenarios and deconstructing them into 44 features. It took multiple iterations, including stakeholder interviews, scenario and feature development, and stakeholder validation.
The resulting scenarios and features were then divided into three priority groups: "green," "yellow," and "red." Next, we consulted with developers, and the vision for an MVP was nearly complete.
The resulting scenarios and features were then divided into three priority groups: "green," "yellow," and "red." Next, we consulted with developers, and the vision for an MVP was nearly complete.
Scenarios of the first touch
During the development process, we discovered that all user interactions with the application were overly formal. For example, clients had to fill out a form to connect to the mobile application, but the form was difficult to locate, and a bank employee had to activate the use of the mobile application.
We examined the current scenario, posed questions about it, and designed a target process to negotiate with the security service that initiated most of the formalities in the current process.
We examined the current scenario, posed questions about it, and designed a target process to negotiate with the security service that initiated most of the formalities in the current process.
A diagram that I have developed during the research
Search for the appearance and main screen’s composition
Displayed below are some attempts made to design the main screen.
Initially, "Search" and "Stories" features were included, but they were later removed since they were rarely used.
Ultimately, we decided to hide the account balance by default and only show it when the user clicks on it. This was to prevent nearby people from seeing the account status when the app is opened.
We also considered a bottom menu with a varying number of segments, but eventually settled on a menu with three elements that could be switched by swiping.
Initially, "Search" and "Stories" features were included, but they were later removed since they were rarely used.
Ultimately, we decided to hide the account balance by default and only show it when the user clicks on it. This was to prevent nearby people from seeing the account status when the app is opened.
We also considered a bottom menu with a varying number of segments, but eventually settled on a menu with three elements that could be switched by swiping.
Search for color schemes for graphs and diagrams
The color palettes used to display data must be easily readable, even for people with color blindness.
To ensure accessibility, we searched for different palettes, each designed to provide enough contrast.
To ensure accessibility, we searched for different palettes, each designed to provide enough contrast.
Different color palettes that were tried on
Design system
The mobile design system was derived from the desktop app’s system, which was simplified and enhanced. Certain components were designed specifically for mobile, while others were adapted from the desktop version.
Date picker started as a mobile component but later was updated to be a universal one
Transition to the development
Initially, we had to establish and assess the design system components. To achieve this, I created a table that listed all the components, allowing us to keep track of their development status for both Android and iOS. The table also served as a platform to gather ideas and tasks concerning the design system.
We presented the app in Figma, where both the target and MVP versions were illustrated. To support the app flows, we utilized navigation arrows and comments.
We presented the app in Figma, where both the target and MVP versions were illustrated. To support the app flows, we utilized navigation arrows and comments.
Results
In the end, the MVP included 7 user scenarios that allowed users to monitor their company’s financial information, including account balances, payment statuses, statements, and analytics for various time periods.
However, it was challenging to negotiate with the security service to ensure the confidentiality of users' sensitive information. Additionally, the backend had some legacy issues that slowed down request processing. To overcome these challenges, we simplified some of the flows during the MVP stage to release it quickly and gather feedback and data for further improvements.
However, it was challenging to negotiate with the security service to ensure the confidentiality of users' sensitive information. Additionally, the backend had some legacy issues that slowed down request processing. To overcome these challenges, we simplified some of the flows during the MVP stage to release it quickly and gather feedback and data for further improvements.
