Enhancing Stress-Free Top-Up Processes
Timeline
December 2023 - January 2024
Tools
Figma
Useberry
Outcome
Redesign Top-up E-wallet
Role
UI/UX Designer
It's a redesign focused on enhancing the user interface and experience for the top-up screen
Top-up has become a significant phenomenon that greatly influences payment activities, especially in Indonesia. The widespread use of e-wallet extends even to smaller-scale stores and stalls, which may not have as large a market scale as malls or supermarkets.
Not only as a payment method, sometimes top-up is also used as a way to settle bills or collective expenses when users contribute together, such as shared meals or borrowing e-money from friends. Therefore, the top-up amount often varies and may not always be a fixed sum, unlike specific amounts like Rp 16.500 or Rp 12.478
ABout BSI
BSI is a bank resulting from the merger of PT Bank BRIsyariah Tbk, PT Bank Syariah Mandiri, and PT Bank BNI Syariah. This merger combines the strengths of these three Sharia banks, providing more comprehensive services, broader reach, and stronger capital capacity. Like other banks, BSI also offers several features to support its relevance and usability. Beberapa tahun ini bsi digunakan dalam kerja sama dengan penyelenggara beasiswa di indonesia
What do I do?
As someone who frequently utilizes the top-up feature, I encountered discomfort when using BSI's top-up feature. Consequently, I conducted research on user experiences with the top-up feature. Additionally, I also conducted a comparative study with top-up features in other mobile banking services
[screen] choose top-up
The header contains a hamburger menu similar to the one present on the home screen
The footer has a navbar but is not connected to the home screen
The e-wallet is only displayed in a list format, and there are no icons to assist users in easily identifying it
Imagine accidentally clicking the wrong e-wallet and wanting to go back; unfortunately, there's no direct button to return to the e-wallet screen. The only option is to navigate back to the home screen and select the 'Top-Up E-Wallet' option again. Ugh! :’(((((
[screen] input number
There is no link to access contact on the phone
If users follow the current flows, the possible way for adding a destination number is to copy it from the device's contacts and paste it into the destination form or simply memorize the number. However, not everyone can memorize, and it requires a significant effort
[screen] add Top-up Amount
There is no information about minimum amount
There is no minimum amount, yet an error dialog is displayed without providing information about the specific error
It's kind of confusing because there's not enough info about the smallest amount you can top-up. This might cause an error when you're putting in the amount, and the info available doesn't explain why the error happened. It makes you wonder why we don't get the important details about the minimum transfer amount right when we need them, instead of only finding out after we've done top-up
Goal
While designing the app, designers need to consider the following challenges faced by users:
Enhancing Navigation Clarity
Updating the current navigation to facilitate the top-up process, which can save users from errors and prevent them from spending more time on top-up
Simplifying Destination Number Access
Making the process of adding destination numbers less burdensome by implementing a feature that does not require users to remember the exact number they intend to reach.
Improving Status Visibility
Enhance user experience by providing clear and upfront information about the minimum amount required for top-up, as well as delivering clearer error messages to users
Method
To understand user behaviors, preferences, and pain points, this project utilized qualitative UX research methods. Based on data gathered from user interviews and focus groups, I identified...
REsult
Pain Point
At this stage, I am identifying the user personas to understand their diverse needs, crucial for ensuring satisfaction and success. The personas include:
After identifying the persona, I am now conducting competitive analysis and summarizing the findings
Competitve analysis
Summary
There is a different flow compared to other applications
Lack of components that assist user usability as found in other applications
Has not yet utilized existing features such as history more effectively
After identifying the user persona named Zahra and summarizing the competitive findings, I am now in the process of creating user stories. These stories will outline specific tasks that Zahra needs to accomplish with our product, ensuring it meets her needs effectively
[User Flow]
Select the top-up menu in the e-wallet
You can choose a merchant through recent transactions or select a new e-wallet
You can add the destination number from contacts on your phone or through history
Input the top-up amount
Confirm the destination and top-up amount
Enter the confirmation PIN
Transaction successful
Added features and improved flow
The redesign undertaken doesn't simply change all the existing flows of BSI but rather enhances what is lacking or not yet perfect. Some improvements made include
Adding an escape button in case of selecting the wrong e-wallet.
Clarifying recent transactions.
Clarifying the list of e-wallets.
Adding access to the device's clipboard to input the destination top-up number.
Providing information about the minimum amount (to prevent user errors when entering an unusually high or low amount).
For m-banking with multiple accounts, the source account selection may appear similarly to the top-up process (in the previous design, the source account page only appeared if the user had more than one account in a single application. This flow was somewhat confusing as it didn't align with the transfer feature flow, potentially causing confusion for users).
Clarifying information on the confirmation screen.
Enhancing the user experience during the waiting period for a successful top-up process
Transforming the share button into the primary button is based on interviews conducted, where the activity of topping up for others is nearly as prevalent as self-initiated top-ups. When topping up for oneself, there is a real-time notification, unlike when topping up for someone else. Therefore, if the top-up is intended for another person, it's preferable for users to share the receipt through the sharing feature rather than downloading or taking a screenshot of the receipt. This approach is recommended to prevent potential impacts on their storage capacity. If the transaction is crucial, users can conveniently access it later from the application's historical feature.
[screen] choose E-wallet
[screen] input number
[screen] Select Source Account and Add Top-up Amount
[screen] Confirmation Screen
[screen] Input PIN
In the original user flow, the PIN input step occurred before the confirmation screen.
[screen] Process and Success Receipt
Subsequently, I will proceed with usability testing to evaluate how well the design meets Zahra's needs and preferences. This phase involves gathering feedback from potential users to identify any usability issues and refine the design iteratively. The goal is to ensure that the final product offers a seamless and intuitive experience for Zahra
Test plan
Overall goal:
Evaluate the user experience and efficiency of the top-up process within the e-Wallet application
Specific objectives:
Assess the clarity and ease of accessing the top-up menu, including the usability of selecting destination numbers from contact and latest top-up lists.
Evaluate the usability and effectiveness of the favorite feature, both before and after a transaction.
Ensure the smoothness and clarity of the overall top-up transaction process, including verification of transaction details and navigation back to the main menu.
Gather user feedback on the overall experience, including any challenges faced and suggestions for improvement.
Methods:
Unmoderated testing; screen recording, screen captures derived from click tracking
Location:
Remote
Device and Tools:
Desktop, laptop, & Useberry
Partisipant:
10 participants who use BSI for daily transactions
After identifying detailed findings and key insights from the usability testing, I will proceed with recommendations and iterations aimed at addressing Zahra's needs identified during the testing process
Partisipant
Completed task
Avg Time
Detailed Finding
Detail task
Notes
1m7.3s
Total
1m2.5s
Select Top-Up
Menu
4.8s
Select E-Wallet
Top-Up
BSI provides multiple methods for topping up, including options within both the top-up and purchase menus.
It took considerable time for some users to locate the top-up menu, with one participant unable to find it within 1 minute and 2.5 seconds.
One user encountered an issue by mistakenly selecting the e-money menu, which occurred within 4.8 seconds.
Key Finding
Issue
Severity level
Unclear icon for adding new goals, causing user confusion.
Level 3: Serious
CTA button always active, disrupting workflow by allowing users to proceed without selecting a goal.
Level 4: Critical
No default display for source account when only one account is available.
Level 2: Medium
Dropdown format for total transaction info adds user effort and lacks engagement.
Level 2: Medium
Favorite button is not easily noticeable.
Level 1: Low
After identifying detailed findings and key findings from the usability testing, I will proceed with recommendations and iterations aimed at addressing Zahra's needs.
recommendations
Consider making this section a CTA.
The system should ideally display an error message or disable the button until a destination is chosen.
Add a default display if the user has only one source account.
Provide information about the total transaction without using a dropdown.
Enhance the visibility of the favorite button.
