Core Product Designer
Role
Fintech
Domain
3 months
Timeline
Tools
About the Platform
Global payments made affordable, secure & fast.
XFlow is a global payments gateway that simplifies cross-border transactions for businesses. Designed for speed, security, and cost efficiency, it enables seamless international payments with transparent fees, competitive exchange rates, and smart features like cashback on idle funds. With a focus on compliance and ease of use, XFlow helps businesses receive large payments effortlessly while maintaining full visibility on costs and conversions.
Transactions Listing - Key screen from the designed platform
SITUATION
The Frustrating Reality of Global Transactions
Making international payments should be as easy as sending money locally—but for most businesses, it’s anything but that. Traditional cross-border transactions have too many complex steps, hidden fees, and the need to navigate banking systems across multiple countries.
Businesses must juggle different banks, decipher technical financial terms, and often guess the most cost-effective way to transfer funds. Without expert knowledge, sending and receiving money globally becomes a frustrating and expensive process.
Currently, users have to:
The Challenge:
🔹 How might we rethink global payments?
🔹 How might we design an experience that makes cross-border transactions as intuitive as sending a local payment?
🔹 How might we simplify the process so users feel confident completing payments on their own?
APPROACH
A Deep-Dive into the Complexities
Industry Research 🔸 In-Depth Flow Walkthroughs 🔸 User Journey Mapping 🔸 Iterative Wireframing 🔸 Visual Design
I spearheaded the strategic design of the complete payments flow including all scenarios and edge cases. Before beginning the project, we conducted secondary research on the industry and studied the relevant technical terms in order to equip ourselves with sufficient knowledge to independently ideate on the design. To best understand the user and all the flows they will take on the platform, we participated in several deep-dive discussions with XFlow's founding team, including the co-founder and engineering leads. These discussions ran for 1-2 hours, focused solely on discussing every possible scenario and edge case for a particular user journey, which enabled us to kickstart the process having a thorough understanding of our plan of action.
User Journey Mapping
We mapped out all the journeys and edge cases through user flows, identified potential problem areas for users, and also kept track of features planned for future app versions as well, which we kept aside for version 1 due to development limitations.
Making a Payment | A snippet of the user flows
Devising Transaction Statuses
We mapped out every possible user scenario and outlined the backend processes that occur at each step. This allowed us to propose clear and meaningful transaction statuses, ensuring users weren’t left confused by vague system updates, which is an issue that is commonly faced in many platforms. Our goal was to eliminate ambiguity so users always knew exactly where their money was and wouldn’t be alarmed by unclear or poorly communicated statuses.
Money movement pathways and their statuses
APPROACH
Survival of the Fittest (Arguments) 🏆
In the process of creating the screens, every minuscule detail was discussed, challenged and successfully defended, solidifying the final version 1 design and making it ready to test with key users. Every design decision was thought through, backed by reasoning, and had gone through multiple rounds of testing first within the design team, then with the rest of the product team - and only those decisions that survived the test, made it through to the final design.
Wireframes
To keep up with the tight 3-month timeline, we created detailed wireframes for each flow. Given the urgency to go live, we streamlined our process by working on visual design in parallel—finalizing a set of wireframes and then turning them into high-fidelity visual designs. This approach ensured there was no time wasted, allowing the development team to stay on track while we continued refining the remaining flows.
Snippets of the wireframes
Design System
Given the time constraints and the defined MVP scope, we built a practical yet thorough design system. Rather than creating an extensive library, we focused on developing only the essential components needed for the initial release. This ensured consistency across the product while allowing the team to move quickly without unnecessary delays.
Snippets of the design system
The Iterative Design Process
Even for a non-primary flow such as add/edit metadata, there was extensive discussion and iteration followed in the process to arrive at the best possible user experience. I was responsible for creating all the flows and edge cases for the payments section, including this particular flow. I outlined two options for this flow, carried out quick testing within design team, highlighted the pros and cons of both and presented the same to the rest of the product team. Within this flow, I covered every case of adding and editing metadata, as shown below, post which the team was able to take an informed decision on which variation to go ahead with.
Variation 1 outlined in detail along with prototyped flow
Variation 2 outlined in detail along with prototyped flow
Balancing Vision with Feasibility
While designing every interaction on the screen, I kept the development effort in mind as well and made sure to discuss every screen thoroughly with the development team. At every step, our design decisions was challenged by the team, and were retained only upon successfully defending the reasoning behind them. During the design hand-off, I was responsible for ensuring that all edge cases were covered and outlined in the guidelines to eliminate the possibility of confusion.
Developer Guidelines | Metadata Section
Developer Guidelines | Payment Details Section
The Visual Design
As part of the product team, we spent several hours discussing the approach to take in order to finalise on the best possible user experience. Some of the topics we discussed included the colour and text for user-facing payment statuses, when and whether a button should become disabled or disappear from the page, the reasoning behind the order of information on a payment page, the best way to represent the movement of money on the platform, and much more.
LEARNINGS
Takeaways
🔸 I was able to gain deeper understanding into thoughtful decision making by involving the right stakeholders in an objective and unbiased discussion
🔸 Detail-oriented design from the very beginning in order to achieve a seamless handoff to the developer team
🔸 Macro-thinking in each aspect of the product to understand and predict how even the smallest decisions may affect the overall experience