Checkout page for meal delivery

Open full project

This checkout page is for an imaginary meal delivery service, CookFresh. The full project is provided as a clickable prototype.

Progress tracking:

The checkout process is broken down into 4 simple steps. Incomplete steps are shown below in grey and complete steps are clearly shown with the completed and validated information.

Minimal input:

The imaginary shop is from my home country where we have 1-line addresses and 3 digit postcodes. Input for contact and address is kept to the minimum needed there.

Login or checkout as guest:

The seller prefers customers with an account and there is a clear benefit in logging in and not having to input any data. Apple and Google login is provided. However, it's also possible to checkout as guest and create an account afterwards using that information.

Order summary:

Order is always summarized on the right and if anything changes the summary is updated.

Payment:

Different payment options are supported. Input masks are provided. Card type is indicated when the card number is successfully typed. Amount is displayed on the final Pay button for clarity. On the right in the top nav there is a lock icon indicating security.

No distractions:

The checkout is designed for no distractions - you can get back to the store via the basket, no other distracting links or content.

Reviews

Well done for making this a full featured prototype. I gave a copy of this a run through on AppVelocity.io and it encountered an error on the contact page because the button should be greyed out before the data has been entered and allowing the user to proceed with "Continue to delivery". Otherwise I thought this was a great interface, you could also add some icons to represent the different payment types like paypal.

4
Claps
Average 4.0 by 1 person
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Checkout Page for E-Commerce Platform project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>