Pay With Multiple Credit Cards
Project Overview
Hepsiburada is Turkey’s second-largest online store offering approximately 180 million products across 32 categories, connecting approximately 50 million members with a growing base of more than 100,700 active merchants.
My Role
I led the Pay With Multiple Credit Card strategic initiative with one researcher and two other UX Designers. I was in charge of benchmarking, data collection, user flow, wireframing, and UI design.
The Problem
There were several opportunities to enhance the checkout experience and increase purchasing and conversion rates with the Pay With Multiple Credit Card feature:
Insufficient Credit Card Limit: A single card may not have a high enough credit limit to cover a large purchase. As a result, we encountered an increasing card limit error at Hepsiburada.
Budget and Debt Management: Customers may want to manage their spending by allocating costs to different cards to avoid accumulating too much debt on a single card to prevent high-interest charges and manage repayments better.
Users and Audience
The platform receives 110 million total visits monthly, with approximately 70% of users being men. The majority of users fall within the 25-34 age range, and 60% of traffic originates from the mobile channel. High inflation makes it harder for customers to make ends meet, and people are looking for alternative ways to buy things, such as shopping loans, which enable them to purchase expensive products on an e-commerce app by taking out a loan from a bank without physically going to the bank.
Scope and Constraints
Payment with multiple credit cards is a rarely provided functionality in applications. After researching major e-commerce platforms globally, I discovered that only the Apple Store offers this option. Given that the payment process is one of the most complex aspects of e-commerce, we needed to address various scenarios, including success, error, and crash cases.
Apple Store Split Payment
Moreover, splitting the payment amount into two parts introduced new challenges, requiring us to account for different cases. Another critical decision involved selecting the appropriate form validation method. We considered three approaches: validating inputs in real-time as users typed, validating each form field as users completed and moved to the next one, and automatically adjusting the split payment amount to match the order total, even if it was higher or lower. Our goal was to take the best possible approach without disrupting the transaction process.
The Process
Research And Understanding
I conducted a comprehensive benchmark that involved the 'pay with multiple cards' feature. I analysed payment type success rates and card limit errors. After encountering high inflation, card limit errors and loan requests increased. People were inclined to find alternative ways to buy items on Hepsiburada.
Wireframing and UI Design
We determined the user flows, which made it easier to add the "pay with multiple credit cards" feature without disrupting the overall user experience. Additionally, it helped maintain consistency in design elements and align the entire team on the user experience goals.
Pay With Multiple Cards Flow
The multiple credit card payment option was displayed as the second choice, directly under the z credit card option. To draw attention to this feature, we added a badge highlighting the availability of multiple card payments.
Outcomes
Increasing Total Orders: Providing the multiple credit card payment option increased total orders by 1% and sales of high-priced products by 3%.
Decreasing Card Limit Error Rate: The card limit error rate decreased by 2%, and 27% of customers who saw the limit error popup paid with multiple credit cards.
Boosting Conversion Rates Among Young Adults: We increased the usage of Hepsiburada among 18 to 24-year-olds, boosting the conversion rate by 12% in this age group.
Increasing Amount of Saved Credit Cards: The amount of saved credit cards increased by 7.3%
Lessons Learned
The "Pay with" project demonstrated how crucial it is for an e-commerce site to adapt to a country's specific economic context. Turkey's economic situation required us to adjust our purchasing process differently than in Europe, which led to significant improvements.
One key aspect was how we had to break away from best practices in form validation. When users split their purchases into two parts, the traditional validation approach wasn’t effective. For example, if users entered amounts in two fields, changing one amount would automatically adjust the other. Instead of simply showing an error, we found that directly correcting the mistake was a more efficient solution in this context.
This project revealed that best practices are not always one-size-fits-all and that flexibility is essential. Fixing errors like these, especially with amounts, provided a quicker and smoother experience for users, helping them avoid confusion and complete their purchases without unnecessary friction.
Finally, finding examples and exploring how to integrate this feature broadened my understanding of both UX and development. Reaching a solution that balanced the needs of both teams gave me a deep sense of fulfillment and inspired me to take on more responsibility. I realized that with determination, I could overcome challenges, which boosted my confidence and made me more mindful of the impact of my work.