Cart Redesign
Cart restructure and styling.
Project
Problem
Goal
I was responsible for redesigning the cart page—a critical touchpoint in the customer journey. The cart page serves as the final step before users proceed to checkout, making it essential for providing clarity, simplicity, and trust.
Platform
Year & Timeline
Role
Desktop & Mobile Web
2023 / 2 weeks
UI Design
The existing cart page was cluttered, lacked clear grouping, and created friction for users trying to review and modify their selected items.
Improve the overall user experience through thoughtful visual design and the implementation of UX best practices, ensuring a smoother path to checkout and higher conversion rates.
Analysis of Current Cart
Cart anatomy
Inconsistent styling for similar elements
Grouping & spacing inconsistencies
8 CTA styles
6 header styles
5 font sizes
Focus areas
Improve Visual Hierarchy
Refine typography, increase white space, and consistent spacing, creating a visual hierarchy that guides users' attention to important elements like buttons, while also making product images and details easier to review.
Simplify Information Architecture
Organize product details, and make important elements—like delivery methods and actionable buttons—more prominent.
Remove Unnecessary Elements and Styles
The original cart page included decorative elements and over-styled components that cluttered the design. I want to strip away these distractions, focusing on a clean and minimal interface that prioritized essential information and actions.
Increase spacing between elements
Adding more space between elements allows information to become more digestible.
Hierarchy
Create Clear Sections
Add section headers and divider lines to aid with hierarchy.
Hierarchy
Font Weight and Color
Larger, darker headers and lighter supporting copy guide users through visual hierarchy.
Hierarchy
Remove Unnecessary Styles
Remove nested grey and red background colors from section content and alert messaging.
Clarity
Messaging Treatment
Allows users to distinguish actionable messaging from other in-cart messages.
Consistency
CTA treatment
Reduce CTA styles from six to three.
CONSISTENCY
