The Evolution of the Cross-Border Transfer UI
Look Back & Reflect On How Much I Have Grown As A Product Designer
As a designer, it is important to look back and reflect on the progress, and how much I have grown during the days. It is also interesting to look at the evolution of the same project I’ve worked on.
In Jan 2017, I joined nanopay, a fin-tech startup aiming to transform the way the world moves money, as the sole product designer. My first task was to design the flow and UI for Finovate to demonstrate our ability and potential for cross-border payments. Finovate only allows live product to be shown, which means a tough and tight deadline, so we had to focus specifically on the payment flow only for the MVP.
Later the same year, we rebranded. And this time we had more time to prepare a better-structured and better-organized demo. With the advance of the technology and the great efforts of the whole team, this demo was a great success, which brought us the opportunity to collaborate with Interac e-transfer for cross-border payments.
User Flow and the GOAL
Both demos are for showcasing a cross-border payment use case. And they both followed a similar flow:
Version 1
Choose recipient — Decide how much you want to send — Choose currency — Show the exchange rate — Confirm- Send
Version 2
Choose payee, and purpose of transfer — Decide amount(with both sending and receiving currency options) and show rate — Confirm — Send
Most Important Goal: Transparent
From above, we can see the only change is the when we decide the amount, which is the also the most complicated but important part of the flow. People care about how much they need to pay in the local currency, how much the recipient will receive the foreign currency, how much the rate i sand how much the fee is.
Our goal is to make everything transparent, and we handed the right to the users for the final decision.
In reality, you might have experienced something like this: You want to order some Euros but what you will see in the bank is just how much you need to pay for the order. You will notice the rate you got is much lower then the one you search on Google. Why? Because the bank needs to make sure they won’t lose money in this transaction, so they will lower the rate to pay for the intermedia fee. They will charge you some money, the broker needs to charge, the receiving bank needs to charge you…You never know how much you will be charged for.
Also, for cross-border transfer, there are two cases:
- You have certain amount of money, and you want to send all of them, including the fee
- You want to send a specific amount of money for a foreign currency, do you don’t want the fee to be deducted from the transfer
If you are doing a wire in a bank in person, you can just ask the attendant to help you. However, if you are at home…So that is why we allow people to input in both the sending and receiving currencies, and the fee is always included upfront, you don’t need to worry about insufficient amount later.
Comparison & Critique
Now let’s take a look at the different UI on each step.
The two demos are made for different purpose — one to demonstrate our ability of cross-border payments, the other for showcasing the possibility of working with banks. Thus the UI will have different emphasis based on different purposes.
1. Choose Recipient
In version two, we incorporated with the banking system — let users to choose the account they would like to send money from. Also, we show the information of both parties as soon as the user select the recipient to make sure all the information is securely and correctly captured.
2. Decide How Much to Send
As discussed before, in the second demo we allowed users to input from both the sending and receiving currencies.
3. Confirm
4. Success
There is not much to say for the last two screens, just different styling.
Reflections
Reflecting on what I have done on this two similar flow, I’m actually think that I did a good job XD.
The first one still looks nice to me, I like the lively color contrast and rounded big buttons, the flow looks smooth and nice to me, though the two sidebars look intimidating… I have to thank nanopay for allowing me to go ahead with this art-direction when I was fresh and new. I brought in my personality to convey the message of being lively and friendly.
In the second one, we’ve rebranded. And we realized that a complicated system like banking system can hardly incorporate the UI like the first demo. We used the company branding, and convey the message of being calm, modest and secure.
From the comparison, I noticed I was not confident as I was trying to make everything look “designed”. Use the bright colors, draw big side bars, rounded buttons…I was trying my best to utilize the trending elements, to prove myself as a designer, to tell people that I can design.
But the best design is no design (with experience and experiments accumulated).
And I’m glad to see along the time, I’m gradually turning into the real me. Not need to show “design” on purpose, because it is not only visually, but the message, the interactions, and the experience.
Moving Forward
I believe every design has to be intentional and based on certain context. Never judge anything without understanding the background. I hope when the future me look back on this article, she won’t be laughing at how bad I was doing before, but actually give herself big applause on what she has achieved. Believe in the design decisions, those are the best ones I can do at that time.
Jingyi is a product designer and a beginner of front-end development. Welcome to connect via Dribbble, Linkedin, and Twitter.
