Cart and Checkout
How might we make critical checkout information more visible and intuitive, helping customers make confident decisions and complete their purchases smoothly?
The Problem
The checkout flow was not designed around customer decision-making, but rather assembled incrementally based on layout constraints. This misalignment caused important options, such as special delivery, to go unnoticed, creating uncertainty at the point of purchase and increasing reliance on customer support.
The Strategy
I redesigned the entire checkout journey by introducing consistent page layouts, clarifying content, and reducing cognitive load through progressive disclosure to minimize decision fatigue.
The Results
Within the first three months, I was able to help Staples professional increase revenue over $400,000 year over year.
Discovery Audit
The good, the bad the ugly
For this initiative, I conducted a comprehensive experience audit leveraging Baymard Institute, a platform backed by over 10,000 hours of eCommerce research, while cross-referencing behavioural design principles and applying Nielsen Norman Group’s heuristic evaluation framework to ensure a rigorous, insight-driven assessment.
I identified over 50 areas of opportunity across key usability dimensions, including form design, page consistency, information hierarchy, progressive disclosure, and interaction feedback.
Competitive Analysis
Applying Jakobs law
Across the e-commerce landscape, clear patterns emerged within checkout experiences. In line with Jakob’s Law, users spend most of their time on other sites, making it essential to align with familiar conventions while improving on them.
I analyzed over 30 eCommerce sites, including Best Buy, Amazon, and several Shopify-enabled platforms, conducting hands-on evaluations of their checkout flows to assess form usability, layout, interaction patterns, and content hierarchy.
Flow analysis
The expanding multiverse
As I explored checkout flows, it became clear that every step offered some form of customization. Understanding the overall process allowed me to approach the initiative holistically, then focus on specific areas to identify variables and ensure each customer received the experience promised to them.
The existing flow was built in chronological order. As new customizations or requirements arose, they were added wherever convenient, usually at the bottom of the page.
The Solution
From general to specific
After identifying pain points and understanding the checkout variables, I translated these findings into actionable solutions. I proposed a flow that divided checkout into multiple steps. While it required customers to move through several pages, the goal was to group information, reduce confusion, and create a cleaner navigation experience.
Adding items to your cart
Adding items seems simple, right? Generally, it is, but customers also need clear feedback, and that’s something we hadn’t been doing well in the past. With this redesign, I introduced visual cues that give customers key information, making it easier to understand what’s happening and clearly showing their next available actions.
Shipping your items
Shipping turned out to be one of the biggest pain points in the customer journey. Many customers reached out to our sales team, frustrated by the lack of clarity around available options. To address this, I designed a new component for our design system that increased the visibility of shipping choices and introduced progressive disclosure when an option was selected. This approach helped customers understand each choice more easily and clarified the relationship between parent and child content. I also moved the main progression CTA below the options to encourage customers to review their choices rather than skipping them due to default selections.
Methods of Payment
Previously, our payment methods were placed on the review page, mainly because there simply wasn’t a better location for them. I designed a dedicated payment page to organize content more effectively, linking purchase approval routing directly to payment details and ensuring consistency across pages with the selector component introduced in this initiative. I also added visual cues, such as credit card logos, to help customers identify options quickly and included simple explanations of each available payment method.
Reviewing and confirming your order
The original checkout experience overwhelmed users with excessive fields, notes, approvals, and prompts, which made it difficult to properly review their orders. By breaking the process into manageable steps, we strengthened the review page and improved the overall user experience. I refined the review page with clear labels and well-structured sections, enabling customers to scan details more efficiently. Items were grouped by delivery date to support planning, and I added the ability to edit orders by navigating back to the relevant page. Finally, I repositioned the “Submit Order” button to the right, aligning with user flow and supporting faster decision-making.
Learnings
What Went Wrong?
Staples operates in an agency-style workflow, moving rapidly from one project to the next. As a result, teams often become segmented from projects soon after handoff. In B2B eCommerce, where customizability is high, it’s nearly impossible to anticipate every use case. As refinements continued, we discovered unique scenarios that demanded ongoing attention, such as displaying market prices, managing eco fees differently between Ontario and Quebec, accommodating customer-defined inputs, and supporting rare or targeted promotions like gifts with purchase.
