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).
Reviews
It's very helpful
You might also like
Ridesharing App Revamp & New Feature Addition
Nikita Chaudhary
SandConsole: A Modern Website Redesign for a Digital Solutions Company
Nikita Chaudhary
ؤژٰشیسز
Ali Reza
New Year LMS
Le Khoa
Mitratech Login Revamp
Leonardo Monsalve
E-learning Design system for Children learning
Doha Khaled Arafat