Signup flow: synchronous or asynchronous?

Question

So let's say we have a paid subscription signup flow. Usually paid signup flow is implemented in a "synchronous" manner:

• collect details
• click on "sign up"
• wait for card details/charge/etc
• if everything is good, get redirected to to the "welcome" page, otherwise get feedback in the form

However, there is another "asynchronous" way to do it:

• collect details
• click on "sign up"
• immediately get to the "welcome" page that includes a little JS thingie that shows the verification and charge process as it happens:
  • ✓ email delivered
  • ✓ card verified
  • ✗ we couldn't charge your card, please change the card in the profile (link) or contact support (link)

Intuitively it seems that the latter should convert and feel better as it's more "magic", it's faster and 99% of customers will have everything sorted anyway. Those who don't have a bit more stimulus to persist and solve their problems instead of just abandoning the flow. However, the first one is more familiar.

Which one is better?

Answer 1

So the closest article based on research I could find on this topic was one called Checkout Usability: Apply Changes Immediately and Near the Input from Baymard Institute.

What this article concludes is the following:

During our usability study of the e-commerce checkout experience we found that users have a hard time figuring out what actually happened when changes – such as an updated shipping cost – don’t appear instantly and in close proximity to the input applying those changes.

[...]

Some of the tested sites that did apply the change immediately, reloaded the entire page after each change, making it very difficult for the customer to actually notice the difference. From a usability point of view it’s better to apply changes immediately without reloading the page (using AJAX). Furthermore you may highlight the changed elements for a few seconds, e.g. with a yellow background.

In short: Apply changes immediately (without reloading the page) and in close proximity to the input field/button.

Unfortunately the article does not seem to be a 100% match to your problem, but it is the closest I can find at this point. Otherwise I'd recommend to perform some usability testing on both options and see from there which option works the best.

Answer 2

Not so much from a UX perspective, but from a security one, I'd suggest the first approach.

In the second approach, if "immediately get to the "welcome" page" means they get to access the subscription-only content, then there is a danger that people can syphon-off your content without having paid. While someone may not be able to manually access much before the response to fake card-details comes back, a carefully-crafted download script could potentially steal quite a bit of material.

If the "welcome" page doesn't lead to any subscription-only content, and people have to wait there until the payment-process completes, you may as well have left them in the payment form as per option one.