Checkout Page for an E-commerce platform

Open full project

Hi everyone 👋

For this brief, I've tried to bring a new look to the checkout page of the Moft.us website.

Moft.us is an e-commerce platform that create origami-inspired, lightweight carry accessories that empower people to work and create on the go.

Checkout Page for an E-commerce platform 1

This plateforme is created with Shopify. I know that because here is the look of the checkout page :

Checkout Page for an E-commerce platform 2

After analyzing the checkout page, here are the few points I found relevant :

  • The entire form is visible at once, which could quickly become an obstacle for the user (I'm going to fix that with a multiple step form)
  • If I want to log in, I have to leave the checkout page
  • The style of the form is not linked to the design system of the rest of the website
  • The cart can't be modified
  • So first, I created a user flow that transcribes the user's path through the page. Here it is (all the documents I present are available in the project I provide in this post):

Checkout Page for an E-commerce platform 3

It helped me a lot to create the wireframe that I present here :

Checkout Page for an E-commerce platform 4

Before creating the final layout and its prototyping, I thought of making a few components to respect the graphic line of the rest of the site as much as possible :

Checkout Page for an E-commerce platform 5

And finally, I can present you what I've done. There are many page, so I thought an interactive prototype is better :

Click here to test the checkout page.

Thank you everyone, hope the community will appreciate it.

And thank you to my wife, that helped me with some feedbacks (she's a senior UX/UI designer lol).

Reviews

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

It's very helpful

11
Claps
Average 3.7 by 3 people
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"?>