Mobile App for ProCredit Bank Ukraine

Mobile App for ProCredit Bank Ukraine

Mobile App for ProCredit Bank Ukraine

Mobile app for private clients

Mobile app for private clients

Mobile app for private clients

Company

ProCredit Bank Ukraine

My responsibilities

Stakeholder Interviews
Competitive Analysis
Prototyping
User Testings

Industries

Banking, Fintech

Date

June — December 2024

About ProCredit Bank

ProCredit Bank Ukraine is a commercial bank for private clients and small and medium businesses, a part of ProCredit Group — commercial banks operating in South Eastern and Eastern Europe and South America. The group's parent company, ProCredit Holding, is based in Frankfurt, Germany.

Intro

I joined this project after the high-level business requirements were gathered and a vendor created the first iteration of the app design. As a product designer from the bank, my task was to detail the business requirements, validate the first design iteration of MVP with the business (stakeholders), find areas of improvements and deliver the final design solutions to the vendor.

The app hasn't released yet, so I can't showcase all prototypes. But there were a lot of challenging design processes, insights and reflections to share.

Team

Team

Team

Bank team

Bank team

Bank team

✹ tech product manager

✹ project manager

✹ business analyst

✹ product designer x2

✹ UX writer

Vendor team

Vendor team

Vendor team

✹ project manager

✹ business analyst

✹ UX/UI designer

✹ developers

The start

The start

The start

When I got the link to the mockups, I saw that the app design was divided into 11 epics:

When I got the link to the mockups, I saw that the app design was divided into 11 epics:

When I got the link to the mockups, I saw that the app design was divided into 11 epics:

Onboarding

Home page

Info and support

Transfers

Utility payments

Cards

Deposits

Loans

Referral program

App settings

Reports

Security

Epics consisted of different quantities of user flows and features. I needed to understand how to build a design process to validate existing mockups. So, after high-level studying the design of all the epics, I initiated a series of kick-off meetings with stakeholders.

Epics consisted of different quantities of user flows and features. I needed to understand how to build a design process to validate existing mockups. So, after high-level studying the design of all the epics, I initiated a series of kick-off meetings with stakeholders.

Epics consisted of different quantities of user flows and features. I needed to understand how to build a design process to validate existing mockups. So, after high-level studying the design of all the epics, I initiated a series of kick-off meetings with stakeholders.

Kick-offs

Kick-offs

Kick-offs

Stakeholders are heads of departments working with private clients and the head of marketing. During the set of kick-of meetings, I questioned stakeholders regarding:

Stakeholders are heads of departments working with private clients and the head of marketing. During the set of kick-of meetings, I questioned stakeholders regarding:

Stakeholders are heads of departments working with private clients and the head of marketing. During the set of kick-of meetings, I questioned stakeholders regarding:

My questions

My questions

My questions

✹ why the bank needed a new mobile app

✹ how were the features for the MVP chosen

✹ weaknesses of the current mobile app

✹ bank’s target audience and future app users

✹ what are key bank products and features in the app

✹ what users or clients research had been already conducted

✹ a role of a new mobile bank for business, what are business expectations

✹ the possibility of providing user testings (in terms of time and budget)

✹ success metrics of a new mobile app in general, and for specific sessions/flows

To validate the app with stakeholders and users having an enormous number of screens, it was obvious for me to move epic by epic.

To validate the app with stakeholders and users having an enormous number of screens, it was obvious for me to move epic by epic.

To validate the app with stakeholders and users having an enormous number of screens, it was obvious for me to move epic by epic.

Design Process

Design Process

Design Process

Each epic included a different number of user flows and features. Therefore, the design process structure could vary slightly. But in general, I initiated the next design process for one epic (or several user flows from this epic):

Each epic included a different number of user flows and features. Therefore, the design process structure could vary slightly. But in general, I initiated the next design process for one epic (or several user flows from this epic):

Each epic included a different number of user flows and features. Therefore, the design process structure could vary slightly. But in general, I initiated the next design process for one epic (or several user flows from this epic):

Next, I want to show partially this design process using the example of just one, but key, screen from epic Deposits.

Next, I want to show partially this design process using the example of just one, but key, screen from epic Deposits.

Next, I want to show partially this design process using the example of just one, but key, screen from epic Deposits.

Epic "Deposits"

Epic "Deposits"

Epic "Deposits"

Intro

Intro

Intro

‘Deposits’ is a key epic in the application, as the bank has an image of a reliable bank for savings in Ukraine. ProCredit communicates regarding financial literacy and savings in marketing campaigns. Thus, the user experience of opening and managing savings even in the app's MVP must be convenient and pleasurable.

‘Deposits’ is a key epic in the application, as the bank has an image of a reliable bank for savings in Ukraine. ProCredit communicates regarding financial literacy and savings in marketing campaigns. Thus, the user experience of opening and managing savings even in the app's MVP must be convenient and pleasurable.

‘Deposits’ is a key epic in the application, as the bank has an image of a reliable bank for savings in Ukraine. ProCredit communicates regarding financial literacy and savings in marketing campaigns. Thus, the user experience of opening and managing savings even in the app's MVP must be convenient and pleasurable.

“Deposits” included next user flows/features:


✹ Savings screen
✹ Managing Saving Accounts
✹ Process for Opening a Term Deposit
✹ Top-up/update deposit
✹ Withdraw deposit
✹ Scheduled & recurring payment
✹ Transfer templates

“Deposits” included next user flows/features:


✹ Savings screen
✹ Managing Saving Accounts
✹ Process for Opening a Term Deposit
✹ Top-up/update deposit
✹ Withdraw deposit
✹ Scheduled & recurring payment
✹ Transfer templates

“Deposits” included next user flows/features:


✹ Savings screen
✹ Managing Saving Accounts
✹ Process for Opening a Term Deposit
✹ Top-up/update deposit
✹ Withdraw deposit
✹ Scheduled & recurring payment
✹ Transfer templates

In this case, I will showcase partially the design process for the savings screen in the epic deposit.

In this case, I will showcase partially the design process for the savings screen in the epic deposit.

In this case, I will showcase partially the design process for the savings screen in the epic deposit.

Participatory design with stakeholders

Participatory design with stakeholders

Participatory design with stakeholders

After I analyzed all the screens from this epic with a business analyst and knew all the constraints, I started to validate the design with stakeholders.

After I analyzed all the screens from this epic with a business analyst and knew all the constraints, I started to validate the design with stakeholders.

After I analyzed all the screens from this epic with a business analyst and knew all the constraints, I started to validate the design with stakeholders.

Wireframes for several user flows from this epic

In general, our meeting agenda was as follows:

In general, our meeting agenda was as follows:

In general, our meeting agenda was as follows:

Meeting agenda

Meeting agenda

Meeting agenda

✹ presenting wireframes of the first iteration (no clickable prototype)

✹ presenting a similar screen from competitors' apps

✹ low-fi sketching during the meeting (optional)

✹ gathering adding requirements, and ideas for second design iteration

✹ gathering comments regarding UX writing

When stakeholders didn't validate the first iteration of the design from the vendor of specific screens in the epic, they started to propose their interface idea. With many years of expertise in banking, they provided interesting hypotheses and ideas. I sketched their ideas during the meeting and argued what was ok and what was not from the point of view of my knowledge in UX. After meetings, I designed hi-fidelity wireframes based on new requirements. When new designs had been validated by stakeholders, I started planning of user testing.

Concept testing

Concept testing

Concept testing

While validating the Deposits epic with stakeholders, one of the most challenging screens was the start screen, which users will see when they click on Deposits in the bottom navigation menu. This screen must encourage users to diversify their savings portfolio with different deposit products and currencies. After ideation sessions, I created two options for the design of this screen. Two options seemed to solve the business requirement, but we couldn't choose the one. So there was a need to conduct concept testing.

While validating the Deposits epic with stakeholders, one of the most challenging screens was the start screen, which users will see when they click on Deposits in the bottom navigation menu. This screen must encourage users to diversify their savings portfolio with different deposit products and currencies. After ideation sessions, I created two options for the design of this screen. Two options seemed to solve the business requirement, but we couldn't choose the one. So there was a need to conduct concept testing.

While validating the Deposits epic with stakeholders, one of the most challenging screens was the start screen, which users will see when they click on Deposits in the bottom navigation menu. This screen must encourage users to diversify their savings portfolio with different deposit products and currencies. After ideation sessions, I created two options for the design of this screen. Two options seemed to solve the business requirement, but we couldn't choose the one. So there was a need to conduct concept testing.

We decided to conduct an unmoderated test on the Maze platform with one group of participants, as we were limited in time, for this screen. Previously, I conducted moderated concept testing with two separate groups of users. It took two weeks to recruit participants, book time, and analyze results — so it was argument not to provide moderated user testing in this case.

User Testing method

Unmoderated concept testing, included tasks and open questions

Tool

Maze

Number of participants

19

User criteria

Users who have already opened deposits in ProCredit or other Ukrainian banks

Evaluation criteria

✹ Task success rate
✹ Time
✹ Voting results

In this project, I created concept testing report in FigJam with documented evaluation criteria, insights, conclusion to each task and general conclusion.

In this project, I created concept testing report in FigJam with documented evaluation criteria, insights, conclusion to each task and general conclusion.

In this project, I created concept testing report in FigJam with documented evaluation criteria, insights, conclusion to each task and general conclusion.

Concept Testing Report in FigJam

Finally, one design option for the home deposit screen was validated with stakeholders and users. After that, I handed-off this design in the development stage.

Finally, one design option for the home deposit screen was validated with stakeholders and users. After that, I handed-off this design in the development stage.

Finally, one design option for the home deposit screen was validated with stakeholders and users. After that, I handed-off this design in the development stage.

Next, we continued to validate other screens and user flows in this epic.

Next, we continued to validate other screens and user flows in this epic.

Next, we continued to validate other screens and user flows in this epic.

Project results

Project results

Project results

To validate the first design iteration and to design the final iteration of the MVP for the banking mobile app, together with a team we did:

11

11

11

epics finalized

>300

>300

>300

screens, handed-off in the dev

~40

~40

~40

meetings with stakeholders

8

8

8

unmoderated user testing

4

4

4

moderated user testing

Now, I'm waiting for the release of the app to showcase the full design.

Now, I'm waiting for the release of the app to showcase the full design.

Now, I'm waiting for the release of the app to showcase the full design.

The next case →

The next case →