Loading Form...
Thank you
Oct 28, 2010 | 5 minute read
written by Linda Bustos
I recently made a number of purchases from various sellers on the same day through the Etsy marketplace, which uses PayPal as its checkout solution. Nine times out of 10 I was presented with PayPal's "new" checkout process, and once with the "old." A split test test or a mistake, I'm not sure - though Etsy is large enough that PayPal might conduct a test through it.Thanks to comments by keen readers and a confirmation by PayPal's Head of Global Experience Research, it has been brought to my attention that the difference in versions is due to cookie-ing (yes, I made up that word). However, PayPal is continually testing its checkout process, so you can expect little things to change from the screenshots below over time.
Of course, I always have my screenshot application open, so I captured a screenshot of both checkout options so we can study PayPal's radical checkout redesign. (Please note that Shipping Address was already collected in a previous step on the Etsy website, these shots deal only with making payment).
Old Version:
New Version:
Let's break down what's different.
Layout
The most obvious difference is the presentation. The old version offered 2 options - pay by credit card or log in to your PayPal account, but presented the credit card option first on the left. The new version downplays the credit card option, making it harder to spot. In fact, unless you look carefully, you may miss it entirely. (It took me around 7 checkouts before I realized I could pay by credit card, which I prefer to PayPal sucking funds from my checking account).
It's in PayPal's best interest to promotes its own service first - why offer the credit card option more prominently? But it may not be in the best interest of customers and merchants. Some customers prefer to use a credit card. Others forget their user names or passwords (though they're more likely to remember if they use PayPal frequently). Many don't have a PayPal account, and won't sign up with one just to complete checkout. If they don't notice the credit card option, they'll bail and the merchant loses the sale.
Nevertheless, the new version is definitely more streamlined. With less text, input fields and calls to action than the original, it appears to be easier for visitors to digest. Some customers will appreciate the cart summary.
Perhaps adding credit card icons to the credit card option might solve the camouflage problem while retaining the clean design:
Fields
For the PayPal login, the new version uses "PayPal password" rather than just password to prevent the users from entering an email password into that field.
Notice several differences between the old (left) and new (right) credit card forms.
Let's start from the top.
The old version begins with a chunk of text, including a link to "Learn more" about signing up with PayPal. The new version asks customers if they want to sign up after the credit card transaction is complete.
The CSC (Card Security Code, also known as the Card Verification Value or Card Verification Code) is given its own line in the new version. The "What is this?" link appears closer to the label than in the old version, which may help it be more visible (the eye reads the label and immediately sees the tool tip). I still prefer AT&T's approach of showing where to find the code visually.
Labels are aligned right on the new version vs. left in the old. According to web usability expert Luke Wroblewski, left aligned labels are more taxing to the eyes and result in slower completion times. (The eye has to travel the space between the last letter of the label to the input field). However, left aligned lists are easier to scan, and that is helpful for forms with many optional fields. PayPal only has one optional field, so this might have proven better in usability tests.
The new version does not use superfluous colons after the field labels, and spaces the fields out more. At a glance it makes the form appear longer, but the space may make it easier on the eyes.
Province is no longer an open field, which prevents typing errors. But novice users who don't know you can use the tab feature may stop and grab their mouse, which slows down their process.
Security Point of Action Assurance
Originally, the PayPal logo with lock icon and link to Secure Payments information appeared above the login box. For credit card customers, this may have been too far away from the call to action to be noticed. It was also boxed in a border that could have caused "banner blindness." The new version places the point-of-action assurance where the customer has the most anxiety - right at the point of submitting personal information.
Checkout Button
Could the shorter button label increase conversion? "Review Order and Continue" suggests a cart total might be presented after clicking the button. The new checkout shows the order while you enter login or credit card information, eliminating the need for order review.
PayPal's new design has made several UI changes (I refrain from using the word "improvements" without any conversion or usability testing data), some which may benefit PayPal rather than customers/merchants (e.g. hiding the credit card option).
This radical redesign takes into account several things that may have been affecting usability, customer experience and profitability for PayPal. If this were an A/B split, you wouldn't be able to pinpoint whether it was the layout, copy, field labels, point of action assurances or the checkout button that was responsible for the lift. But by throwing as many "improvements" into the test design as possible, you maximize the likelihood of beating the control (or, you'll learn that your control beats your original!) Once you determine the winner, you can then conduct further rounds of testing to investigate the impact of individual elements.
For more information on A/B split testing, check out a few posts from this summer:
The Difference Between A/B and Multivariate Testing
4 Reasons for Site Testing
Choosing Between A/B or Multivariate Test Design
Developing a Site Testing Process