How do I maintain flow during checkout?

Question

I am working on a payment process that is pretty typical. Users will be required to create a password during the sign up process so they can retrieve their (online) purchase later.

In the course of this checkout process, I will be asking if they already have an account so that the account creation step won't be required before the final checkout.

I'm worried about users who forget they have an account but then reach the final step, where the system will not be able to allow them to create a password for the email address they entered.

If the user (who has an existing account) chooses to skip login, but then tries to use the same email address at the end, how should I handle this?

I've thought of the following options (most of which have been used in practice somewhere):

• Redirect to sign-in form on detection of a duplicate address.

  ^{This option bothers me because then the "Pay now" button is not the final step, unless I redirect back to a censored payment details form, and then I might need to allow edits to that form, all complication I'd rather not have.}

• Throw an error on duplicate email address and change the password field to to a log-in or add a log-in option.

  ^{Errors are yucky.}

• Always have a log-in option on the final step.

• Allow some sort of AJAX login on the final step.

• Something else?

Answer 1

At SmartyStreets, we just revamped our checkout experience and went through the same questions you are asking. Quick intro: To use our service, an account is required, so users must either login or create an account on-the-fly as they go through checkout.

The top part of the checkout form (see an example), users are asked to login if they already have an account, otherwise they will make a new account with a first name and email address. As they proceed with checkout and we find out the email address is already in use, we simply credit their existing account with their purchase, but we do not automatically log them in (for obvious reasons).

UPDATE: We've removed the choice between logging in and creating an account: Now users just type their email and password during checkout, and if they match an account on file, we automatically log them in while they're still on the page. They don't have to even think about it and this has worked out pretty well.

For new users, their account will be automatically created and they will be signed in and redirected to the Dashboard to start using our service.

Finally, existing users who do login during checkout will be quite pleased as the sign up/login form disappears, and their account information slides in from the bottom, including their saved credit cards. All they have to type is the CVC code to finish checkout and they're done.

We throw errors only if their input is bad or our servers are not responding. The rest is a very pleasant experience, no matter which of the 3 paths they take. Hope this helps!

Answer 2

As a developer I want users to have an account on my wonderful system and to login in using their account and password because my system is important to me. It fits my model of how I'd like things to work.

However this isn't a nice flow IMO for most users who actually don't necessarily need to have an account and possibly can't even remember whether or not they have an account.

One of my clients did some testing with this and the results showed that requiring login was actually losing sales because it interrupts the process and the customer may not actually complete the sale.

The solution that we put in place was to require only the information needed to get payment authorisation, plus an email. If the email matches an existing account that's good, but if it doesn't we create an account and mail out the password (this was agonising as I was dead against it on security grounds, but apparently it's an acceptable compromise because compared to the card details that have just been entered a user account isn't that important, and they were primarily concerned about losing sales).

I tried to argue that we send out a one time link that the user can use to reset the password. This was not approved so we did it the less secure method.

Lost sales have fallen since this approach was adopted so the client and user are both happier.

---

They get their certificate and the end of the checkout with instructions and the certificate would be emailed to them together with their account information. If they lose something they've generally made a mistake so that would be dealt with via email enquiry or account recovery.

Make the flow easy for the usual case and handle exceptions separately.

Answer 3

Lookup fancy box v2. I've been using it a lot lately as a modal popup helper. It can open your login page in an iframe popup, allow users to login, and then it can refresh the page when closed or when they login. This will make the users feel very fluid because they never actually leave the final page. go there for an example and create a dummy account, if you click login it pops open and when you actually sign in it refreshes whatever page you were on with you logged in.

Answer 4

I quite like checkouts that use accordions see www.harrods.com and www.Johnlewis.com for examples. One thing that is good about them is that it almost feels like a one page process but the number of steps are still clearly visible.

This means for different use cases you can add different pathways... but because it opens up on the within the page so the user doesn't feel that they have gone away ... the flow continues.

The key is that you don't want anything to interrupt this key stage ... which is why in most checkouts visual clutter is kept to a minimum and the process simplified as much as possible.

Answer 5

"In the course of this checkout process, I will be asking if they already have an account so that the account creation step won't be required before the final checkout." Are there any reasons why you don't ask users to login or create account right after that question? Sounds to me that in the checkout process you are describing "Skip login" is not really an option; even if the users "skip" they will have to Login. I think it would be good to tie your question to the section of the UI that it impacts. Amazon, for example, asks users to log in or register when users click Check Out. After users answer the question (I am a new customer, I am a returning customer) appropriate fields are displayed accordingly. If the user picks New Customer and provides email address for existing account, an error is displayed informing users about existing account.