www.fibonatix.com

“Paragon” - Backend payments processing system

Paragon is a sophisticated payment processing solution specifically designed for businesses operating in high-risk industries. My task was to design an intuitive user interface that would simplify the utilization of the system for non-technical individuals. The system’s primary function is to present a comprehensive overview of all processed payments, including those that have failed, along with the necessary information to resolve the issue and avoid future recurrence. Furthermore, Paragon offers a variety of virtual payment gateways to accommodate various payment needs.

My Role

Make it work.

User experience flow, prototyping, UI design.
Content writing, Documentation writing. Post-production design QA.

As the company’s only designer, my responsibilities spanned from defining the problems in our product and the high-risk industry in general, to building a solution-providing prototype. I was also in charge of ensuring all aspects of the product quality after development, including design bugs identification and convenient user experience.

The Challenge

Make payments easy.

Some of the main problems and their solutions that we found were:

1. As a Payment Solution supporting the high-risk industry, we deal with a high percentage of payment processing failures, directly affecting our clients’ volume and income. Since one of our goals and priorities was to support our clients’ growth, we had to provide the best solution possible. We solved this by displaying and clarifying the relevant information causing the failure, together with possible and creative clickable actions to resolve each failure case.

2. After observing different solutions in the market, we discovered that merchants’ independence and control over their payment processes are relatively low. On the one hand, we decided to provide the merchant with a high level of autonomy and avoid a confusing inflation of possibilities on the other hand. Finding the balance between the two demanded heightened sensitivity to the users’ needs, while keeping in mind that the payments world might already be confusing enough. Let’s observe some of the solutions I’ve applied in the system, and how I figured them out:

Let’s get inside our client’s head.

Betty Baffled

46, from London, England. Having a small business in the CBD industry.

As Betty Would Say:

“I swear, every time I try to use this computer contraption, it’s like the darn thing has a mind of its own. I’ll be typing away and suddenly, it decides to do its own thing, like it’s possessed or something. I don’t know who’s in charge here, but it certainly isn’t me 😤.”

Betty’s Pain Points And Challenges

The main pain point Bettys faces is her technophobia. Betty’s interaction with Paragon is mandatory in the absence of another solution for tracking her transactions. As a pretty successful family business, the number of transactions and the amount of information shown about her transactions is high, which makes Betty more nervous.

Betty’s Goals And Motivations

Betty is the traditional, old-school, not-very-excited about-technology lady. She wants to passionately sell her supply of cannabis seeds to her partners while keeping the interaction with complex systems, or the “bloody” internet in general, as minimal as possible. Betty has to track her transactions, especially the failures, which are very common in the CBD industry. Betty wishes not only to observe the processor’s failures but also to have the proper solutions a click away.

Betty’s behaviors Over paragon

Betty is the traditional, old-school, not-very-excited about-technology lady. She wants to passionately sell her supply of cannabis seeds to her partners while keeping the interaction with complex systems, or the “bloody” internet in general, as minimal as possible. Betty has to track her transactions, especially the failures, which are very common in the CBD industry. Betty wishes not only to observe the processor’s failures but also to have the proper solutions a click away.

Let’s get inside our client’s head.

All Transactions Summary – Review the most important insights of your transactions

Big-Data Visualizing Difficulties

Data inflation

One of the biggest struggles when displaying big data is the visual inflation that might bring a high abandonment rate. The solution that I’ve suggested for this kind of problem is super flexible table customization, allowing the user to choose which of the columns are relevant for him to be displayed and which can be hidden, while locking or unlocking the position of the columns when scrolling, and exporting them easily. The user will also be able to save the customized order of the table as a preset for higher efficiency and time-saving.

Inefficient search engines

One major issue I faced was finding pertinent data within tables. I struggled to locate comprehensive search engines that could effectively handle multiple search parameters while providing genuinely relevant information. This led me to develop such a system in Paragon. However, an unexpected challenge arose when it came to designing the system to be user-friendly and accessible via keyboard commands. This aspect required significant additional attention and concentration and has been succssefuly solved

“Pay By Link” – Easily send payment links, with no need for your own payment system.​

The Cherry on top

Design focused decisions.

One of the significant considerations in building the product was maintaining the existing design line of Fibonatix, the establishing company of Paragon. The principle of keeping Fibonatix’s branding lines was complex since the company’s branding conveys traditionalism, as opposed to what we tried to bring to the system: innovation and lightness.

To this end, I maintained guidelines that instill calmness and lightness, such as generous spacing and dispersing visual loads as much as possible. I used rounded corners in containers and buttons and maximized the minimalism.

To maintain the uniformity of the system, I built a UI Kit that includes all the system’s components, starting with containers, buttons, icons, and their size and spacing rules. The existence of the UI Kit and the definition of global design rules over the system was a significant relief for the developers in the client-side development stages. We saved the UI Kit’s database in StoryBook, which provides fast and efficient conversion of the design to code and vice versa.

Typography

Colors

Design System

Icons

Components

Text box

Design System

Icons

Components

Text box

Design System

Icons

Components

Text box

Fibonatix

Official website design

Polisave

Official website design

Dsafer

Official website design