Mobile first iteration leads to massive boost in conversion rate

Shortly after the successful release of our new product filtering system and amidst a wave of positive feedback from repeat customers, Google Analytics (GA) reported a 41% reduction in navigational complexity across all platforms.

I did notice that many large improvements in desktop performance did not scale to mobile users. This prompted me to enhance our Google Tag Manager (GTM) implementation with more precise event tracking, especially those related to product display pages (PDPs) and conversions.

Funnel report comparisons after implementing the filtering system highlighted significant mobile usability challenges: an 8% decrease in product display page (PDP) views and an 8% increase in abandonment rates on PDPs.

These insights uncovered a clear challenge: mobile users are having difficulty using the filtering system, and if they do reach a product display page, it is usually not what they are looking for.

Despite these insights, I faced challenges from stakeholders pushing for design changes aimed solely at internal sales use. Although the sales team appreciated the tool, they paradoxically requested even more complex systems, heavily laden with internal jargon.

Another challenge involved transitioning from Google Analytics and extensive surveys, which lacked specificity and were time-consuming. It was immediately clear I needed to observe the real world use of the filtering system.

To uncover usability issues, I implemented Microsoft Clarity on our main site, enabling detailed live session analysis and insights into user behaviors like common, dead, and rage clicks via heatmaps.

Within only a few observed mobile sessions, frustrations, excessive scrolling, and common rage clicks repeatedly surfaced.

This tool's AI capabilities helped swiftly transform hours of session recordings into actionable behavioral insights. A subsequent manual review of session recordings along with additional heatmap and scroll map analyses, revealed critical issues:

1. Excessive scrolling and pagination, linked to the underuse of the mobile filtering system

2. Frustrating interactions with the mobile filters leading to rage clicks and excessive scrolling

‍

In addition to primary research, I conducted thorough competitive audits and extensive reviews of best UX practices for filtering systems to inform my solutions.

Filters never exist on their own; in one way or another, they are always connected to the results that they are acting upon.

‍

In response to the primary research, secondary research, competitive audits and internal feedback / testing, I focused on two crucial refinements:

Refinement 1: Seamlessly connect filter selections with their results, ensuring users can visually correlate their choices with changes on the screen.

1. Before: The filtering menu was static and separated from their results
   ‍After: The filtering menu now remains at the top of the screen as users scroll, adding context to the results.
2. Before: "Total results" and active filter tags were stationary, causing users to lose track while navigating and attemting to remove fitlers
   ‍After: "Total results" information and active filter tags now follow the user within the product results grid, maintaining visibility and context.
3. Before: The product grid included internal jargon that cluttered the display.
   ‍After: Internal jargon has been removed to emphasize the product image and name, simplifying the presentation.
4. Before: The pagination menu was static at the bottom of the page, necessitating excessive scrolling.
   ‍After: The pagination menu now follows the user at the bottom of the screen, significantly reducing the need for scrolling.

Refinement 2: Simplify the filter interface and provide users with instant, contextual feedback as they apply different filters, enhancing the usability and efficiency of the search process.

1. Before: The filter options menu was large and static, obstructing view of the product grid during selection.
   ‍After: The filter menu is now significantly reduced in size, follows the user as they scroll, and features a transparent, blurred background that allows users to see real-time results changes.
2. Before: A separate team associations dropdown and search bar complicated the search process, when they were commonly used interchangeably.
   ‍After: Replaced by a combo search box that aligns with user behavior, allowing free text searches with automatic suggestions for team associations as users type.
3. Before: The interface lacked intuitive informational prompts and flexible navigation options.
   ‍After: Introduced an informational modal that appears when tapping "i", enhancing predictability. Also added an "all jerseys" option to increase navigation flexibility.
4. Before: Colour filter buttons were small and hidden behind an additional dropdown, making them hard to access.
   ‍After: Colour filter buttons are now three times larger and directly accessible, improving usability and visibility.

Leveraging a comprehensive library of components in Figma, I quickly developed and presented detailed mockups and prototypes. Along with both my primary research and secondary research clearly organized in a Notion document, I was able to present the design to my stakeholders.

I implemented the redesign on our main Webflow site, incorporating JavaScript functionalities from FinSweet to enhance existing code libraries with a new combination dropdown and search box.

Two weeks post-implementation, we observed a 5.28% increase in product display page (PDP) view rates and a significant 3.53% rise in conversion rates. This increase in conversions indicates that customers are now being more effectively guided to products they truly want.

‍

‍

‍