How 'Vitamins' Can Increase Transaction Rates Higher

Top

Start

End

How ‘Vitamins’ Can Increase Transaction Rates Higher

Explore the significant impact of small UX changes that can lead to improved user experience, user engagement, and transaction rates in virtual bank account payment.

My Role

Product Designer

Team

UX Researcher, UX Writer

Company

BRI Bank

Project Date

Q1 2023

Platform

Mobile App

Reading Time

6 minutes

Overview

Project background

Virtual Account is a digital payment method through an account that is created virtually for each customer, it consists of a unique customer ID number. It means that there will be no Virtual Account number that is exactly the same. So, each transaction can be identified automatically for different customers. Keep in mind that the way a Virtual Account works is different from a regular savings account. When the transaction is complete, they do not need to send a transfer receipt anymore.

This project focuses to increase the user experience and transaction rates within the BRI Virtual Account (BRIVA) payment feature through strategic UX improvement. Despite the past 4 years, there has not been significant improvement for BRIVA payment feature. We believe that by conducting a comprehensive analysis of current user interactions and transaction processes, we can significantly boost transaction rates even higher, and contributing to improved the overall experience of the BRIVA payment feature.

Problem

What was the problem?

Before we move further, let's give a shoutout to our data analyst who has already completed the collection of all data for the top most used transaction features in our mobile banking.

Data above from January to September 2022 shows that BRIVA is the second most used transaction feature, behind the transfer feature and has successfully contributed to increasing fee-based income for the company.

Does this mean the existing design of BRIVA payment which was created 4 years ago, is still performing effectively with no usability problems at all?

Well, I can assume the current design is still a ‘painkiller’ that continuously solves critical needs to make payments anytime from merchants or other organizations. But, does the existing design still able to sustain itself after 4 years without significant improvement? Hmm I don’t think so...

Therefore, our team decided to analyze the existing design of BRIVA payment include negative case to identify areas of improvement where we can add some ‘vitamin’ to boost transaction rates even higher. Let me show you what we found...

Billing Page

Confirmation Page

Redundant Billing Information

Users must see the total bill amount twice, with the only difference being that on the confirmation page, there are no details of the bill. This could potentially waste time, increase user clicks, and lead to misunderstandings due to the absence of detailed bills on the confirmation page.

Redundant Billing Information

Users must see the total bill amount twice, with the only difference being that on the confirmation page, there are no details of the bill. This could potentially waste time, increase user clicks, and lead to misunderstandings due to the absence of detailed bills on the confirmation page.

Receipt

Poor Structure and Visibility Issues

The information on digital receipts is not well-organized. This happened across all transaction features, where the 'Total' is placed at the bottom, potentially making it less visible, especially on smaller device screens or when the receipt contains many detail of information.

Unrecognized Icon

We often receive complaints from users who are first time using our mobile banking and users who has age above 45 years old (low tech savvy). They have difficulty to share or download receipt as image.

Even some of them doesn’t recognized the meaning of paper plane icon in the top right corner, which is intended for share or download. This became our challenge to create a more inclusive design.

BRIVA Front Page

Not Human-Readable Error Message

Unclear error messages containing technical code could potentially lead to confusion for most users, as they don't know exactly what happened and why.

Long Payment Process

Users encounter inefficiencies in making BRIVA payments through our mobile banking platform, as the current process demands an excessive number of clicks (6 click steps) before input PIN. This could potentially cause frustration and hinder the efficiency of payment transactions. Streamlining the payment process is essential to enhance user satisfaction and overall usability.

BRIVA Payment’s Current Design

Objective

What goals that we need to achieve?

Alongside with the existing problems, we aim to enhance the current solutions after 4 years without improvement then add some 'vitamins' for the sustainability and long-term success of the product. This way could enabling it to go above and beyond expectations. Here are the objectives we have defined:

Boost BRIVA's payment feature usage rates even higher and increase monthly sales volume
Create a seamless and fast BRIVA payment feature with a better experience

Boost BRIVA's payment feature usage rates even higher and increase monthly sales volume
Create a seamless and fast BRIVA payment feature with a better experience

Ideation Process

How do we add some ‘vitamins’ to BRIVA payment flow?

We know that currently, BRIVA payment is the second most used transaction feature in our mobile banking. This is a positive trend that we should maintain and even improve for the long term. Therefore, adding some 'vitamins' is a great idea to enhance the user experience.

However, taking inappropriate 'vitamins' can actually backfire and may lead to a decrease in conversion rates. This is because our users must transition from existing solutions to new 'nice-to-have' solutions. Therefore, we must think carefully when designing these 'vitamins' to facilitate a smooth transition for users. Here are our strategy...

Let me introduce you to the JTBD 4 Forces Diagram

In this stage, we are conducted interview to our users to understand why someone make a BRIVA payment. We called it “Switch Interviews” because it focused on understanding the moments of struggle that cause someone to seek out a new solution, and uncovering the “hiring criteria” that they use to decide what to try next.

We synthesize our findings from the interviews and create a classification of 'hire and fire' actions that users may consider when thinking about new solutions. This diagram helps us focus more on designing 'vitamins' that are suitable for users and avoid inappropriate 'vitamins' that could decrease conversion rates or even encourage users to go back with current solution. Here are the results...

JTBD 4 Forces Diagram

When considering how to use JTBD to improve the product, it’s important to remember that the job belongs to the customer, not our product. The Jobs to be Done framework was exactly what we needed, this illustrate the dynamics involved behind the 'hire and fire' actions that users go through when evaluating their choice of a product or service.

HMW

How might we create more seamless and faster solutions to make BRIVA payment?

How might we create a smooth transition for users to consume 'vitamins' on BRIVA payment?

Solutions

Create automated billing for virtual accounts by leveraging an API integrated with BRI from partners. So, users don’t have to input the virtual account number.

We are avoiding making big changes to the current flow, focusing instead on small improvements that could have a significant impact.

Based on ideation, now we already sure about what to do on the next step. But, before we move to design solutions, we need mapping out the steps that a user will take when make a BRIVA payment, it is easier to identify any potential roadblocks or areas that may be confusing for the user.

Overall, there are no big changes compared to the existing flow. We aim to retain our loyal users who consistently use BRIVA and avoid a high learning curve. However, we introduce new innovative solutions, which called 'vitamins' to enhance the BRIVA payment experience, making it more seamless and faster. Details will be discussed in the next step.

Solution

Design Solution

Finally we moved to the best part of this project, which is design solution. After all the use cases on wireframe were agreed by product manager, engineers, and other teams. We go-ahead to create Hi-fidelity mockups and create prototype. Here are some ‘vitamins’ design proposals for BRIVA payment...

We leverage an API integrated with BRI Bank from partners to create automated billing that appears on the homepage every time the system detects users checking out from a merchant.

This new innovation makes BRIVA payments more seamless and faster only 1 click and users no longer need to input the virtual account number.

We leverage an API integrated with BRI Bank from partners to create automated billing that appears on the homepage every time the system detects users checking out from a merchant.

This new innovation makes BRIVA payments more seamless and faster only 1 click and users no longer need to input the virtual account number.

Automated Billing - Vitamins

⭐

BEFORE

AFTER

Design Rationale

Grouping Information (Law of Proximity)

The 'All-in-one billing & payment page' allows users to easily correlate bill details with the total amount they have to pay. We have also established this as a standard for other payment bill features.

Electricity Bill Payment

Multifinance Bill Payment

Let's explore how effectively this can be implemented in another feature

All-in-One Billing & Payment Page

Well Structured Information

We improved the structure of information on the receipt, starting with general information at the top and becoming more specific as you scroll down. This standardization is applicable to all transaction features.

Eye Tracking Pattern

We have implemented the 'Spotted Pattern,' which highlights 3 important information that become the user's priority when looking at the receipt:

Total

Source of funds
Recipient/VA Number

Based on the UT findings, users prefer the new receipt because they can see the top 3 important information at first sight without having to scroll down. We have also established this as a standard for all transactional receipt.

Eye Tracking Pattern

We have implemented the 'Spotted Pattern,' which highlights 3 important information that become the user's priority when looking at the receipt:

Total

Source of funds
Recipient/VA Number

BEFORE

AFTER

Design Rationale

Share Button

Representative icons and copywriting for the share button make it easy to recognize, even for first-time users and those with low tech savvy.

New Transaction Receipt

Human-Readable

We use simple and plain language, then remove technical code to make it easy for users to understand.

Human-Readable

We use simple and plain language, then remove technical code to make it easy for users to understand.

Human Readable Error Message

BEFORE

AFTER

Results & Impact

Finally, in July 2023 we successfully released the all-new BRIVA payment with some 'vitamins' designed to boost the transaction rate higher and contribute to creating a seamless BRIVA payment experience. After a few months of its launch, we got some interesting numbers.

Frequency of BRIVA Payment Usage

July 2023

Release

The usage rates of BRIVA's payment consistently increase month by month with an average monthly growth of 3%. We believe this trend will continue in the future.

Sales Volume of BRIVA Payments

897 M

Successfully achieved a monthly sales volume of more than 897 million within the first 3 months after release.

July 2023

Release

Takeaways Learning

Lesson Learned

In this project, I have learned the importance of evaluating existing products to identify areas for improvement, as user needs and markets are constantly evolving. Even when our product is on a good track, we can add some 'vitamins' to maintain and increase its success in the future.

The JTBD 4 Forces Diagram can help uncover opportunities to enhance user satisfaction, increase engagement, and improve conversion. This also ensures that our new solution has enough pull and push factors to encourage users to switch from existing solutions and addressing the anxiety loyal customers may face during the transition.

Thanks for scrolling all the way down!

I truly appreciate your time. If you’re excited about product thinking, design system, or just want to chat and collaborate on something cool, let’s make it happen! 🚀

Back