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.