Redesign of the beGateway payment system control panel interface

Have increased the efficiency of the Support Team and the merchants’ loyalty through deep-laid interfaces

Payment system and SaaS platform developed by eComСharge. beGateway operates on its own servers and is certified according to the standards of international payment systems: Visa, MasterCard, American Express.

The platform integrates data security technologies, Big Data storage, load balancers, repositories and other tools to ensure fast, secure and reliable payment processing.

Goal

Update the web application interface: create a modern design, fix confusing navigation and provide an opportunity to get overview information about the status of the system and financial flows in one screen.

Goal context

  1. The interface is used by people with different levels of technical training and knowledge of payment processing.
  2. The control panel contains hundreds of functions, settings and modules, most of which are rarely used.
  3. Different composition, intensity and complexity of tasks arise in the interface depending on the business cycle and user role.
  4. Some of the payment system settings are dangerous to deal with for the nonpros: they directly affect the financial security of transactions.
  5. If the user does not resolve the incident in the system on their own, the participation of a support employee is required, and this is expensive.

We separate roles and define cases

To understand how to design a platform interface, we dive into the customer’s business: we study the product life cycle from sale to implementation, we deal with the intricate settings, records of platform managers and administrators.

In design we use two approaches (frameworks) — role-based and case-based. They help take into account the interests of all users, quickly implement design solutions, reduce the influence of the human factor and save customer resources on training new support specialists.

Role-based approach

We do research and identify groups of users who interact with the interface.

Case-based approach

We interview users from each group and determine typical scenarios for them. This will help build the interface based on solving the user’s problem, and not vice versa.

Role-based approach

We do research and identify groups of users who interact with the interface.

Case-based approach

We interview users from each group and determine typical scenarios for them. This will help build the interface based on solving the user’s problem, and not vice versa.

We’ve sorted out the roles, collected several dozen cases — here is the result

Merchant work with the payment system

Merchants are the largest audience of the payment system, but most of them don’t log into the system very often. Most of the functions are implemented automatically through the integration of the payment system and the online store, application or merchant website. Therefore, it’s important that during rare visits, the owner or employee of the merchant navigates the management of the panel and its sections quickly.

ТOnly basic, clear things: current turnover, list of transactions, turnover by sites (projects) and five sections in the menu with a clear purpose

Merchant work with the payment system

Merchants are the largest audience of the payment system, but most of them don’t log into the system very often. Most of the functions are implemented automatically through the integration of the payment system and the online store, application or merchant website. Therefore, it’s important that during rare visits, the owner or employee of the merchant navigates the management of the panel and its sections quickly.

Only basic, clear things: current turnover, list of transactions, turnover by sites (projects) and five sections in the menu with a clear purpose

Assessing the ‘health’ of stores is solved using a simple widget without dealing with complex concepts such as gateways, rooting, fraud and IPS.

An enlarged red indicator is a sign of a large number of refusals and loss of store revenue — a reason to dive into the problem, deal with the bank, try to retain customers who are unhappy that the purchase didn’t go through

Assessing the ‘health’ of stores is solved using a simple widget without dealing with complex concepts such as gateways, rooting, fraud and IPS.

An enlarged red indicator is a sign of a large number of refusals and loss of store revenue — a reason to dive into the problem, deal with the bank, try to retain customers who are unhappy that the purchase didn’t go through.

Easy refunds

All transaction actions are grouped and are quickly accessible by frequency: return part of the money, recall a payment, or check if there are any fraudulent actions. The merchant doesn’t need to read the manual or remember how to use the panel interface.

Monthly reporting for accountants

To convey the history of account movements and reconciliations to accountants is enough to look at the reporting section and set up a selection by project, period, or download the entire statement.

In difficult cases, if the merchant can’t deal with the problems of accepting payments (or doesn’t want to), he creates a request — a ticket to the Support Team.

Merchant and store management

A unified presentation of the store card and project for the merchant and support manager is an important strategic decision. The merchant and the manager see the same interface and composition of information and can solve the problem in the remote communication format ‘Click on the second transaction in the list.’

Transaction accounting and returns

Previously, if a transaction couldn’t be found by time markers or a sum, managers would write transaction codes in a notebook and search on them. It’s easy to make a mistake in this sequence of numbers and letters:

We are correcting the UX process so that the support manager no longer suffers and doesn’t have to waste notebooks. We provide operators with flexible investigative tools.

Connected Transactions

On the transaction page, payments can be filtered by status, see ‘pending’ and thus track the problem at the stage of its occurrence.

A design system for the happiness of developers and a basis for the future

All artifacts created during the work process — from inputs and buttons to huge SmartRouting flows — are carefully collected into the beGateway design system for the systematic and consistent development of the product by the development team.

Let’s talk about business

Your request will immediately go to the sales department. One of the managers will answer you in order to discuss details. It takes up to half an hour during working hours

A furnace burden management UI
Next project A furnace burden management UI

We’ve taken a deep dive into a sophisticated industry to build a concept web-based user interface