Filtering by Fulfillment
Helping customers shop smarter by introducing intuitive fulfillment filters and reducing surprises at checkout—resulting in a clearer, faster, and more personalized product discovery experience.
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 is pre-launch, but early signs are promising:
- Fulfillment filters now stand out clearly in the interface
- Customers can personalize their experience upfront