Nomba
Bulk Airtime Transfer
2024
PROBLEM STATEMENT
Demola, a frequent airtime sender, faces a stressful and time-consuming process of sending airtime to each recipient individually. This repetitive task becomes especially inefficient during special occasions like birthdays, when he needs to send airtime to a long list of friends and family. To address this pain point, I designed a feature that simplifies the process by enabling him to send airtime to multiple recipients in a single transaction.
OBJECTIVE
Design a simple and efficient mobile feature that allows users to send airtime to multiple recipients at once, streamlining the process and reducing the time and effort required for a user who regularly sends airtime to a large number of people.
SOLUTION OVERVIEW
To address Demola's pain points and create a more efficient way to send airtime to multiple recipients, I designed a feature that enables users to send airtime to several recipients in a single transaction. This feature is built around two primary solutions for ease of use and flexibility.
ROLE
Product Designer
DURATION
1 week
Selecting Recipients from Contacts
In this flow, users can select recipients directly from their saved contact list. By tapping the "Select from Contacts" option, they are taken to a dedicated screen displaying their full contact list. From there, users can select multiple recipients with ease. The selected contacts are then displayed as chips on the next screen, providing a clear visual summary for review.
- User Action: Select recipients from the contact list.
- Output: Selected contacts are displayed as chips on the next screen, where users can review and proceed with entering airtime details.
I used familiar interaction patterns to keep the process intuitive and quick. The experience focused on speed and flexibility, with features like quick selection, search, and bulk actions to make managing multiple recipients feel smooth and efficient.
Manually Entering Phone Numbers
For users who prefer to enter numbers manually, this option allows them to input multiple phone numbers at once by separating them with commas. It's designed to accommodate cases where recipients are not saved in the user's contact list, offering greater flexibility and control over the input process.
- User Action: Manually enter phone numbers, separated by commas.
- Output: Entered phone numbers are displayed as chips on the next screen, where users can review and proceed with selecting a provider and entering the airtime amount.
Entering several numbers at once can be tedious, so I designed the input to accept comma-separated entries. This keeps the process quick and gives users a clear way to review what they've added before continuing.
Recipient Management
I designed the screen to give users a clear overview of their transfer before they continue. Recipient tags make selected contacts easy to track, while separating provider, deal, and amount selection keeps the experience simple and easy to scan.
Payment Review
Before payment, users need a chance to verify that everything is correct. I designed the review screen to present all recipients, network providers, and airtime amounts in a clear, scannable format, making it easy to spot mistakes and make changes if needed. The payment sheet provides a final summary of the total amount, cashback reward, and payment method, giving users confidence before they complete the transaction.
Transaction Summary & Details
The flow makes it easy to review transaction results without feeling overwhelming. The summary screen shows the status of all completed transactions in one place, while individual detail screens provide more information such as the recipient, payment method, transaction ID, and date. This helps users quickly confirm their transactions and dig deeper only when they need to.
Design Feedback & Iterations
During design reviews, I received useful feedback that helped shape the interaction patterns on the Send Airtime screen. Some key insights included:
The cancel (remove) button on each chip had a small tap target and was not visually prominent. Additionally, adding the button to all chips, including non-selected ones, reduced the emphasis on the highlighted chip and increased the risk of accidentally removing the wrong recipient.
Allowing users to manually select the mobile provider was flagged as unnecessary, since the provider can be determined automatically on the backend using the phone number. Leaving this step to the user introduced potential errors, such as selecting the wrong provider for a number or contact.
I made the following improvements:
The cancel button was updated with a white highlight to make it more visible and distinguishable. To reduce accidental removals, I removed the cancel button from all non-selected chips. Now, only the highlighted chip displays the cancel button, ensuring users can remove recipients intentionally.
Instead of allowing users to select a mobile provider manually, the system now detects and displays the provider automatically based on the phone number. The provider is shown on the chip next to the contact or number, eliminating user error and streamlining the process.
The designer also pointed out usability issues with the manual phone number entry flow. He raised concerns about what would happen if a user entered a comma too early, added it after an incomplete number, or forgot to include a comma altogether. Additionally, there was no visual feedback to indicate whether a number had been successfully recognized and recorded by the system.
I made a few key improvements based on this feedback:
To support first-time users or those unsure about the format, I added a helper icon beside the input field. When tapped, it opens a bottom sheet explaining how to properly enter multiple numbers using commas, along with examples and tips for avoiding formatting errors.
For edge cases such as entering a comma too early, forgetting it altogether, or inputting incomplete numbers, I implemented validation rules. The system now flags any number that is fewer than 11 digits, prompting users to complete or correct it.
If a user types more than 11 digits without a comma, the system displays a warning and prompts them to insert the appropriate separator to avoid number merging or misinterpretation.
Each valid phone number is automatically converted into a chip once it reaches 11 digits and is followed by a comma. This gives users instant visual feedback that the number has been successfully recognized and recorded.
Previous
Medibridge