UX Design & Writing:
A new payment flow for error recovery

Once upon a time in 2023...

Sephora's #1 customer service (CS) query was online payments. Majority held negative sentiments about payment failures, refunds, and order cancellations. In fact, 75% of users give up after encountering payment failure.

Conflict arises: Tech limitations

Thankfully, we learnt that most users solve the problem through refunds before making a new order, and we didn't have that solution in our product. Well, the solution was straightforward wasn't it? Create a new user flow to automate refunds, and users can confidently make a new order.

However, in our discussion with tech, it was impossible to automate refunds. Every refund request would ultimately get routed to CS for a manual refund. It defeated the purpose and might even result in a larger load of CS tickets.

Opportunity

"Hmm, what we can do instead is to override the user's faulty payment if they make a second one", tech suggested. This meant that we would need to give users the opportunity AND encourage them to make that second payment, to override the potentially faulty payment.

We had this special payment state called "Payment Pending" (see below). This was where the system decided whether a payment was successful or not, and the decision time ranged from 15min to 24hrs. During this period, users could only wait with no other way out. We decided to take advantage of this limbo state, and allow users to retry payment. In fact, our PMs did up a numbers, and we found that the increase in retrying payment could have big value impact. So that was one opportunity.

However, we couldn't write away the possibility that users would want to cancel their order instead, since it came up in several CS tickets. So we made space for that option too.

Image: Payment Pending screen

Value projection

By improving the retry rate (for otherwise cancelled orders) of all payment methods and markets, the potential for incremental revenue of €251.9K for a 1% increase; €504.7K for a 2% increase; and €2.527M for a 10% increase.

Hypothesis

Users want alternative ways to troubleshoot payment, rather than just waiting at the payment pending page, either through retrying payment, or cancelling their order.

Proposed Design & Copy

Overall design

I breakdown the three main changes we made below: 1) Adding new CTAs and they're corresponding flows 2) Using visual hierarchy 3) Improving the copy.

Current screen
Proposed screen

01 New CTAs and flows

Retry payment - Happy flow
Cancel order

02 Visual hierarchy

Retry payment vs. Cancel order

Retry payment was higher in the hierarchy; we wanted users to opt for that rather than order cancellation. There were two main reasons:

03 Copy

Assessment of current copy

This is a breakdown of the areas for improvement:

Improved copy

This teases out the rationale behind the new copy:

Design Survey

Objectives

In order to answer the hypothesis, we set up the design survey with these questions in mind:

Results

Attitude towards Payment Pending

75% of users opted for "Retry Payment".

This group of users saw it as a way to take immediate control of their own payment outcomes.

  • "If I could avoid the wait for verification I would try another way.”
  • "I want to use a different payment method like credit card because it's more reliable."
  • "I don't want to wait."
22% of users opted to wait.

These users were either afraid of double charges or misunderstood their payment status.

  • "If retry might jam the system with duplicate action and cancelling order is out of the question."
  • "Why would I retry if payment is successful?" [Note: The user misunderstood the copy.]
3% of users opted to cancel their orders altogether.

The users either wanted a sure outcome or misunderstood the copy that payment failed.

  • "...I'll cancel the order rather than wait for the possible unsuccessful transaction..."
  • "Because my payment is unsuccessful." [Note: The user misunderstood the copy.]
Insight

Majority users prefer to retry payment rather than to wait or cancel their order. They believed it'd lead to a higher chance of success.
However, we also realise that some users who chose to wait or cancel their orders, did so because they misunderstood the copy!

Effectiveness of Payment Pending copy

40% users found the payment pending status copy confusing.

Users understanding of "payment pending" varied.

  • "payment gone through?"
  • "unpaid?"
  • "incomplete payment?"
  • "payment went wrong?"
  • "payment unsuccessful?"
Insight

Indeed, the payment pending copy was confusing, and contributed to misinformed decisions (waiting or cancelling orders). Although it did not stop users from retrying payments, the unclear copy still poses a risk. It might bring users down the wrong path, which is detrimental especially at the end of the purchase funnel. It leads to a loss in credibility, trust, and our relationship with our users.

Reiterated Design

01 CTAs and design flows

It was clear we should retain the "Retry Payment" CTA and remove "Cancel Order". The user flow for "Retry Payment" worked for users.

02 Copy

Improving the copy was trickier. It seemed that the most problematic phrase was "payment pending". Thankfully, there were insights that came out of the research to help us improve on the copy holistically:

The copy just needed to do the following:

Left: Initial proposed design
Right: New proposed design

Further testing

To validate the new copy, we would recommend conducting another round of simple testing. It could be a quick and easy 5-second test. We could show a user the screen for 5 seconds, ask for their impression and what they understood from it. Alternatively, we could conduct a more thorough usability test, and ask questions that will help us find out if the user understands the troubleshooting option.

Next steps

Because of the high value potential (revenue of €251.9K for a 1% in retry rate), the team has taken this initiative on and is currently in development.