To bridge a critical conversion gap between desktop and mobile devices, this checkout optimization targeted user behavior bottlenecks where customers used the cart as a temporary wishlist. The legacy interface caused high cognitive load due to visual noise, premature shipping calculations, and non-standard payment fields. By leveraging the brand’s existing Figma design system, the solution transitioned the layout into a modular, card-based architecture that introduces a selective checkbox checkout system, allowing users to easily purchase a subset of items while saving the rest for later without discarding them.

The redesign streamlined the information density by introducing item-level control modules, isolating separate shipping packages for clear fulfillment visibility, and implementing familiar input affordances for high-stakes payment forms. This strategic layout reconfiguration, managed through a direct design-to-code documentation process with the engineering team, avoided any systemic debt or alterations to core business logic.

Website: www.mmzdesign.framer.website

Email: mmz.xdesign@gmail.com