Overview
40% of customers abandoned before checkout — not over price, but because the cart page redirect broke shopping momentum. Every existing plugin tried to build a better cart page. None questioned whether one should exist.
Role
Lead Product Designer — research, interaction design, recommendation logic
Team
1 PM, 3 Engineers, 1 Marketing Lead
Timeline
5 months, Sept 2024 - Jan 2025
Tools
Figma, Hotjar, Amplitude, UserTesting
“I tested 15 WooCommerce cart plugins. Every single one tried to build a better cart page. None questioned whether the cart page should exist at all.
The problem: 40% of customers abandoned carts before checkout - not over price, but because the cart page redirect broke shopping momentum. The insight: The cart page itself was the problem. A slide-out drawer lets customers browse and manage their cart simultaneously. The result: +28% average order value, -17 points cart abandonment, 12,347 installs in 90 days.
The Insight That Started Everything
FunnelKit had redesigned WooCommerce checkout for 39,000+ merchants. Conversions were up. I looked at what happened upstream, and 40% of customers were disappearing before they ever reached that optimised checkout. At the cart page. A page we'd never touched.
I looked at every WooCommerce cart plugin. All of them had the same fundamental approach: replace the cart page with a better cart page.
The page remained. The redirect remained. The momentum break remained.
No plugin had questioned whether the cart page should exist at all.
That was the insight that changed the direction of the project before a single user interview had happened.
Understanding Why People Leave
I placed exit-intent surveys on FunnelKit merchant thank-you pages, triggering only after a confirmed purchase. 25 abandoners agreed to calls within 48 hours — recent memory, specific experience. Paired with 200 tagged Hotjar session recordings (87% inter-rater agreement). Dominant sequence: arrive, scroll to total, pause, exit without clicking anything.
The three themes that emerged:
The redirect felt like a commitment
"I clicked 'view cart' and suddenly I was on a new page. It felt like I was committing to something. I wanted to keep looking."
The page transition shifted customers from browsing mode (exploratory, low stakes) to evaluation mode (deliberate, high commitment). That shift caused 40% to decide they weren't ready.
The cart stripped product context
"I saw the total was $127 and couldn't remember what I'd added. Clicked back to the product page, got distracted, never came back."
There was no middle ground
"The cart felt like the end. I still wanted to look around but didn't want to lose what I had. I felt stuck."
Traditional carts forced a binary: keep shopping (leave cart) or checkout (commit now). No simultaneous option.
The Market's Shared Blind Spot
I installed and tested 15 WooCommerce cart alternatives with identical tasks. All 15 shared four failure patterns, and they all stemmed from the same unquestioned assumption.
The assumption: the cart page is the right place to show cart contents.
The four symptoms:
Better cart page, same broken redirect. Every solution improved the destination, none removed the trip.
Generic recommendations. "Bestsellers" shown to a coffee buyer. Not a recommendation. Noise.
Mobile as afterthought. 62% of WooCommerce traffic is mobile. Most plugins were designed on desktop and scaled down: tiny targets, buried recommendations, excessive scrolling.
No urgency mechanics. Static displays with no milestones, no progress, nothing encouraging customers to add more.
Amazon and ASOS told a different story. Amazon's persistent cart icon means you're never more than one click away, no redirect. ASOS's slide-out cart keeps the product page visible behind it. You browse and track your cart simultaneously. Both give customers a middle option between "still looking" and "ready to buy."
Three Approaches
Approach 1: Modal overlay
Add to cart, modal appears with cart contents.
8 users. Universal reaction: "This feels like an interruption."
Psychologically identical to the cart page problem — just smaller. Even with "Continue Shopping," the mental model is resolve this, then continue. Keyboard focus trapping was also harder to implement correctly, flagged in the accessibility review before testing started.
Approach 2: Header dropdown
Desktop users liked it. Mobile users: "It covers too much. I can't see what I was looking at."
On small screens, the dropdown consumed the entire viewport. Same problem, different container.
Approach 3: Slide-out drawer
The answer came from studying native mobile OS behaviour: notifications, Control Centre, share sheets. Content slides in from the edge. The app behind it remains visible. You never lose your place.
On desktop: Cart slides in from the right, 400px wide. Product page remains visible and scrollable.
On mobile: Cart takes 85% of screen width. A sliver of the page shows on the left. Customers stay spatially oriented.
12 users, desktop, tablet, mobile. 11 of 12: "smooth" or "natural." The 12th: "I didn't even notice it, it just worked."
Post-launch data supported it: 91% task success rate across all cart interactions, median 4 seconds from cart open to first interaction.
How It Works
Accessibility foundation: Full keyboard interaction model mapped before wireframing. Tab to open, Escape to close, focus trapped inside, returned to trigger on close. All interactive elements meet 44x44px touch targets. Tested with keyboard-only navigation and VoiceOver in the prototype phase, two bugs caught before engineering picked up the work.
Recommendations above items, not below (3.2x higher click rate): By the time customers scroll past their items, the checkout decision is already forming. Rules came from 3 months of co-purchase data cross-referenced with a merchant survey — genuine strategies already in use, not designer assumptions.
Progress bar placement and labelling ("Free shipping at $50" missed by 0 users vs. "missed by most" when unlabelled): One label change, the difference between a feature that gets ignored and one that changes purchase decisions.
Why exactly 3 special add-ons: Tested 1, 3, and 5. One: too little choice. Five: visible decision paralysis. Three: 23% of carts added at least one item. Enough options to feel curated, few enough to avoid overwhelm.
Remove with undo: A 5-second undo toast eliminated an entire category of support tickets, "I accidentally removed an item and couldn't get it back."
The engineering decision: When our lead engineer flagged that dynamic cart updates were causing full page reloads on certain themes, the PM wanted to ship and patch later. I pushed back: "A smooth experience on 80% of themes is a broken experience on 20%." We built a custom rendering engine with optimistic UI. Two extra weeks. Zero post-launch complaints about cart jankiness.
Results
FunnelKit's fastest adoption to date, 12,000 installs in 3 months vs. 5 months for the previous product.
For a store doing 1,000 orders per month: +$19,000/month. +$228,000/year.
What Didn't Work
Smart defaults that averaged two different brand voices. 45% of merchants post-launch wanted to customise copy, colour, or positioning. A fitness brand needs urgency signals. A luxury brand needs restraint. Brand personality presets were the clear next step.
I killed a button that 28% of mobile users needed. The PM wanted a fixed sticky cart button for mobile. I argued visual clutter. Post-launch: 28% of users scrolled past the header and had to scroll all the way back up to access their cart. (Fixed in V1.2 with a scroll-aware button.)
We tested 8 themes. Merchants ran 200+. 17% of initial installs had styling conflicts. Three weeks of post-launch engineering fixes that wider testing would have caught. Next time: 30+ themes minimum.
I tracked the wrong abandonment metric. Overall abandonment improved. I thought I'd measured success. Post-launch: carts under $30 abandoned at 62%, carts over $100 at 34%. Completely different problems, completely different solutions. I'd been optimising for the average of two distinct user states.
12,347
Active installations (90 days)
+28%
Avg order value ($67 to $86)
-17pts
Cart abandonment (70% to 53%)
23%
Recommendation add rate
4.7 / 5
Rating, 243 reviews



