Redefining the final steps of the shopping experience
The existing cart and checkout pages didn’t reflect Cocobella’s refined brand tone. It felt as if the 'Cart' page was not part of the website. The goal was to bring this essential page up to the same level with the brand’s elegant aesthetic while improving usability and maintaining a seamless connection to the main site.
A structured approach to refinement
My process started by analyzing the existing product, cart and checkout pages to understand layout inconsistencies and usability gaps. After identifying redundant elements and areas of confusion, I redesigned the structure to match with the existing product page. I also introduced minor QOL updates to the 'Mini cart' lightbox to improve user experience.
Introducing a refined mini-cart experience
I focused on re-imagining the cart as a slide-out panel instead of a standalone page when adding an item. This allowed users to review their selections without disrupting the browsing flow. I also featured a 'More You’ll Love' product suggestions, helping users discover related items without feeling overwhelmed. The first iteration involved a slight modification where the 'Subtotal' and 'Gift message' plus 'View bag' sections were interchanged. This was done to reduce eye movement, so users will always have the total amount right next to 'Checkout'.
Integrating dynamic free shipping updates
One key improvement was making free shipping eligibility visible earlier in the journey. Previously, users only discovered they qualified for free shipping during checkout, which often came too late to influence purchase decisions. I introduced a dynamic progress indicator within the mini-cart that updated in real time as users added or removed items. This encouraged higher cart values by turning a functional detail into a subtle design-driven incentive.
Reducing scroll fatigue with a split layout
The previous cart design used a single-column layout, which made navigation tedious when multiple products were added. To improve usability and visibility, I restructured it into a two-column layout, with products displayed on the left and the order summary fixed on the right. This allowed users to review totals and proceed to checkout without excessive scrolling. The result was a cleaner, more efficient layout that improved accessibility.
Refinements and results
The redesign introduced a clearer structure and improved hierarchy, reducing user friction during checkout. With the new two-column layout, users could review their order and proceed to payment faster, cutting down scroll time and improving accessibility across devices.
Earlier visibility of free shipping eligibility and a more cohesive visual language led to a smoother shopping flow. The cart and payment experience now feel consistent with Cocobella’s refined aesthetic, enhancing both usability and brand perception.