
Checkout Page for E-Commerce Platform
Checkout Page for E-Commerce Platform
PRODUCT DESIGN
PRODUCT DESIGN
PRODUCT DESIGN
UI DESIGN
UI DESIGN
UI DESIGN
UX DESIGN
UX DESIGN
UX DESIGN
WEB DESIGN
WEB DESIGN
WEB DESIGN
CHECKOUT
CHECKOUT
CHECKOUT
USER FLOW
USER FLOW
USER FLOW
DESKTOP
DESKTOP
DESKTOP
FIGMA
FIGMA
FIGMA
FRAMER
FRAMER
FRAMER
FLOWMAPP
FLOWMAPP
FLOWMAPP

Introduction
Introduction
In this project, I reimagined the desktop checkout flow for Desi Threads, a fictional Indian fashion e-commerce website. The goal was to design an intuitive and friction-free desktop experience that instills trust and guides users smoothly from cart to order confirmation and prevent cart abandonment.
In this project, I reimagined the desktop checkout flow for Desi Threads, a fictional Indian fashion e-commerce website. The goal was to design an intuitive and friction-free desktop experience that instills trust and guides users smoothly from cart to order confirmation and prevent cart abandonment.
User Flow Diagram
User Flow Diagram



Rationale
Rationale
In redesigning the desktop checkout flow, several guiding principles were used to reduce friction and build user trust:
Progressive Disclosure: Each checkout step displays only the information needed at that moment. By segmenting the process into clear stages (Shipping Address, Payment Method, Review Order), users can focus on one task at a time, lowering cognitive load and preventing confusion.
Strong Visual Hierarchy: Bold section titles, clearly labeled “Continue” buttons, and consistent styling help users easily identify their current step. This consistency reduces guesswork and keeps the experience straightforward.
Simplicity & Microcopy: Form fields are kept to a minimum, ensuring only essential data is requested. Short, helpful microcopy clarifies what is required in each field, easing anxiety and reducing errors.
Help & Assistance: A persistent “Need help?” Floating Action Button is placed in the bottom-right corner, making support easily accessible should users encounter any issues.
Localized Trust Cues: Utilizing familiar Indian payment options (such as UPI and Netbanking) alongside a visible security badge, reassures users during sensitive stages.
In redesigning the desktop checkout flow, several guiding principles were used to reduce friction and build user trust:
Progressive Disclosure: Each checkout step displays only the information needed at that moment. By segmenting the process into clear stages (Shipping Address, Payment Method, Review Order), users can focus on one task at a time, lowering cognitive load and preventing confusion.
Strong Visual Hierarchy: Bold section titles, clearly labeled “Continue” buttons, and consistent styling help users easily identify their current step. This consistency reduces guesswork and keeps the experience straightforward.
Simplicity & Microcopy: Form fields are kept to a minimum, ensuring only essential data is requested. Short, helpful microcopy clarifies what is required in each field, easing anxiety and reducing errors.
Help & Assistance: A persistent “Need help?” Floating Action Button is placed in the bottom-right corner, making support easily accessible should users encounter any issues.
Localized Trust Cues: Utilizing familiar Indian payment options (such as UPI and Netbanking) alongside a visible security badge, reassures users during sensitive stages.
Prototype
Prototype
A high-fidelity interactive prototype was created on the no-code platform Framer, to simulate the entire desktop checkout experience.
A high-fidelity interactive prototype was created on the no-code platform Framer, to simulate the entire desktop checkout experience.