Payment Processing Solution

A B2B cloud-based payment processing system design. 

PayFabric is the leading cloud-based application that embraces solid functionalities and features in the B2B payment processing market. The foundation of the application is strong and has been well received by merchants, for it is easy to accept and manage online payments in the application, website, or e-commerce storefront.
​The service provides an alternative to developing costly and complex infrastructure to process payments safely and storing and sharing transactional data across various platforms, channels, and devices.

Role

Sr. UI/UX designer, designing the ecosystem of the PayFabric platform

Team

  • 1 UI/UX designer

  • 1 VP of Product Manager

  • 10+ Developer

Tools

  • Hand sketch

  • UXPin

  • Figma

  • Adobe Photoshop

  • Adobe Illustration

Timeline

  • 2017-2020

Client

  • EVO Nodus

The Challenge and Solution

The Challenge and Solution.

Challenges

The foundation of the application was well-built, but the visual aspect was not current. The previous app iteration had varying appearances and functionalities depending on the product line, as they were created at different times. The current focus emphasizes developing a new user interface and ensuring the application provides a user experience meeting industry standards.

Solutions

  • Create a uniform design for the PayFabric platform throughout all of its products

  • Enhance the application's user experience

  • Create a Global Style Guide and Pattern Library for the platform

  • Design and integrate new features and functionalities into the existing system

  • Improve the payment transaction process and reduce the manual entry

  • Create Mobile UI for the application

Design Process

The PayFabric project utilized the Agile methodology. Working directly with the VP of Product, the project was broken down into small sprints to facilitate a speedy design process and quick transfer to the development team. Once the project scope was established, approximately 80% of the project was allocated a day or two to conduct UI/UX research and create rapid prototypes. The prototype underwent multiple iterations following feedback and validation to reach a highly interactive prototype. Once approved, the development team took over.

PayFabric Design Process

PayFabric Design Process

Process Flow

Process Flow

Process Flow & Customer Journey

This transitional process flow illustrated a series of steps and the decisions that must be made for the process to function. This visualization allowed me to identify redundancies, repetitive tasks, and bottlenecks.

We created a customer journey map from the flow to understand better how customers navigate and use our application. Through this process, we identified a number of design shortcomings related to payment processing and report searching. These findings gave us opportunities to improve and enhance the customer experience.

Here are the top five projects that significantly enhanced the user experience for the PayFabric application.

Customer Journey

Customer Journey

UI Design

I utilized UXpin, a collaborative UX design tool, to develop an authentic, interactive prototype. This tool can incorporate variables, components, logic, states, and design systems, making it highly beneficial for the DEV team's productivity during the development cycle. My objective was to establish an ecosystem UI and UX platform that can be utilized across all product lines while maintaining consistent navigation and UI patterns.

It's important to test prototypes with users to ensure the design flow and user experience are optimal. A/B testing or multivariate testing can measure multiple variables in design concepts and determine the most effective design combination based on the relationships among these variables.

dashboard.jpg
2020-03-10 (6).png
2020-03-10 (7).png
2020-03-10 (8).png
2020-03-10 (9).png
2020-03-10 (10).png
2020-03-10 (11).png
2020-03-10 (12).png
gateway comfig.png
2020-03-10 (13).png
right.jpg

Global Style Guide & Pattern Library

2020-03-10.png
2020-03-10 (4).png
2020-03-10 (3).png

Outcome

The PayFabric platform redesign and integration of new features resulted in a remarkable 35% increase in sales revenue in 2019. Through the utilization of UXpin for interactive prototypes, as well as the incorporation of style guides and pattern libraries, software development productivity saw an impressive increase of 80%. This led to a faster turnaround time for the product development roadmap while facilitating communication with cross-functional teams.

PayFabric Prototype Demo

Read more of my case studies

e-Commerce Platform Design

An e-Commerce Platform design supports a multi-brand and multi-channel business model.

More Design & Redesign

Some cool projects that I had a fun time working on.