XFlow v1 App | UX Case Study
Strategic app design for a cross-border payments gateway
Summary
The goal was to design a payment gateway that would facilitate seamless global transactions, eliminating the current cumbersome methods of sending money across countries, with a focus on logical and intuitive user experience.
My Role
Research & Strategy
User Journey Mapping
Wireframing & IA
Prototyping
Visual Design
Team
3 Designers
Timeline
3 months
(Oct 2021 - Dec 2021)
Tools
Defining the Problem
Current methods of making cross-border payments involves several steps, multiple banks, the user needing knowledge of what the most affordable approach is, understanding technical terms, and much more.
> How might we design the experience of making global payments to be as intuitive as possible to users?
> How might we simplify the process such that users are equipped to complete the task on their own?
Approach
Industry Research | In-Depth Flow Walkthroughs | User Journey Mapping | Iterative Wireframing | Visual Design
Industry Research
& In-Depth Flow Walkthroughs
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 calls with the company's founding team involving the co-founder, front-end and backend engineers. These calls ran for 1-2 hours, focused solely on discussing every possible scenario and edge case for a particular user journey, which enabled to design team to kickstart the process.
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.
Snippet of User Journey | Make a Payment
Iterative Wireframing
& Visual Design
I was responsible for strategic design of the complete payments flow including all scenarios and edge cases. 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.
Money Movement Pathways | Detailing out every user scenario
Example of Iterative Design Process | Adding & Editing Metadata
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 entire team was able to take an informed decision on which variation to go ahead with.
First variation outlined in detail along with prototyped flow
Second variation outlined in detail along with prototyped flow
Product Thinking & Detail-Oriented Design
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 Guideline for Payment Details Section
Developer Guideline for Metadata Section
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
-
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