Deconstructing PayPal’s Radical Checkout Redesign

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).

PayPal Checkout: Old vs. New

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.

A/B Testing Radical Redesigns

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

Tags:


Related Articles

23 Responses to “Deconstructing PayPal’s Radical Checkout Redesign”

  1. Very interesting redesign. As you point out the new design raises a obvious question about improvements being in paypal vs. the merchants interest. The new design is clearly for paypals own gain at the expense of their merchants due to the shift in focus from paying with credit card to paying with (/creating) a paypal account.

    I noticed on several occasions that the old design was “smart” and defaulted for paypal payment if you had logged into a paypal account with the computer before (using cookie), and vice versa, showed the credit card option as default (the first screenshot in your article) if there was no evidence indication the customer already have a paypal account.
    Do you know if the new design does the same?

    • I’m not sure, but I’ll test this next time I check out. I’ll try and use Chrome.

    • TekGems says:

      The alternative is to get your own merchant account, which has its own pitfalls. Comparatively, this is the deal you make with Paypal. If you offer Paypal on your web store as well, it seems like a non-issue.

      I like that they removed the Billing wording. Often times, customers get confused about whether to enter their Billing address then put a separate shipping address. But by just saying Address, buyers are implicitly encouraged to enter in the shipping address if it differs from the billing.

      Does anyone know why Discover is not on the list?

      You also have a processing discount if you primarily accept AmEx since the rates are higher for merchants. We used to joke among some online merchants that we should only process AmEx through Paypal to realize the discount.

  2. Joe alan says:

    Tell me what you think of my sites paypal option, its completely modified from standard

    • Start by offering a “guest checkout” instead of requiring every customer to register an account. In most cases the required account is a true conversion killer.

    • Hi Joe, I went to check it out but I can’t see a PayPal option – I assume I need to enter my information and PayPal will be presented later in the checkout process. You might consider putting more explicit messaging on what payment types are accepted earlier in the process? Many sites bake it into the header/footer, product pages or cart summary.

  3. Linus says:

    If you have not paid with PayPal from a particular computer/browser it will default you to the Credit Card option. They are using a cookie to detect if you are an existing PayPal customer.

    If you have used PayPal before you will see the Login screen open/exposed. I think this is very similar to the way it was before. In fact I would argue that discoverablilty of the CC option for an incorrect cookied user is much better in the new version.

  4. Will Emerson says:

    I think the new design is way better looking and not so antiquated. Just returned from the Paypal X Developers Conference. It sounds like they are changing a lot of backend functionality for this form so that all their offerings use the same code underneath. They are having some problems getting that to work everywhere so it is rolling out slowly. It’s random whether the new form pops up or the old one, even on the same site. Several developers reported better conversion rates with the new form. I believe on some of their products, you will be able to configure whether the credit card block loads open or not. They have some cool things in the works.

  5. Brian says:

    With PayPal’s latest Express Checkout API you can select which screen the customer sees upon checkout. Whether it’s the “Sign into your account” or the credit card fields is completely customizable now.

    I have noted that the style of the checkout appears to be completely random, but you can be sure that with such a major overhaul of the payment screen that they’re doing A/B testing.

  6. I’m digging the new look. I haven’t seen it yet, but looks clean. The less text on the page should mean less confussion for users.

  7. An interesting breakdown of the old versus new (but I believe this is more of an Etsy Checkout redesign than PayPal). Etsy’s new checkout uses PayPal’s Express Checkout.
    http://www.auctionbytes.com/cab/abn/y10/m10/i25/s01

    • TekGems says:

      The problem with Express Checkout, unless Paypal has addressed this recently, is that you can not change our shipping address. Paypal uses your default address which is not what customers always want. Its a security issue, but for low dollar items, it becomes an inconvenience when the customer wants the order shipped to a gift address.

      • Agreed Tek – I find the one PayPal offering that best suits most situations is the “Standard” Its API allows you to gather customer information on your site and store it in your own database, then allows you to pass this information on to PayPal and pre-populate their form with the data of your choice and then complete the credit card part of the transaction on their server. I find it a best of both worlds solution if you are using a non-real-time gateway. For true customer convenience, I still prefer a true real-time solution like PayPal PayFlow Pro. I checked on a couple sites and didn’t see the new interface for PayPal Standard yet, I’m interested in seeing what it’s like.

      • Etsy seems to get around this, Tek, I’m able to choose my existing shipping address or enter a new one in a step before my final review. When I click “Commit to Buy”, it’s captured my shipping address and I go directly to the forms above. I have used both a Canadian and US shipping address on separate occasions and it works great. Items arrived.

    • Thanks Ina, rather than an Etsy redesign (the announcement seems more about back end features), could this be the difference between standard and Express? I am under the impression PayPal does not offer much customization (if any) of form fields across merchants – I haven’t been able to find any developer tools to extend/modify.

  8. Tekgems says:

    @ Linda thanks for the clarification on the easy checkout flow. Our cart provider was an early adopted of paypal express checkout. Perhaps it was their implementation or some enhancements have been made recently. It sounds like you can add a new shipping address from paypal, so I will ask our cart provider to see if they can do that as well.

  9. Thank you Linda for making multiple purchases using PayPal and recording your thoughts. Yes you are correct, PayPal is testing a new checkout flow. In order to deliver a consistent experience for each customer, once you start to see the new checkout flow – you will continue to do so. This is why after your first purchase, you saw the new design for the next 9 purchases. We do this using a PayPal cookie.

    But the “New” Version screenshot shown on your blog is actually a “cookied version” (Show to a customer who has previously logged in to PayPal from that machine & hence has a PayPal Cookie). So the layout comparison section is actually comparing 2 entirely separate conditions: “Old design with no PayPal cookie” vs “New design with a PayPal cookie”.

    A better comparison would be the “old design with no PayPal cookie” vs “new design with NO PayPal Cookie”. The way to get to that new design with NO PayPal Cookie is simply by clicking “Pay with a debit or credit card”. So any machine that does not have a PayPal cookie will see the page load with “Pay with a debit or credit card” opened by default in the new design (somewhat similar to old version with open form).

    There are several other interesting details that you have pointed out. These new designs have gone through numerous rounds of research, testing & consumer feedback around the globe. A lot more multivariate testing and continuous optimization is in the works (as you pointed out).

    Thank you for the thoughtful comments. For PayPal to be the best way to pay and be paid online, we know we have to continue optimizing & enhancing our customers experience.

    Kuldeep Kelkar
    Head of Global Experience Research, PayPal

    • Thanks for the explanation, Kuldeep. I did switch from Firefox to Safari to checkout and that would explain the no-cookie/cookie version, I can’t believe I didn’t think of that. That makes complete sense to do it that way and present the PayPal option first after I used my PayPal account in the first transaction.

      Linda

    • Hi Kuldeep – please see my comment below regarding some real world feedback about the new designs.

      On my end it doesn’t seem to be Cookie based, it seems that if an email address is submitted with the order, and that email address has a paypal account, then it shows the login with paypal form as the default.

      Regardless- there are still way too many gradients, borders and other elements in that design that are cluttering the UI.

  10. The new paypal checkout UI is Terrible – and it is showing in our conversion rates. We are losing sales in between the checkout process of our store and arrival at the new paypal checkout page.

    The simplicity of the Old process is a convention that works and one that users expect – the new process is just way too visually cluttered – alignment issues, too many borders and background colors – I’ve submitted multiple requests to Paypal to simplify this page with 2 headers “Pay with a credit card OR Pay with your paypal account” – it really needs to be that simple.

    I thought I’d leave a comment to let other users know to submit the same feedback to paypal if they’ve seen conversion rates fall after the new UI launched -

  11. Tim says:

    Do you know if they are still allowing custom image banners (750px by 90px)?

    I have tested this new interface in my account, and it looks as though the image banners along the top work for the old interface, but not the new.

    However, on the preview page there is still a huge area at the top on the new layout for an image banner, but it just seems to not be using it.

    So, does anyone know if they are keeping banners AND adding the logo, or changing from banners TO just a logo?
    Thanks

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS