Virtual terminal is a payment channel launched by Paystack in 2023. It enables Merchants to collect In person Payments from customers, and is a low cost alternative for physical POS devices.
THE PROBLEM
In 2022, Paystack launched Terminal, a POS device to enable merchants collect in-person payments from their customers. The launch of these devices uncovered some problems that led to a rethink of how to improve the in-person payment experience. Some of those problems were;
1. Physical terminals were expensive to purchase and maintain.
This was a problem for small businesses that couldn’t afford the terminals, and for large businesses that required lots of terminals due to multiple agents and payment points.
2. The physical terminals did not support international cards.
This caused merchants to struggle with collecting in person payments from foreign customers.
3. Small businesses who could not afford to get physical terminals usually accepted bank transfers from their customers, but this also had some problems which were:
- Delays in receiving transaction notifications
- Delays in confirming transactions - This usually played out when the business had a sales agent who attended to customers. In cases like this, the sales agent had to call the business owner or accountant to make sure that they had received a transfer from a customer.
These led to long wait times for customers before value could be provided.
GOALS
To solve these problems, Paystack decided to launch Virtual terminals, so as to;
- Provide merchants with a low cost in-person payment alternative
- Enable merchants accept international payments
- Enable merchants get notified about transactions faster, and reduce customer wait times
There are 3 main components of a Virtual Terminal, each contributing to one of the goals mentioned above.
1. Dedicated Virtual Accounts
Each Virtual Terminal has a unique bank account number that receives bank transfers for that virtual terminal. These Virtual accounts typically receive transactions and send notifications in less than 10 seconds. This solves the problem of delays in receiving transaction notifications
2. A payment page that accepts international cards and apple pay
This would enable merchants to collect payments from their international customers.
3. WhatsApp notifications
Notifications are sent to WhatsApp numbers for each transaction carried out on the Virtual Terminal. The value of this is seen for businesses that have multiple sales agents or payment points. Sales agents no longer have to call the business owner or accountant to confirm transactions because they will be getting notifications on their WhatsApp numbers, and in less than 10 seconds.
Payment flow before Virtual Terminal launch
Payment flow after Virtual Terminal launch
ROLE
I worked as the product designer on this project. I worked with the design team lead to design the payment page, poster, and the dashboard flows, and to conduct usability tests.
TIMELINE
3 to 4 months
BRAINSTORMING
The requirements from design evolved as the product scaled, but there were 3 main outputs that were needed;
- The payment page for international cards and apple pay.
- A poster showing the bank account number as well as the QR code that would be scanned to open up the payment page. (This is to be displayed to customers at various points of sale)
- A flow on the dashboard to enable merchants create and monitor their virtual terminals.
Designing the payment Page
The first step was to create low fidelity designs of what the payment page would look like. While designing the Payment page, we thought Mobile first because there was a very high chance that customers would be using their phones to scan the QR code. We initially wanted it to be similar enough to the current Paystack payment pages, but we realised that making customers fill out a personal detail page before they could pay for something that was right in front of them was an unnecessary step. We wanted all the information to be on 1 page and for the page to emphasise that customers could pay using a variety of Card types, Apple pay, or via bank transfer.
First iteration of the payment page with one page for capturing customer details
2nd iteration
After considering all of these, we worked on the second iteration of the Payment page, making Pay with Apple Pay one of the prominent buttons on the page, and displaying the different accepted cards under the Pay with Card button.
Second iteration of the payment page with one page for capturing customer details
With the layout determined, we moved forward to create the high fidelity versions of the Payment page.
Second iteration of the payment page with one page for capturing customer details
Designing the Poster
At this point, we already knew we wanted customers to scan a QR code to get to the payment page, and so the next thing to think about was how this code would be displayed to them. We decided to design a flyer, and there were 4 main things we were employing the flyer to do:
- Show the different payment channels that could be used.
- Show the different Card types that were accepted.
- Show the QR code that could be scanned to get to the payment page
- Show the account number for bank transfers.
Putting all these into consideration, we designed the first version of the Virtual Terminal Poster.
1st version of the Virtual Terminal Poster with the QR code emphasised as the main payment channel
2nd iteration
After a few weeks of piloting Virtual Terminals, we decided to prioritise bank transfers over the QR code, because Nigerians increasingly started favouring bank transfers over card payments. The first iteration (showed above) of the Virtual Terminal poster seemed to emphasise QR code payments over bank transfers, so we decided to redesign it.
2nd version of the Virtual Terminal Poster with bank transfers emphasised.
With this new version, the account number was the most prominent thing on the flyer, with the QR code shown as an alternative for when a customer could not make a bank transfer. We also got a suggestion from the marketing team to change the copy at the bottom right corner, to serve as marketing material for other merchants who saw this and also wanted to get it for their business.
Desigining Virtual Terminals on the dashboard
The pilot phase involved only a few merchants, and during this period, the terminals were manually created for the merchants by the Paystack team. When we established that there was a need for Virtual Terminals in the market, and that it was working effectively, we decided to scale the product to all merchants. Therefore, it was important to provide a way for merchants to create and manage their Virtual terminals on their Paystack dashboard.
1st iteration
The initial plan for the dashboard flow was to enable merchants to:
- Create a Virtual Terminal and add a WhatsApp number to receive transaction notifications. (At this point, the idea was to have just one WhatsApp number receive notifications for a Virtual Terminal).
- View a list of all the Virtual Terminals they had created
- View the details of a particular Virtual Terminal such as the list of all the transactions that had taken place on the terminal, and how much had been collected.
- Preview, customise and download the Poster we had prepared for them to show to their customers.
1st iteration of the empty state for the dashboard flow
1st iteration of modal to create a new Virtual Terminal. In this iteration, only one WhatsApp number could be added to a Virtual Terminal
1st iteration of the Virtual Terminal list
1st iteration of the Virtual Terminal details page
1st iteration with option to customize the Virtual Terminal
After working on the first iteration, we received some feedback from our Pilot Merchants:
- Some Merchants complained that they had different sales agents on rotation and having just one WhatsApp number on a Virtual Terminal meant that an agent on a different shift had to still call the agent with the registered number to confirm transactions.
- The customisation flow was closely linked to the idea of the QR code being the most prominent thing on the poster. When we decided to prioritise bank transfers over card payments, it made less sense to allow customisation and we decided to remove that flow
To solve this, we introduced the idea of adding multiple WhatsApp numbers (up to 5) to receive transaction notifications for a particular Virtual Terminal.
Based on the feedback we received, we worked on the 2nd iteration of the dashboard flow. In this new version, merchants are able to:
- Create a Virtual Terminal and add up to 5 WhatsApp numbers to receive transaction notifications
- View a list of all the Virtual Terminals they have created
- View the details of a particular Virtual Terminal such as the list of all the transactions that have taken place on the terminal, and how much had been collected.
- Preview and download the Poster we have prepared for them to show to their customers.
- See all the WhatsApp numbers that have been added to a Virtual Terminal, and edit or delete them.
USABILITY TESTING
After completing the design of the dashboard flow, we decided to test with some merchants to ensure that the flow was intuitive and usable. Some of the problems that we identified from our research were:
- It was not explicitly communicated to Merchants how many Virtual Terminals they could create, or how many WhatsApp numbers they could add.
- The poster we provided for the Merchants was ink heavy, and if not printed well, could lead to low quality posters that were less vibrant than what we had initially intended
- To create Virtual Terminal bank account names, we had decided to add business names as pre-fixes to the terminal names provided by merchants. However, we had not explicitly communicated this to merchants at any point and it was confusing when they saw the prefix on their account names.
To solve this, we updated the copy in various parts of the dashboard flow ensuring that Merchants had all the information they needed to properly utilise the Virtual Terminals.
We wanted to encourage merchants to use the posters we designed for them, so we decided to include a black and white poster option for download. It would require less ink and expertise to print, and it would help us maintain consistency in what our merchants were showing to customers.
This was also a case of a change in copy. We updated the copy so that at the point of Virtual Terminal creation, a merchant was clearly informed about what his Virtual Terminal’s bank account name would be.
We implemented these solutions in the dashboard designs, and the design was finally ready for development.
FINAL OUTCOMES
Final UI designs of the dashboard flow and Virtual Terminal poster
Dashboard flow
- Empty State
- Modal flow for creating a Virtual Terminal
- Virtual Terminal list
- Virtual Terminal detail page
- Virtual Terminal Poster page
- Transactions page
- Notifications page
Virtual Terminal empty state, with a video introducing Virtual Terminals and a button to create a Virtual Terminal.
We thought about hiding the helper text in info icons to achieve a cleaner UI, but this was important information that we did not want any merchant to miss so we had to trade-off.
Merchants can see a list of all the Virtual Terminals they have created.
Details of the Virtual Terminal and the 2 options for the Virtual Terminal Posters.
The name of the Virtual Terminal can be edited as shown on the left side. Clicking on any of the Poster options will download the Poster (as shown on the right).
Transactions section showing a list of all transactions on the Virtual Terminal.
Notifications section to view, edit and delete WhatsApp numbers on a Virtual Terminal.
Virtual Terminal Poster
After working on the 2nd iteration of the poster, we received some feedback from merchants about customers being confused by the bank details on the page. Paystack had just collaborated with Titan bank to have Paystack-Titan bank, and this was not yet widely known to customers. To eliminate the confusion, we added labels to the bank details on posters.
IMPACT
- The PIV generated by Paystack through this channel is currently matching the PIV generated by the physical terminals, even though this was launched 6 months later.
- With Virtual Terminals, sales agents now get instant WhatsApp notifications and can immediately provide value to customers without waiting to confirm from the business owners.
- Merchants no longer struggle with International payments, because customers can scan the QR code and pay with their cards, or use Apple Pay.
LESSONS
Build with your users, and continuously iterate
Throughout this project, we iterated a lot. We were constantly getting feedback from pilot merchants and we kept using that feedback to develop and shape our designs and decisions. There will be more feedback as the product scales, and the plan is to keep working on that feedback until Virtual Terminal gets to the best possible version.
WANT TO SEE MORE?
Panda
Designing “Canva for Paystack”
UX Research. Design.
Content guide
