Filtering by Fulfillment
A redesign that nearly doubled add-to-cart rates and lifted conversion by 2%, helping customers shop smarter with intuitive fulfillment filters and fewer surprises at checkout.
My role
Lead UX/UI Designer
Company
C Spire
Team
Business Owner Data Analyst Usability Tester Developer QA Tester
The Challenge
Adding filters for fulfillment might seem simple — but the complexity kicked in when we factored in inventory that could change after customization. Our challenge was to surface store availability and delivery options before customers got too invested in a product, avoiding late-stage frustration.
Key Goals:
- Let customers filter by Same Day / Next Day Delivery and Store Pickup
- Make fulfillment options feel seamless and familiar
- Eliminate the “surprise out-of-stock” moment after customization
- Improve the visual clarity and hierarchy of the filter panel
Research
We dug into customer behavior and competitor experiences to guide our approach:
- Analyzed competitors, noting fulfillment filters were often buried or nonexistent
- Applied Baymard principles on progressive disclosure, filter UX, and availability communication
- Ran usability tests on our current experience
What we found:
- No obvious friction in the old flow — but it lacked proactive guidance
- 30% of online orders were for store pickup
- A common pain point: learning a device wasn’t available after configuring it

Design
Phase 1: Matching the System
We began by adding Pickup & Delivery as a standard filter — styled like the rest. On the product page, we moved fulfillment choices near the Add to Cart button, grouped under “Check Store Availability” and “Fulfillment Speed.”
Phase 2: Differentiating for Clarity
Testing revealed that users were overlooking the new filter. So, we made a key change: pill-style selectors for fulfillment — distinct from other filters, visually prominent, and easy to scan.
We also moved fulfillment selection to the top of the product page, allowing users to toggle between options and see tailored device availability instantly. That choice now sticks with them across the site, reducing repeat prompts and confusion.


Testing
We ran mobile usability tests on the updated design. Here's what we learned:
- The original filter styling blended in — and got missed
- Once noticed, the filtering flow was clear and intuitive
- Most testers didn’t mind learning about availability later — but the business needed in-store options front and center
These insights led to our visual redesign — and a stronger connection to store-level inventory.
Results
This project has been greatly successful since launch:
- Add-to-cart rates have nearly doubled
- Conversion rates have increased by 2%
- Customers are engaging more confidently with the shopping flow
We’ll continue monitoring performance and exploring ways to build on this momentum.
