Karen Millen Checkout Process
The Project
The goal of this project was to address a critical pain point in Karen Millen’s e-commerce experience: high user drop-off rates on the bag (cart) page and during the initial stages of the checkout process. By redesigning the cart page and optimising the checkout flow, the aim was to create a smoother, more intuitive user experience that would increase conversions and reduce abandonment.
Challenges Identified
Complex Bag Page Layout: Users found it difficult to review their selected items, leading to frustration and drop-offs.
Lack of Cost Transparency: The absence of a clear cost breakdown, including shipping and available promotional codes, left users uncertain about the total cost.
Cumbersome Checkout Process: A lengthy and disjointed checkout process with unnecessary fields caused friction, prompting users to abandon their purchases.
Approach
The redesign process was divided into two key areas: the bag page and the checkout flow.
1. Bag Page Redesign
To enhance the user experience on the bag page, the following changes were implemented:
Simplified Layout: The product list was made more visually digestible with clear item images, titles, sizes, and quantities. Each product entry included an easily accessible edit or remove button.
Cost Breakdown: A prominent section displaying the total cost was added. This included:
Subtotal
Shipping costs (with a note on thresholds for free shipping)
Any applicable discounts or promo codes
Final total
Promo Code Input Field: A dedicated, user-friendly input box for promo codes was added, with instant validation and feedback to inform users if the code was valid.
Call-to-Action (CTA) Enhancements: The “Proceed to Checkout” button was made more prominent, using bold colours and clear labelling to encourage users to continue.
2. Streamlined Checkout Process
The checkout process was simplified and reorganised to reduce friction and guide the user through a logical journey:
Progress Indicator: A step-by-step progress bar was introduced to visually guide users and provide an overview of the checkout stages.
Consolidated Forms: Unnecessary fields were removed, and remaining fields were grouped logically into sections such as delivery details, payment information, and order review.
Guest Checkout Option: To cater to users who preferred a faster process, a clear guest checkout option was provided, minimising the need for account creation.
Auto-Fill and Address Validation: Fields such as address and payment details utilised auto-fill and validation to speed up the process and reduce errors.
Mobile Optimisation: The entire checkout flow was designed with mobile users in mind, ensuring tap-friendly buttons and minimal scrolling.
Conclusion
The redesign of the Karen Millen cart page and checkout process successfully addressed the identified pain points, leading to a more intuitive and seamless user journey. By focusing on transparency, simplicity, and mobile responsiveness, the project achieved its goal of reducing drop-offs and enhancing the overall shopping experience.