Every successful company eventually outgrows its original product design and that’s exactly what happened with PayEngine.

Payengine simplifies complex payment infrastructure for SaaS companies by offering expert-backed, multi-processor solutions for diverse merchant needs. Let us build your fintech arm so you can stay focused on your core product.

After years in the market, PayEngine’s powerful payments platform had evolved, but its UX/UI hadn’t kept up. With outdated visuals, clunky navigation, and slow performance, the platform was holding back its true potential. To scale and serve modern SaaS businesses better, it was time for a complete design overhaul.

They understood that their platform would completely fall flat if they didn’t revamp it into a modern and aesthetically appealing application. That’s why they reached out to Denovers as they were looking for design partners who:

Fortunately, they found all of these qualities in Denovers and decided to give us a shot!

To kick things off, we delivered a comprehensive demo that focused on key areas of the PayEngine platform including the transaction interface, main dashboard, and search filter popups. Our goal was to demonstrate our holistic design approach by tackling a diverse range of screens simultaneously, all while maintaining top-notch quality.

Throughout the process, we created multiple iterations of each screen. This allowed us to incorporate PayEngine’s direction while also contributing to our own creative vision. By presenting a range of options, we empowered their team to make informed decisions backed by fresh ideas and thoughtful design.

By the end of the 7-day free demo, PayEngine was more than satisfied. We not only revamped multiple screens with a clear design direction but also provided a variety of iterations, ensuring they had plenty of options to choose from. Our collaborative style, attention to detail, and proactive input exceeded their expectations. That’s when they handed us the reins for a full-platform revamp.

We handle every project with thorough discussions, brainstorming, and planning. Similarly, for Pay Engine, we began the usual meetings and sessions with the different product managers and stakeholders involved to ensure we fully understood what PayEngine wanted. A dedicated product designer was assigned to PayEngine, who started working on their platform. Every flow and screen of the product was discussed in detail to not only improve the look and feel of the product but also fully help vertical SaaS companies better manage their embedded payments.

Moreover, after conducting a UX audit of the product and reviewing it, we also pitched some of our own ideas for the modernization of the platform. However, we have a rule at Denovers that we do not implement anything unless approved by our valued customers and product managers. This was something PayEngine was in search of, and they absolutely loved our unique and practical input for their platform’s revamp.

After comprehensive discussions and mutual agreements, everything was decided and set about the platform's UI changes. That's when we began the revamp process. We picked up every flow of PayEngine and upgraded it by introducing several innovative and user-friendly features, organizing components, structuring the layout and overall UI, and incorporating other measures.

PayEngine's platform had two dashboards, one for the partner and the other for the merchant. We got a chance to revamp both of them. Let us show you how.

There were multiple flows in the merchant's dashboard, each listed in the application's side panel menu. We meticulously revamped each one of them to fit PayEngine's needs and requirements.

The onboarding process had various steps for merchants to create an account and sign in to the platform. However, the very first screens of signing up through the landing page were missing.

We created simple forms to get started that ensured user validation. It all begins with creating an account by adding your name, email address, and password to sign up. This takes you to the welcome screen and then requests that you invite team members by emailing them.
Moving on, this takes you to a 10-step onboarding form where you have to add information about

This resulted in a fully mapped, seamless onboarding flow that reduces drop-offs, simplifies setup, and sets the tone for a smooth user experience right from the first click.

The charge interface of PayEngine for making a payment was confusing and limited. The flow failed to twist according to different customers. This made it difficult for users to choose payment options that fit their needs.

We expanded the form to include different options through dropdowns and multiple screens in the flow. We ensured different screens opened for new or existing customers. Furthermore, even for existing users, we offered different screens depending on whether they were using the old card already saved on the portal or opting for a new card to add the information.

This upgrade brought clarity, flexibility, and ease to the payment process—leading to faster checkouts and fewer user errors.

The customer list was trapped in an old-school table that looked too 2000ish. The cells and columns were unevenly spaced, which made everything look wonky. The borders were thick and chunky as if someone had drawn them with a marker. There was no color story, as the entire table was based on a single white color, adding to the monotony.

We fixed up the table to make it easy on the eyes by first fixing the alignment, outlining cells and columns to differentiate them, using a clear font, and introducing color to the text to make it prominent. Our well-formatted tables clearly displayed user transactions by name, date, time, ID, type, and status. We infused the table with filters to make it easy for the user to find information and also gave the option for a default columns view.

Moreover, we introduced a dropdown to view each customer's details individually. You can see their profile, containing information about their name, email address, phone number, and legal address. You can also see their cards with the option to use existing or add new ones.
Additionally, we took the entire screen up a notch by introducing scorecards on the top to create an exceptionally inclusive platform. The cards showed the number of payments, total amount, and chargebacks.

A cleaner, more intuitive interface was achieved that made transaction data easier to scan, search, and act on. It boosted user efficiency and delivered a more insightful, data-rich experience at a glance.

The various transactions by different merchants were recorded in a super messy slider table. From colorless columns and confusing navigation to giant fonts and overwhelming data, the table had everything to make the user disengage in a split second. Not only did the information overload make the data hard to interpret, but it also downgraded the entire product's look and feel.

We bought a unique idea of a default column view to allow the user to simultaneously select no more than six columns for simplified data visualization. The rest of the columns could be viewed in an expanded view. We also introduced colors and appealing components to not only ensure exceptional data visualization but also light up the interface to engage and hook the user completely.

This flow was also integrated with the option of adding a new transaction. All you had to do was add personal information, address, card information, and charge details, and you're all set for it.

Therefore, a decluttered, visually engaging transaction interface was created that simplified data exploration, improved usability, and transformed overwhelming spreadsheets into a clean, user-first experience that actually invites interaction.

The settlements screen was coming up short as its UI lacked alignment, engaging buttons or components, and other necessary design features to make data interpretation easy to understand. All the screen had was a dull slider table, with each row giving crappy popup modals. There was an information load as it was not properly formatted and displayed to engage or benefit the user. This made the screen utterly gray and uninspiring, frustrating the user so much that they were on the verge of abandoning the product.

What our expert designers did was simple yet appealing enough to make managing transactions easy for merchants. We prioritized clarity so that when the user lands on the settlement form, they instantly know the number of settlements, active ones, completed ones, and their total amount. This information was displayed in four cards at the top of the screen.

Next, we formatted the settlements table with proper alignment, font, and color. We added a few more columns, which boiled down all the columns to

The payouts were displayed in a poor user interface. It felt like the information was dumped in a colorless table, making the list visually unappealing. Every merchant payout expanded into an uninteresting pop-up modal to add to the dullness. There was a lack of headings, components, and other UI features to clarify the data. Moreover, the pop-up further expanded to an "all transactions" dropdown about the particular payout. This required the viewer to take action after action to access information that is no less than a red flag.

We came to the rescue by first displaying all the payout information in three aesthetically pleasing cards. You can see the total number of payouts, their amount, and chargebacks to get a clear overview by just resting your gaze at the top of the screen. Next, we displayed the entire list of payouts in a well-aligned table with a single dropdown for each payout. This way, the particular payout cell of the table expanded, and all the transaction information was visible with just a single click.

This made a visually appealing, streamlined payout screen that reduced clicks and frustration, providing a clear, at-a-glance overview of payouts while simplifying access to detailed transaction data.

Managing disputes was a hassle as there were no options to record chargebacks.

We introduced a unique screen to easily add disputes with their reason, status, comments, and attachments. This made it easy to document disputes so they could be traced and resolved to make managing finances smooth and efficient.

The partner's portal had several tabs to access different payment management data. However, they were outmoded and required a complete makeover.

The complete redesign turned the partner portal into a modern, intuitive experience, providing quick access to essential data while improving usability and engagement across the platform.

The merchant's tab displayed all the applications of the users and the various merchants on the platform to make payments. However, the interface was super chaotic due to information overload, no hierarchy, awful color story, and chunky texts.

We completely revamped the merchant tab for improved data visualization. Managing merchants was made easy by displaying the essential information in minimalistic and clear scorecards to give a complete overview. The merchants were also listed in an understated table with the eye's fonts, colors, decluttered columns, and an overall aesthetic view. We added smooth UI buttons to add or invite new merchants and a search toolbar to find the desired data.
Moreover, we offered a detailed overview on another screen by simply clicking on each user. Over there, their application details were visible, and a graph representing the GMV was shown. The other half of the screen also consisted of various clickable tabs to view information of different users. They included:

This enhanced data visualization, reduced clutter and made managing merchants and transactions more efficient, ensuring a more engaging user experience.

The transaction records from various merchants were captured in a chaotic slider table. With plain columns, convoluted navigation, oversized text, and an excess of data, the table was prone to losing users' interest instantly. This data overload made the information hard to decipher and diminished the product's overall appeal.

We introduced a distinctive default column view to remedy this, limiting users to select up to six columns at once for easier data interpretation. The remaining columns could be accessed through an extended view. We also integrated vibrant colors and visually appealing elements to not only enhance data visualization but also to brighten the interface for improved user engagement.

Moreover, we added a feature for entering new transactions. Users simply needed to fill in their personal information, address, card details, and transaction specifics to complete the process. This way the interface got brightened and improved user interaction, leading to better engagement and faster data processing.

The reports tab had a poor UI with oversized UI components, which did not keep up with the aesthetics. Additionally, the reports of the various forms were presented in a cluttered and messy way, which made data analysis difficult. It made the platform look old school as if Pay Engine existed in the early Internet days.

As a result, we adjusted the size of the UI cards to make them fit on one screen and look visually appealing simultaneously. We also ensured that each form report was presented in a clean, decluttered, and presentable way so the partners could easily interpret and analyze the data for informed decision-making.

A cleaner, more visually appealing layout made report analysis easier, reducing cognitive load and empowering users to make more informed decisions with ease.

Revamping Pay Engine was no less than breathing life into the platform. After it was revived with modern UI, a visible change in user engagement was seen. The customers stayed hooked on the platform as the application became easy to use and user-friendly. Moreover, the platform also saw an increase in users as it made managing finances easier due to its smooth and state-of-the-art user interface.

Do you feel your platform is too old and misses its mark in the competitive modern design market? This means you are in dire need of a UI makeover to hit back with full swing. Let us handle your design issues while you focus on the more pressing business issues.