Case Study
FunnelKit Sliding Cart
Increasing average order value by 28% without touching checkout
| The challenge | 40% of customers who added products to their carts were abandoning before checkout, not because of price, but because the 'View Cart' redirect broke their shopping momentum entirely. |
| My role | Lead Product Designer, research strategy, interaction design, recommendation logic, usability testing |
| Team | 1 PM, 3 Engineers, 1 Marketing Lead |
| Timeline | 5 months, Sept 2024 - Jan 2025 |
| Tools | Figma, Hotjar, Amplitude, UserTesting |
My design philosophy: The gap between how users think and how systems are built is almost always the real problem. In e-commerce, the cart page was built for the system. Not for the shopper.
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
How I recruited participants: Abandonment is recent-memory behaviour. I needed to reach people shortly after it happened, not weeks later. I placed exit-intent surveys on the thank-you pages of FunnelKit merchant stores, triggering only after a confirmed purchase: "We noticed you didn't complete your previous cart, would you be willing to talk about what happened?" This gave me abandoners whose experience was recent and specific. 25 agreed to 15-minute phone calls within 48 hours of abandonment.
How I synthesised Hotjar data: I tagged 200 session recordings with four codes: page arrival, scroll depth, click targets, and exit behaviour. Two team members coded independently on a sample of 30. Agreement was 87%, high enough to trust the pattern. The 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."
Modals block the page. They demand resolution. Even with "Continue Shopping," the mental model is: resolve this interruption, then continue. Psychologically identical to the cart page problem, just smaller.
Keyboard navigation and focus trapping were also harder to implement correctly in a modal, a problem I'd flagged in the accessibility review before testing even 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.
I needed something that adapted to screen context rather than imposing one pattern everywhere.
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
The final design is a system of five components that reinforce each other. Each decision came from a specific research or testing finding.
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 button is in view and the purchase decision is already forming. Recommendations need to appear before that decision, not after.
Where the recommendation rules came from: I analysed 3 months of co-purchase data across FunnelKit merchant stores, then cross-referenced with a merchant survey asking "what do you manually recommend to customers?" Four rules emerged from both sources simultaneously: complementary products, bundle discounts, free shipping threshold, and scarcity signals. These were genuine merchant strategies already in use, not designer assumptions about what might work.
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. I'll add brand personality presets in V1.5.
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.
One Thing I'd Tell Another Designer
Question the assumption everyone is working within before trying to improve its execution.
Every cart plugin was trying to make the cart page better. The right question was whether a cart page was the right concept at all. The insight that unlocked this project wasn't research, it was noticing that an entire competitive landscape shared an unexamined premise.
Most design problems worth solving have one of those lurking somewhere.
What's Next
- AI-powered bundle suggestions (Q1 2025)
- Cart abandonment email/SMS on cart close
- Multi-currency support
- Built-in A/B testing for recommendation strategies
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
More Projects