2

We are working on an effortless single page checkout for returning customers, for expert user cohort.

The flow is triggered from "Buy Now" button and all important and needed information has been manifested in a single page that is starting from the top, platform currency application, product summary, preferred saved address and preferred save payment method.

I'm facing a challenge in the payment method, I want to form a connection between the cvv field, the total amount and the "Pay Now" button. I tried a design previously but I got a feedback that user might not understand that he has to enter something here hence I made a new design but I wasn't much convinced with the new design.

Also in order to place an order via Cash On Delivery, user has to enter the characters shown in the captcha, tried few variations but wasn't convinced with the final design.

Can someone please suggest a better way to present the total amount, cvv text field and "pay now" button, same for the cash on delivery variation.[![enter image description here][1]][1]

2

If someone would have presented me the designs above I would have guessed that the previous design was the new one.

Here is why: On payment method screen, the cvv input has a clear connection to the payment method 'credit card'. This is crucial since not everybody might understand what the cvv is if it is not somehow in connection with the credit card.

Same goes for the 'cash on delivery'. Visually there is a stronger connection between the pay now button (which by the way is a weird label if used with payment method cash on delivery) and the input of the captcha then there is between the captcha code and the input field. Therefor it might not be clear to users what to put into that field.

The total price together with the pay now in the old design is much more clear since there is a clear visual connection. If the user clicks the pay now it is absolutly clear which amount has to be payed. (This in contrast to the new design).

So what I would ask myself if I had to redesign this:

What is to be achieved by the new design? What was the problem with the old design? E.g. do users have problems understanding, that the cvv or captcha has to be entered before they can proceed with the order?

1
  • The only problem that was there with the previous design was, 1. the moment user was landing on this page, the realisation that user has to input something in order to proceed was not strong. 2. We wanted to make it feel like an express and fast process hence was trying to place "pay now" button somehow next to the CVV text field at the same time making sure that the total price is in the proximity of the button. 3. The page was looking a bit monotonous as there was no delight element on the screen. Jun 10 at 5:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.