Redesigned XpressPay's Payment Checkout: Xpress Payments collection services for businesses.
Role
Product Designer
Core Responsibilities
Discovery, Product Design,
and Usability Study.
Timeline
Q1 2024
I redesigned the payment collection experience, making it faster, more transparent, and reducing confusion around transaction breakdowns.
I collaborated with Product, Marketing, and Engineering to achieve this goal.
Role
People
Product Designer
Basit Ogunlana (solely led the research and design efforts for the project)
Key Partners
Product Management, Engineering, Marketing
During a quarterly product performance review, I identified low rate of transactions completion in XpressPay’s payment collection service. Through UX research, I proposed targeted improvements and was tasked with leading a team to redesign the payment system's user experience. Collaborating closely with the marketing and product teams, we delivered an enhanced, user-centric payment collection experience that addressed the identified issues.
Impacts Achieved
Before Launch
After Launch
Change
B2C transaction numbers
5 of 10 transactions completed
9 of 10 transactions completed
+80%
Merchants onboarded
3.7k
14k
+378%
Average time
per transaction
4 mins
90s
-70% reduction
During a review of XpressPay’s payment checkout, I identified a critical flaw in the payment process flow, which made it difficult for customers to complete transactions. The interface had accessibility issues (lack of visual hierarchy & guide texts), and a clustered interface, both of which often made the payment process tedious for customers using the checkout. This complicated system hindered customers from completing purchases and prevented merchants from converting cart additions into sales, impacting both user experience and business outcomes.
Through user interviews with customers and analysis of merchant report, we discovered that over 50% of payment attempts resulted in users abandoning the checkout process, successful transactions averaged 4 minutes for completion and verification, causing significant friction. These issues impacted customer satisfaction and drove away potential sales. I reported these insights to my team head, and we agreed this urgent issue required immediate resolution for all stakeholders.
XpressPay's payment checkout experience was underwhelming due to significant accessibility and usability issues. A clustered interface, absence of intuitive microcopy, and lack of clear visual hierarchy, made the process tedious and complex, leading to user drop-offs and low merchant conversion rates. To get a handle on the problem, our team conducted user interviews, audited the checkout interface, performed competitor research, and mapped the existing customer journey.
Our analysis revealed that 70% of users make impulse purchases, often driven by targeted ads and social media, yet struggle with a slow, confusing checkout process. Additionally, 20% of customers prioritise convenient payment options for services, and 10% rely on seamless recurring payments for subscriptions. These design and accessibility barriers hinder users from completing transactions and prevent merchants from converting cart additions into sales, emphasising the urgent need for a more intuitive and inclusive checkout experience.
Sources: XpressPay merchant report (Internal), CBN e-Payment Statistics for 2023, and competitor’s report on payment collections.
To pinpoint these issues, we employed a robust research approach, utilising Trello boards for collaborative affinity mapping. Working with the product manager and a marketing team member, we integrated survey results from 35 user interviews, online surveys, analysis of the e-payment landscape and user behaviour data. This process helped to identify essential trends across user segments, revealing how the checkout's design fails to meet customer needs.
Key Insights from Research:
Bank Transfer Preference: 83% of customers prefer bank transfers, a dominant payment method in Nigeria, but the cluttered interface complicates its execution;
Card Payment for Subscriptions: 90% of subscription users prefer card payments, yet the process lacks efficiency and clarity.
Transaction Delays: Customers experience prolonged waiting times for transaction verification, disrupting the checkout flow.
User Confusion: Customers frequently feel lost during and after the payment process due to missing or unclear instructions, leading to frustration and abandonment.
The team envisioned a solution that revolves around clarity during the transaction process, familiar interface for easy navigation, fast payment completion, and saving preferences for returning users. The goal was to implement these changes simultaneously in this phase and rework accordingly after preliminary usability testing.
To achieve this, the team held multiple deliberation sessions. As the sole product designer on this project, I led the sessions with the PM using Miro to map out initial concepts and user flows. This laid the structure for the product revamp.
Design Concepts
I visualised an interface where users can navigate the process easily, with concise instructions that ensured the details displayed at all times were directly important to the process. This meant decluttering the interface, proper use of hierarchy to direct users attention, features that ensured returning users can pay easily, and interactions that make the user experience smooth.
I designed two concepts for the initial A/B testing that involved 20 users of the existing interface utilising them, the results from the test revealed users leaned towards the first concept because of its familiarity to other interfaces they interact with in their day-to-day activities. We also found that the second interface extended the text way below, affecting users ergonomic eye level hereby causing slight strain.
Initial Design Concepts
After meeting with the key stakeholders to showcase the initial design concepts and results of the A/B testing, we decided to go with concept A because it was a more familiar interface for our users, reduced eye strain during transactions, and it separates the payment selections from the main interface, helping to make sure users focus on the main process.
As the sole designer on this revamp project, I led the design efforts while actively participating in weekly critique meetings with the design team to ensure adherence to the highest design standards.
The Interface
Research revealed that users navigate familiar interfaces more effectively, inspiring an ATM-like design complemented by a menu/navigation bar, mirroring common web interfaces. This approach ensured all essential information was available on the initial load, with clear instructional text placed at the top to guide users through the payment process. Additionally, the most prominent local payment method, identified through research, was pre-selected as the default to streamline the experience and help users achieve their goals quickly and seamlessly. Usability testing confirmed the design's effectiveness, with 82% of participants opting for the default payment method without switching options.
Layout and Process
To enhance the payment experience, we focused on providing concise instructions to ensure a seamless and efficient process for our users. We prioritised a simplified layout with less clutter, while making sure to incoporate affordances for future transactions. This included options to save card details or reuse previously saved cards, catering to user convenience. Saved cards required a preset PIN for access, eliminating the need to access physical cards when initiating a payment,
For users opting for bank transfer, we addressed the common challenge of transaction verification delays by enabling users to revisit and confirm details during the waiting period. This functionality is essential in the case of failed transactions, which often occur due to temporary banking system downtimes, ensuring users correct an error or verify the payment details.
Transaction Status Screen
The steps after making a payment can be said to be crucial to the payment itself, as they determine whether a customer carries out further actions, retries the process, or closes the checkout. To enhance this experience, we utilised dedicated transaction status screens to communicate the outcomes of a payment: (a) payment success with no further action required, (b) payment failed with reasons and next steps, (c) payment time with an explanation, or (d) a broken link, its cause and what to do. These options address a gap in the existing checkout, which previously didn’t provide clear guides on the next steps.
To improve user understanding, we utilised illustrations paired with concise descriptions. The illustrations give a visual cue that conveys the status at a glance, even without reading the text, while the accompanying instructions detail the next actions or steps, based on the payment outcome.
Text Tone and Micro-Interactions
To ensure our users can carry out swift transactions during every checkout interaction, we refined the text tonality to be concise and purpose-driven. This change ensures users are presented with appropriate information required for their next action, effectively streamlining the process and reducing confusion. Additionally, I enhanced the micro-interactions within the interface, making every click, hover, and transition feel responsive and intuitive. This turned the previously static experience into a dynamic and interactive one, significantly improving user engagement and satisfaction.
You can try out the prototype below.
After gaining a deeper understanding of the problem, we identified the most effective concepts to enhance the user experience in our payment checkout, ultimately choosing the best fit for both our users and the product. This process was documented and integrated into the product roadmap, providing a clear path for implementation.
Transaction completion rate
Payment method preference across businesses
Transaction completion time
Support tickets opened and categories
The updated transaction status screens and responsive interface led to a 40% increase in transaction completion rates, a 2.5x boost in user retention, and a 55% reduction in support queries related to payment confusion. Key insights highlighted areas for refinement: unclear error messages caused a 15% drop in retry attempts, and 45% of users abandoned the checkout due to slow load times during peak hours.
Enter Password
Hint: Which came first, the chicken or the egg?