Payments Gateway user flow

E2E Add payment method user flow: Property Management Company based in LA offers Customers easy to use Payments setup feature to Quickly make payments ON-the Go.

Project Overview

I worked as the lead UX UI designer for the new fast payments Gateway service offering an end to end Add payment method user flow for Property Management Company based in LA.

This Payments service offers Customers an easy way to make payments in few minutes.

I partnered with a lead design architect, lead design researcher, 2 project managers, 1 content designers, a team of engineers, engineering lead, and the VP of payments and finance. This project increased vendor payments independency and bank fees with a new payment method setup that raised 24% user satisfaction and $3M additional annual revenue.

Problem

Customers currently can only make Payments to cover their property expenses and invoices via Desktop Which can be difficult for customers who wants to pay for all incoming invoices on the go by using their Mobile phones. Defining the friction points are

  • Drive an adoption plan to the a fast payment feature solution via the App

  • Understand the customer needs and expectations

  • Enhance the way to communicate fees and charges

  • Added convenience and value in local currency.

Solution

Through iterations of user flow mapping, wire-framing, prototyping, and conducting user researches, we arrived at the following solution: Offer a fast payment feature enabling to pay for all incoming invoices on the go by using their Mobile phones. Payments Gateways accepts payments with bank, Debit card or Payoneer accounts. With this solution customers can have more flexibility and control over their finance. This solution increases CSAT scores in payments and reduces dependencies on external vendor for initiating payouts and saving 3M in processing fees.

Design Exploration

Product Design strategy

Mockup V1.0

In Mockup V1.0, With the help of product partners, we have explored many design directions that helps us identify the design strategy and direction with the P1 goal in mind is offering a fast way for property owners and managers to Manage, Request, submit invoices and pay for all incoming invoices on the go by using their Mobile phones. How might we design an intuitive Information architecture that easily guide user to view all invoices and make a payments in easy steps?

Onboarding flow is easy and takes less than 5 minutes to complete. The goal is to increase adoption of initiating payments via app in easy simple steps.

Major design iterations

Mockup V1.1 > Submit payments requests user flow

In Mockup V1.1, after we have decided on the design strategy based on simplicity and intuitive Information architecture. We moved to focus on the entry point to the user flow. How might we increase discoverability with intuitive design?

Design Iteration

Mockup V1.5

In this version that is in smoke testing phase currently. We introduced a holistic end to end user flow with easy to use user interface selection feature offering a fast way for property owners and managers to Manage, Request, submit invoices and pay for all incoming invoices that helps our customers make an informed decision when Adding New payment method or updating an existing instrument.

Add Payment method user flow

Confirm your payment details user flow

Quickly pay for invoices on the go with your added Debit Card user flow

Prototyping with Figma

Previous
Previous

e-Commerce Optimizing Check out Buyer flow- Mobile App

Next
Next

EdTech - Data Visualization Design system