Usability Test on Veritrans’ VT-LINK

A Guirella Usability Testing

7 November 2015

This is an english translation of the same article I wrote in Indonesia here

Veritrans burst the scene in Indonesia with the vision to be the pioneer of UX Payment in Indonesia. But a quick usability test shows that people run into some critical issues with Veritrans VT-Link feature.

Objective

Identify the pain points that users encounter in making a VT-Link.

Test Parameters

  • What: Veritrans’ Website and Merchant Administration Portal (MAP)
  • Who: 4 Social media (Facebook, Instagram and LINE) merchants aged 22–50

Tasks

Users were asked to the these tasks that’s been made into scenarios:

  1. Find the name and information of VT-Link service (the name won’t be mentioned beforehand)
  2. Fill the required information to start using VT-Link for real
  3. Make 1 VT-Link for an item and another VT-Link for a bundle (multiple items)

Example of the scenario:

A new supply of Ghosty Comic Vol. 1 just arrived, and you just saw a link for an online payment, powered by Veritrans.

Example of a VT-Link in an Instagram post

You want to use the same service to sell the new batch of comic in your Facebook Page. Find the name and information about that service in Veritrans’ website.

Processing

I documented every complain and feedback in Trello, I also marked complains and feedback that came from multiple users.

Issues are categorised by similarities. In each category, the issues are sorted by frequency. Categories are also sorted by frequency

Issues Found

Website

Users don’t know the requirement to start using VT-Link for receiving payment

After browsing the website for several minutes to gain informations, users assumed they only need their ID Card to start receiving payment via Veritrans. Only a couple users felt that they need NPWP (Tax) and SIUP. This happens because users can’t find the information about it while browsing the website.

The requirement should be put up front, when I was signing up.

No user read the “how to integrate with Veritrans” section in Products and Pricing page

No user read this part in detail

Veritrans actually specify the said requirements in their support page. But unfortunately there’s no obvious link for user to get to that page. The only link I found is the FAQ link in the footer.

The FAQ/Support page that contain crucial informations can only be accessed in the footer (Help section)

I assume Veritrans is reluctant to put the requirements in the home page in fear it would discourage new user to try using Veritrans. But making users navigate their way to these requirements in MAP only makes them frustrated and some even felt cheated, because of the promise of ease of use.

RECOMMENDATION: Add a link to the support page in the Navigation Bar and somewhere in the homepage. A page as important as that should be easily accessed by users

Sandbox

Users were confused by the presence of sample data in MAP, users also had a hard time to change the environment to Production

“I’m confused. What’s the different between Sandbox and Production?” said a user even after he successfully change environment back and forth

After users signed up and opened the MAP, users were put in the Sandbox environment. With Sandbox, users are expected to try features that’s made available by Veritrans.

But the sample data didn’t immediately show up. Only after users open other pages, the data suddenly appears. It seems that there’re some sort of delay.

When new users first logged in to MAP, there was no sample data
But after opening another page, the sample data appeared out of nowhere. This made the users confused

Even until the end of test, users were still unsure what do Sandbox and Production mean. Some suggested to change the names.

The lack of onboarding tutorial and more importantly a delay in sample data emergence make the users confused. Users failed to make a connection between Sandbox = Testing because of the delay in sample data. This may also contributed to why users were unsure what’s the meaning of Sandbox and Production, even after they successfully changed environment.

Some users were aware of the colour scheme change when they switch environments (Sandbox = light blue, Production = dark blue). But some users thought the colour change was due to somethings else.

This dropdown to switch environment isn’t visible enough for the users

After I told the users that Sandbox means they were in testing mode, users were asked to change the environment to Production. Some users looked in Settings menu. Only one user intuitively choose the dropdown next to the merchant’s name.

No users switched environment this way

No users switched environment via the dropdown menu in the upper right hand side (User logo).

RECOMMENDATION: Users need to know that they’re currently in sandbox environment that is intended to be tinkered with. Make a more aggressive signifier. Try to change the name of the environments to something that’d be more intuitive for the user. The sample data must also appears instantaneously, with no delay.

Most users didn’t encounter any problem while making VT-Links. But when they open the URL they just made, users were confused what page were they seeing.

Most users were confused by this page functionality

They didn’t realize that the page they opened was a payment page, they also didn’t realize that payment methods were missing.

Users didn’t realize the absence of payment methods in the VT-Link they made.

Users felt the need of an indicator that states the function of the page, and an indicator about the absence of payment methods.

RECOMMENDATION: Users need to know that the URL they just opened is a live/active payment page, users must also know that there’s no payment method available yet, and why.

Complete Merchant Registration

Even After knowing there was no available payment methods yet, user had no idea why. Only after I told them it was because their data was incomplete they start looking where they can fill it.

Every user went and looked in the Settings sub-menus. Only after several minutes of searching that they clicked on the notification button in the upper left corner.

Users didn’t realise the notification “Please complete your registration here” was clickable

Although user saw the notification that their registration is not complete, no user immediately clicked on the text. Only after they hovered their cursor on the text that they realized it was clickable. There’s no signifier that the notification can be clicked.

Default notification in the Sandbox environment

Some users said that they don’t bother to open the notification (in Production environment) because there was also a (different) notification in the Sandbox. They thought it was just the same notification so they don’t try to open it.

After clicking the notification, a pop up title “Complete Merchant Registration appeared.

Complete Merchant Registration pop up

There’s 3 sections that users said they can’t find anywhere else. Those were Corporate Information, Business Detail and IT Information.

After filling every information, users were shown the list of documents that’s needed to be sent (by email) to Veritrans for them to start selling:

List of the required documents, shown after users filled their informations in the pop up

Every user assumed that every single one of the document have to be sent for them to start using Veritrans. Therefore every user felt the requirements was too demanding for them.

One user felt irritated that they only know these requirements after they went to so much trouble to navigate the MAP, he felt that those requirements should be told to him much earlier in the process, as early as he was signing up.

RECOMMENDATION: No user intuitively open the notification in the top-right corner to complete their registration, most users try to look in the Settings sub-menus. Hence make the Corporate Information, Business Detail and IT Information form available in the Settings sub menus. It’d even better to group all of the form together in Settings. Also, separate the required documents for individuals and corporate, don’t join them together, so individuals don’t feel discouraged by the requirements.

Design Suggestion

Because many users were confused with the term environment and Sandbox, I propose to change their name to Testing Mode (and Production Mode). I’d refrain from also changing the Production name, so the current users don’t get confused by the names.

I’d also propose a change from dropdown to toggle buttons. This has 2 effects. First, it let current users notice that Sandbox have been changed to Testing. Second, it let new users see the available modes right away.

There’s also a warning bar that acts as a signifier that the user is currently navigating in Testing mode. This warning bar will keep appearing as long as the user is in the Testing mode.

There were no signifier that the notification can be clicked in the sidebar, hence some visual hierarchy and borders can be used to signify that it’s clickable

Make Boundaries

Sandbox is a step to a right direction for Veritrans, it enables users to tinker with MAP while making sure no real data is being used. But MAP doesn’t have any anti-affordance to prevent user from using the Production environment without first completing their registration. Without this boundary it was possible for user making a VT-Link with no payment methods.

Anti affordance is used to prevent user making a blank VT-Link/VT-Web like this

This boundary should also be made to prevent users feeling overwhelmed when they first used MAP. With user restricted to Testing Mode, they can explore the features freely without accidentally switching to Production.

I propose a modal informing the user that they’ve switched to Production Mode and to proceed they must complete their registration. In the modal there’s 2 buttons, the first button leads to the Complete Merchant Registration page while the other buttons will switch the environment back to Testing mode. The latter button is useful if the user switched to Production accidentally.

Modal as both an anti-affordance and signifier when user try using the Production Mode

This modal functions as an anti-affordance that prevent the user from using Production Mode while their information aren’t complete and as a signifier that their information aren’t complete.

This modal can’t be closed and will always appear as long as their registration and required documents aren’t completed. Only after Veritrans received the required documents and activated their account, can the user start using Production Mode.

User will receive notification when their account is activated, enabling them to use Production Mode

Lastly, I’d also suggest adding some more clarity in the VT-Link (and/or VT-Web) page by adding a “Payment Details” title and and indicator about the lack of payment method activated by the merchant

Title and indicator to clarify the function of the page

Closing Notes

Veritrans has a vision to be the number 1 UX payment company in Indonesia. By implementing my suggestions hopefully the user experience, especially the merchants can be enhanced furthermore.


*I don’t work for or am affiliated with Veritrans. I’a a UX Designer trying to learn my trades. Veritrans is a company I wish to grow even more so online payment in Indonesia could be made much easier ☺