New Payments Experience - UI

Problem:

Upon adding fees on the payments methods we have also added new methods to our platform, the new methods vary from digital services to services where users have to be present in stores to pay in cash, or use third party applications, users have reported difficulties in navigating the payments, lack of clarity in fee structures, and challenges in selecting cost-effective payment methods due to limited transparency.

Additionally, the existing design does not efficiently scale with increasing user demands or product updates (adding more payment methods), leading to a suboptimal user experience and hindering decision-making regarding payment options.

This has resulted in decreased user satisfaction and engagement surveys, emphasizing the need for a design overhaul to address these critical areas.

Current Design:

Problems with the current design:

1. Default Effect: we couldn't effectively utilize the default effect or prioritize certain payment methods. This limitation doesn't allow us to guide users toward the specific payment options (e.g. Moneyfellows card).
   
   

2. Harder Navigation: navigating between different payment methods required switching screens, which added unnecessary complexity and friction to the user experience.
   
   
   

3. Dynamic Pricing: he previous design's limitations forced us to group some methods' fees (e.g., POS and Online Apps) together. This grouping was necessary due to design constraints, but it reduced transparency and clarity for users.
   
   

4. Screen Congestion: The previous design had too many items considering multiple statuses (disabled, unavailable for a reason, with tags/without tags) on a single screen which then navigated to other screens. This setup was not scalable and couldn't accommodate the potential addition of more payment methods in the future. Fees visibility was difficult, and the payment methods cards were large with the tags including the fees.
   
   

   
   

Figure-1

5. Information Architecture (Figure-2): The current design had significant issues with the information architecture of the payment method components. Applying design principles, such as the proximity law, was challenging and this was clear in adding fees besides the chevron (arrow).
   
   This led to breaking known patterns and adding chips in an inconsistent manner so we had to use sometimes for communicating "New" methods and other times where we had to use it t o place the fees inside. Additionally, it was difficult for users to view the breakdown of fees and compare them across different payment methods.

   
   

figure -2

New Design:

Design Rationale

1. Utilizing the Default Effect:
   Problem: The previous interface did not effectively leverage the default effect to guide users towards preferred payment methods, such as the Moneyfellows card.
   Solution: Redesigned the payment selection to automatically highlight recommended methods, simplifying decision-making and promoting more beneficial options
   
   

2. Navigation Efficiency:
   Problem: Users had to switch between multiple screens to compare different payment methods, creating unnecessary complexity and friction.
   Solution: Streamlined the navigation by integrating all payment options into a single, easily accessible interface, reducing time and effort required to select a payment method.
   
   

3. Transparent Pricing:
   Issue: Combining fees for different services like POS and online apps muddled the cost details.
   Fix: We separated the fee displays for each method, ensuring users see exact charges and can easily compare costs.
   
   

4. Handling More Options:
   Issue: Our previous interface couldn't handle the addition of new payment methods without becoming cluttered.
   Fix: We created a more flexible design that can grow as we add more options, keeping the interface clean and manageable.
   
   

5. Onboarding Animation:
   An onboarding tip animation has been added to the design. This animation appears only the first time the user enters the new payment method screen, highlighting that there are more payment methods to scroll through. This helps in reducing any potential confusion and guides users effectively.
   
   

6. Pinning Installment Amount and Service Fee:
   The installment amount and service fee are now pinned at the bottom of the screen, providing a clear summary of the costs.

The new design addresses the limitations of the previous version by improving navigation, enhancing transparency, and ensuring scalability. It provides a better user experience by making it easier to compare fees and choose the most cost-effective payment method