top of page


Checkout  Experience

Many beautiful and unique shops are offering their costumers the option of buying their products online, but not all are making the experience easy enough. 

There are a lot of reasons for a client to abandon his shopping cart without purchasing anything. It could be a complicated registration process, a risky or unreliable feeling, a long and confusing buying process. Ciudadano Grant is a beautiful book store in Madrid in which I had a long and confusing online shopping experience. Here are some suggestions on how to improve it.

I was looking to buy these beautiful children's book Monstrou Rosa.


After adding it to my shopping cart, I got a subtle confirmation.

It was successfully added to my cart.

Adding verification.png

When hovering the cart symbol on the top of the page I could get a quick look at my items, including some important information such as title, image, quantity, and price.

I could also delete it directly from it, without entering the cart page.

Cart hover.png

When entering the shopping cart, the client's first decisions are the payment method and the shipping destination

The overview is important, so the client can see his order details.

Over view.png

The choice of isolating the shipping costs from the rest of the order suppose to help clients decide if they want to continue shopping despite the extra costs. But it's also a bit confusing and misplaced.

Some of the options are clear, but for the ones that are not, like International G1-4, there's no explanation added.

Shipping costs.png
Shipping costs dropdown.png

The next step, after reviewing the cart content, is shipping and payment details. If the user has already registered once, he can use his email and password to continue.

But if it’s the user’s first time buying on this page, he’ll have to fill in a form, and create a user account.

Client details.png

I've also noticed that when the user makes mistakes while filling the form, pop-ups are showing up on the screen to inform him where the mistake was made.

After the user closes the pop-up, there’s no visual indication to which input field needs to be corrected.

Error 1.png

If there's more then one field to correct, it will show up as another pop-up only after the first one has been corrected.

Error 4.png
Error 4.png
Error 4.png

Login and Registration Flow

The user path can be less time-consuming by allowing social media and/or guest registration, alongside sign in and creating a new account.

Log in page Grant.png

Client Address

The client address for shipping and billing can be added in the next step, along with the shipping extra costs and payment method.

Shipping and payment page.png

Pop-ups and Errors 

Emphasizing the input fields that need correction can free the user from remembering the pop-up content.

Seeing clearly the fields that need to be edited makes the process easier and quicker to understand.

Errors img.png

Thank you for reading :)

bottom of page