International B2B Payments: My Journey as a Product Designer towards Optimization and Automation.

Gayane Belonovich
8 min readOct 23, 2023

--

Greetings! 🙂

About me

I’m Gayane Belonovich, a Lead Product Designer. I recently moved to the United States, obtaining two challenging visas for talented individuals: O-1 and EB-1. The latter granted me a Green Card (Permanent Residence). With years of experience designing intricate products, I decided to share one of the fascinating challenges in my career.

About article

In this article, I will showcase an example of how task in designing forms for international B2B payments evolved into a process of streamlining and automating internal client operations.

This journey not only resulted in the creation of a more flexible and user-friendly form but also left a positive mark on essential performance metrics.

Background Story

Back then, I was working at an outsourcing company that partnered with nearly all the major banks in the market.

Product

This specific challenge revolved around B2B banking. The MVP (Minimum Viable Product) for this banking sector had already been launched. (By the way, I won an A’Design Award for it)

Team

Our team was a group of around 10 people, with six of us deeply immersed in this particular task. I held the role of Lead Product Designer, and we had a junior designer join the project in its final stages.

In small teams, leaders often end up wearing multiple hats to ensure tasks are executed successfully. So, me too🙂.

I want to highlight that international payments generate substantial revenue for the bank, much like loans. This is why I dedicated special attention to this functionality.

The Task

General Task

In short, the task was to implement international payments within the updated banking system. This involved both backend and frontend work, with the goal of ideally doubling the conversion rate compared to the old banking system.

Deadline

The deadline was a couple of months to deliver a fully functional solution.

My Approach to the Task

Early Research

Before the bank specified its requirements, I dived into the task. I highly value preliminary research. When the bank provided design and development specs, it became apparent they needed an update.

Typically, a business analyst would handle this role, but we didn’t have one. So, Aliya, an analyst for the bank’s core system, and I stepped in to fulfill this function.

Collaboration from the Start

From the project’s beginning, Aliya and I took the lead, working closely with developers and maintaining strong communication with the bank.

I conducted in-depth research, interacted directly with internal departments, and stayed in touch with users and the business.
Our continuous updates and collaboration were key.

Unique Experience

This experience was far from standard. To begin with, the bank granted us significant autonomy. They trusted us, offered support when needed, and encouraged our initiatives without hindrances.

Research

It’s often a struggle to find one expert who knows everything about a complex task. You end up collecting information bit by bit. In my case, I pieced the puzzle together through research:

  • Customer Feedback Analysis: I began by sifting through and analyzing customer feedback and their calls to the support center regarding international payments. This served as a great starting point.
  • Stakeholders interview: Conversations were held with managers handling B2B clients, both in our bank and at rival banks, to gather crucial insights.
  • Payment Systems Research: Valuable information was obtained from payment systems department employees, both in our bank and at competitors.
  • FX Transaction Exploration: In-depth discussions were conducted with the FX transaction department (with Aliya’s assistance in understanding some tricky terms).
  • User Interviews: I also interviewed our target audience to really get inside their heads and understand their needs.
  • Competition Analysis: A deep dive into the competition included opening bank accounts at rival banks to understand how their forms worked during MVP development.

The bank helped us connect with internal departments, while I located the rest of the respondents on my own. I stayed in touch with them throughout the development and testing feature.

Challenges

Imagine it took 3 days to process a single payment 😱

I saw this as a fundamental problem. Simply tweaking the user interface of the form wouldn’t solve it.
Here’s why it took so long to process a single payment:

1️⃣ Incomplete Data Collection

The form didn’t collect all the necessary data for payment processing.
For users: this meant unclear reasons for payment delays and time spent in additional communication with bank managers.
For the bank: it meant manual payment verification and a heavy load on the back office.

For example, under certain conditions, the bank required the submission of a document that justifies the transfer. The client wouldn’t know about this until contacted by a manager. Furthermore, documents had to be sent for verification via WhatsApp or email, and clients had to frequently reach out to a manager to check on the document’s status. This happened because the bank’s internal system wasn’t set up correctly, and as a result, the old form didn’t show this option. And bank employee also had to manually input the document into the bank’s system.

2️⃣ Complex Form Completion

The form was way too long and didn’t provide any helpful prompts or guidance for filling in the fields. This meant it took more time to complete the form and led to errors.

For instance, there were no mask in the “Recipient Account” field, resulting in frequent mistakes.

3️⃣ Unresponsive Error Handling

Customers often made mistakes when entering information on the long form because the fields weren’t properly validated. Consequently, many payments got rejected, leading to extra back-and-forth with bank managers and consuming more time.

For example, if you entered the “Recipient Account” details incorrectly (a common occurrence), the form wouldn’t highlight the error.

4️⃣ Errors

Internal manual checks led to new errors for which the bank was charged by SWIFT (the international payment system). Having all the necessary payment data as required by SWIFT wasn’t enough; the payment had to meet its format requirements.

For example, the payment purpose was strictly regulated by the number of lines, the number of characters in each line, and the specific sequence of information with certain symbols. All of this had to be adjusted manually and took a lot of time. There were many such nuances.

I realized that without automation the bank’s internal processes, even if the number of payments increased, the bank would be forced to increase budgets for their maintenance, and payment verification times would exceed 3 days. Ultimately, customers would prefer a faster bank (they had already begun to do so at that time).

What I Did

My research helped identify the entire chain of international payments, spot issues at each stage, and propose solutions.
Let’s look on an overview:

1️⃣ Updating Requirements

I studied the SWIFT format and currency control requirements to shift the main manual payment validation to the back and front ends. I documented all the requirements for the frontend and backend in Confluence, which Aliya and the development team lead would update as needed. To create a clearer picture of field dependencies, I drew a diagram illustrating the form’s workflow.

The scheme of the form optimization that I created for the team.
Requirements for developers and designers, which I documented in Confluence.
Examples of requirements I wrote for “Recipient name” field

2️⃣ Form Optimization

The updated requirements helped me design a flexible international payment form, visually reducing it by half for desktop and the app.

On the left, the competitor’s form; on the right, the form I updated.

3️⃣ Field improvements

Each field now has clear requirements in the form of masks/hints and error validation before submitting the payment.

New form
One of my Figma files with all stages

Important note! :) At some point, the developers got tired of the numerous requirements and dependencies. To communicate the value of their work, I put together a presentation highlighting the importance of the feature and their efforts for both the business and customers, emphasizing the problems they helped solve. This helped maintain motivation and see the project through to the end.

Results

  • Swift Payments: Payment processing time was reduced from 3 days to 1 day thanks to the automation of internal processes and form optimization for users. The bank later reduced the payment review time to 1–3 hours.
  • Increased Number of Payments: Within 1 month, the number of payments increased threefold.
  • Reducing the workload: The work done significantly reduced correspondence with managers. It also helped alleviate the workload on internal departments for payment verification.
  • Error Reduction: User errors and back office errors when sending payments through SWIFT decreased, reducing the bank’s expenses.

What I Learned

  • Process Automation: Automating manual processes by moving manual validation to the front-end and back-end of banking.
  • Collaboration Expertise: Collaborating closely with cross-functional teams, especially with system analysts.
  • Root Cause Resolution: Addressing the root causes of problems, not just the symptoms.
  • SWIFT requirements: Understanding the SWIFT format and where character limitations come from.
  • Core System work: Learning how payments work in the core system.
  • Harmony: Finding common ground with internal departments by understanding their terminology and addressing their problems.
  • Autonomous Design: Working without a product manager.
  • Design System Development: Building a design system from scratch (more like a component library) that helped expedite the development process, maintain a consistent product, and avoid stylistic inconsistencies.

Insights

Designers Unleash Hidden Value:

Designers are often undervalued in the market. Beyond traditional user interface work, we can provide exceptional insights by looking deeper into issues.

Developers as Allies:

Collaboration with developers is essential. It’s not just designers adapting to the technical side; it’s a two-way partnership. Each party plays a critical role in delivering quality results.

Business Strategy Matters:

Strategy defines the direction, purpose and priorities of your work. It’s crucial to pay attention to it and not let it pass by. Many talk about goals, but not about strategy because it’s absent. Meeting the feature launch deadline is not a strategy, but many present it that way.

Remember, optimizing the user experience goes hand in hand with streamlining internal processes. Overlooking the analysis and enhancement of inner workflows might confine your role to mere UI updates. Consequently, persistent issues could resurface beneath the shiny new interface.

If you liked the article, please support me by giving it 50 claps 👏 👏 👏

--

--