Checkout Page for an E-commerce platform

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.

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

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):

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

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 :

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).