Overview

The Order History page allows users to filter orders by timeframe, keywords, shipping addresses, product categories, and more via the “Filter By” modal.

Data indicated low usage of the filter function, users who view Order History are utilizing the “Filter By” button at just under 2% on Desktop and less than 0.1% on Mobile.

• Desktop: <2% usage of the Filter By button

• Mobile: <0.1% usage

• Users preferred “My Orders” (92%) over “Company Orders” (8%)

This raised concerns among stakeholders and the VP of eCommerce about user experience and efficiency.

Problem

Currently, filter selections are not retained when a user navigates away and returns to the Order History page. For example, a user clicks an item to view its details and returns, only to find all filter selections reset.

This adds friction, prolongs task completion, and can frustrate users.

Project Goal

Redesign the “Filter By” modal to reflect the backend enhancement: filter selections are retained when users navigate away and return, with clear visual indicators of applied filters.

Process

Competitive Analysis:

• Conducted research on Grainger, Global Industrial, Webstaurant, Zoro, and Amazon to identify industry patterns.

• Found that most competitors do not retain filters; those that show selections vary in clarity (e.g., Grainger shows applied categories in a bubble, others display numbers without context).

Pain Points Identified:

• Users must reselect filters after returning to the page.

• “Filter By” link does not indicate when filters are applied.

UX Requirements:

• Must Have: Visual indicator of number of filters applied; blue font for clarity.

• Should Have: Clear wording so users can easily navigate back to filter options.

• Nice to Have: Alternative wording after filters are applied to confirm success.

Design & Testing

Ideation:

• Led sketching session to explore different verbiage: “Filters (#)”, “Filtered (#)”, “Filters Applied (#)”, “Filter Results (#)”.

• Selected “Filtered Results” in blue to maintain website consistency and clarity.

User Testing:

• Conducted testing with 6 target users (buyers, purchasing managers, procurement specialists who purchased in the last 6 months).

• Findings:

  • Users understood that “Filtered Results (#)” showed applied filters.

  • Some users needed to click around to realize the link updated filters.

Recommendation:

• Refined copy to “Edit Filters (# Applied)” to reduce confusion while keeping functionality clear.

Stakeholder Feedback

• Before confirming which final design changes to move forward with, I presented our designs to the VP of the eCommerce department asked for feedback.

• The VP approved the design and the design has now gone live.

Key Outcomes

• Filters now persist after navigation, reducing repetitive actions.

• Users can clearly see how many filters are applied.

• Positive feedback from VP and end users.

• Improves efficiency and reduces frustration in key workflows.

Full Details

For a more detailed look at this project, including additional design iterations and insights, click the button below. This page is password-protected.