Filtering Experience – Pair Eyewear

Pair Eyewear

Designing a Filter & Sort experience for users searching for over 500 top frames on Pair's product listing page

View Site

Design

Rais Ahmed

Product

Lilly Rada

Engineering

Ethan O'Neal

Research

Rais Ahmed

Overview

This initiative focuses on introducing a new feature for Pair's product listing page (PLP). Filtering/Sorting is a core feature across e-commerce sites for users to have the ability to easily browse products. At the time of this initiative, Pair's website had no way to refine a user's search. This proved to be an especially difficult experience, as Pair has over 500 different styles of "top frames", a cosmetic add-on to glasses using magnets.

Objectives

Pair’s lack of a sort + filtering experience created friction for users attempting to discover products that were the right choice for them. The goal was to provide users with an intuitive, efficient, and enjoyable way to navigate the extensive product range, ultimately improving the overall shopping experience. We looked at three key objectives:

Data-Driven Design Decisions

• Use analytics and user feedback to build and continuously improve the filtering and sorting system.

• Design the feature in a way that will encourage iterative enhancements based on data insights and user behavior analysis.

Increase Conversion + Repeat Purchases

• Minimize user frustration and reduce bounce rates.

• Optimize the path to purchase, encouraging users to complete their transactions and encourage repeat purchases.

Enhance Product Discoverability

• Reduce the time and effort required for users to find desired products.

• Facilitate easier product discovery to boost product selection and purchases.

Process + Responsibilities

Discovery Phase

We began by conducting extensive user research to understand the target audience's needs, preferences, and pain points. This involved:

Understanding User Needs

Our previous image carousel was clunky, took up too much vertical screen real estate for mobile screens, and performed poorly. Our information hierarchy was not serving our users in the way that they wanted nor needed.

User Surveys and Interviews:

Engaging with current and potential customers to gather insights on their shopping habits and preferences.

Existing Site Experience

Observing users interacting with the existing website to identify common frustrations and areas for improvement.

Ideation + Design Phase

Based on the insights gathered from the discovery phase, we defined the core requirements for the new filtering and sorting system. Key requirements included:

Filtering Sidebar Experience

A comprehensive and collapsible filter sidebar allowing users to easily select and deselect options, fully responsive experience on desktop + mobile.

Dropdowns to Contain Filtering Types

A dynamic dropdown menu enabling users to rearrange products based on their preferences. This way, the user can focus on the categories of filters they want to set, rather than parsing through dozens of granular options.

Interactive Elements

Making sure each action is represented by a confirmation to ensure and enhance usability + engagement.

Outcome + Learnings

The redesigned filtering and sorting experience significantly enhanced the usability of Pair Eyewear’s e-commerce website. Users could now easily navigate the extensive product range, find their preferred top frames, and enjoy a seamless shopping experience. This project not only improved user satisfaction but also contributed to increased sales and customer loyalty.

Future Iterations

Because of the success of filtering + sorting, we further looked into implementing this feature across different pages on the web experience. One feature that especially stood out that the team wanted to implement was dynamic filters on our PLPs shown below:

Research

For this initiative, we conducted two separate rounds of research:

Preliminary Research

Before we defined scope and design requirements, we did a round of preliminary research including a round of comp analysis against competitors in the space, as well as leading e-commerce brands to identify common patterns and best practices.

We also conducted a survey asking our existing users to identify existing pain points they experienced while browsing on Pair's product page. We tested among two separate cohorts: the loyal user that has been with Pair for 2+ years, and newly adopted customers who recently had made a purchase.

Usability Testing

Since this page refresh was introducing multiple net-new components for our users, we wanted to conduct a round of usability tests to validate the designs we put together. We ran 2 separate unmoderated tests via UserTesting. Each test included 5 participants, with one group being existing Pair users, and the other group being users who have never interacted with Pair's website.

A/B Test

Once the designs were ready and built by engineering, we launched an A/B test to 50% of traffic on site. Because this was a page that experienced high traffic, this acted as a final round to validate the updated designs. (spoiler: the variant vastly outperformed the control)