Published on | Prototyping: From UX to Front End — Medium Serah Lee

Designing a Paypal checkout UI for Practice

DailyUI’s second prompt is to design a checkout page. I had a hard time figuring out what page I should redesign this time. (For the previous UI prompt, I redesigned Google mail’s sign up page.)

I surfed a few e-commerce websites I could think of. Eventually, while looking around Nike website’s shopping cart, I stumbled upon the Paypal’s checkout page. I thought it was kinda impressive! I decided to redesign Paypal’s checkout interface and have learnt quite a fair bit from doing so.

But before I share my views, let us consider why we need to design a good checkout page in the first place.

Design matters in checkout pages too.

An e-commerce website is like a virtual shop.

The main page and product pages are, collectively, like a 24/7 salesperson that holds the products in his hands. “Come buy this product!” he says. He then proceeds to tell you about how good this product is and how you’re missing out. Boy, he was right. It’s that product you had been eyeing for 2 months. You already googled all the cool things about this product. You needed that last affirmation.

An e-commerce website is a digital shop. (Credit: Freepik)

“YES, I would like to buy it!” you say. Mr. 24/7 salesperson gives you a thumbs up. He hands you a basket with the product and asks you to make payment at the counter on the other side of the shop.

You reach the counter and ask for payment. The cashier tells you that in order to make a payment you’ve gotta do A, but you also have to do B. Then while you are doing A and B, he shoves a membership form into your face and says “Oh, just fill that up” but it’s 3 A4 pages and you’ve gotta go already because you have to head for class/work/home and you are late…

So off you went, leaving the product at the shop.

Well of course if it’s a physical shop, you can’t back out when you have already made a payment. For e-commerce websites, there’s always the red X button in the corner to terminate the session. You can have 1000 visitors to your website and none of them make a payment, i.e. no revenue.

An e-commerce website ain’t got the business until the customer pays the money. And the interface designs of the shopping cart and checkout pages play a huge part! According to Statista, there are various reasons why digital shoppers would abandon their shopping cart.

(Credit: Statista)

While shipping remains as the top reason, I would like to refer you to the 7th top reason: long process. (Bad site navigation is also counted as design , but perhaps not very relevant to what I will be talking about in this article.) These are reasons that can be solved by good design.

Forms can get tiring

Users can get frustrated if:

It looks like it will take very long to fill up a checkout form
It actually takes very long to fill up a checkout form

The consequence?They’ll probably postpone the activity (of filling the form) to tomorrow, or the day after, or next week… then maybe they’ll just forget about the product altogether.

That’s why it’s important to streamline the checkout experience.
To lock the deal ASAP.

Learning points from Paypal’s checkout page:

LEFT — An increasing trend in Paypal’s number of active user accounts. RIGHT — Paypal as one of the leading forms of payment method in the e-commerce scene. (Credit: Statista)

As seen in figure on the left, we can see that Paypal’s total active registered user accounts has been increasing steadily from 2010 to 2017. This is further supported by the fact that it still remains as one of the leading forms of payment method, with credit and debit cards remaining as the top payment methods.

How does Paypal actually manage to get more users? One reason would be the design of its checkout page.

Last week, I tried to buy a product from Nike’s online store and opted to pay with Paypal. This is the screenshot of the checkout page:

Paypal’s current checkout/payment page (after clicking “Pay with Paypal” option in Nike’s )

There are a few interesting points we can see and learn from Paypal’s checkout page design:

1. Guest checkout

Having a guest checkout instead of forcing users to create a new Paypal account (or log in into an existing one) is a good idea. In fact, forcing users to register their details before they checkout is a proven way to reduce conversion rate of customers.

The reason? Most users would rather not invest the time and energy into creating an account. They just want to get it over and done with — select a product, pay for it and then close the tab.

2. A strategic “Why not create a Paypal account?”

It’s a very subtle way of encouraging users to register for an account (if they hadn’t) and they have even provided the reason why users should do so: security and convenience. We can also see that even the sign up process is streamlined; they simply ask you to set a password and you are good to go. You don’t even need to fill up additional particulars (D.O.B., secondary e-mails) at this point of time.

Furthermore, the password field is disabled by default. It gives off the positive vibe that Paypal is not forcing users to sign up, but only encouraging them to sign up only if they want to. This gives users a sense of choice and control in this situation.

3. Simple, no gimmicks design

The design is neat and straight-forward. What’s more to say?

Possible Improvement: Having user action feedbacks.

When I proceeded to another field in the form without filling in the preceding one, there was no notice/indication of error. Also, I didn’t know whether a field is required or not when filling up the form.

Paypal’s checkout page: Redesigned

Alright, back to the DailyUI practice. This time, I used the 10-day trial version of Affinity Designer. Here’s my design for the checkout page:

My take on Paypal’s checkout page.

I haven’t changed any content; all the fields, links and images are there. I have, however, changed the way some things are arranged:

Separating Guest Checkout and User registration forms

I separated the both of them into two columns respectively.

This is because the forms are getting user information for different reasons. The first is for payment (required). The second is for user registration (optional). Since they represent two different ideas/things, I felt that they should be splitted.

Putting the sign up form in the same column makes it look tedious for us to complete the checkout form. Maybe because it lengthens the form.

User feedback

The border of the input field will be green if completed as required and red if missing or incomplete. In addition, I’ve also added icons (tick vs. exclamation mark) as visual cues to complement the colour cues.

Off-white background for contrast

I had a dilemma when it came to the background colour. I had showed my initial design (with a darker grey background) to my brother. He preferred the white background because it looked neater. He felt that having a grey background didn’t look pleasant.

However, I thought that having a grey background could bring out the checkout form to the user and thus enhance the user experience of using the website. I settled for off-grey, though I must say, the UI with white background looks sleeker!

Left — Initial design with darker grey background, Right — White background. What do you think?

Price next to Payee’s logo

Since I’m buying from Nike through Paypal, I thought of trying to bring the price closer to Nike’s logo and then box them up for better association. Just a random experiment.

Design is subjective

Comparing the original with the redesign

My brother liked the original Paypal design because he felt that the design was cleaner with its white background. My partner liked the redesign because he liked that “Guest Checkout” and “Create a Paypal account” was separated.

Reminder to self: Design is subjective. We can’t please everyone in the world.

We could perhaps just take the design that yields the maximum results, which will be justified by user research and testing. (I think. I’m new to UX.)

I have learnt a lot from this redesign! In my next article, I hope to be able to cover my experience of using Affinity Designer. Till then, folks!

Hey there! Thank you for reading.

I hoped you have enjoyed this article as much as I did writing it.

If you have any comments, opinions or feedback with regards to my UI design/articles, or would just like to talk, please feel free to reply to this article below! I value each and every comment.

Thank you for helping me to become a better designer. 😊

Twitter / Other Medium articles

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Learning from Paypal: Checkout Page was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Learning from Paypal: Checkout Page

Cool stuff, every week

More Articles