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