Context

The Challenge of Above-the-Fold Distractions

At Fanatics, where customers come to find and purchase their favorite team’s gear, the mobile shopping experience plays a critical role in conversions. However, our data showed that customers were struggling to engage with products on the grid page.

A quick audit of the mobile grid for a product category (e.g., Arizona Cardinals jerseys) revealed a significant issue: no products were visible above the fold. Instead, the screen was cluttered with elements like breadcrumbs, H1 titles, FanCash messages, and exposed filters—many of which were globally available across the site and didn’t necessarily aid product discovery.

From a UX perspective, this meant that customers had to scroll before even seeing a product, introducing friction at a crucial moment in their shopping journey.

Hypothesis

Our hypothesis was clear: reducing above-the-fold distractions would help customers find and engage with products faster, ultimately improving conversions.

Actions

Competitive Analysis & Benchmarking

To understand industry standards and identify optimization opportunities, we conducted a competitive analysis. I reviewed multiple e-commerce platforms, comparing how they structured their top-of-grid elements. The majority of competitors had streamlined layouts, prioritizing simplicity and ensuring that products were visible above the fold. This analysis confirmed that reducing visual clutter would align our design with best practices and improve usability.

Some of the relevant learnings from the competitive analysis:

Above-the-Fold Products

Out of the 8 competitor screenshots, 6 clearly display products above the fold (Nike, Adidas, eBay, Walmart, Amazon, and New Balance). These sites prioritize showing results early without requiring users to scroll. However, Dick’s Sporting Goods and Target have more promotional banners and filters occupying space, pushing products lower.

Common Features Across Competitors

1. Search Bar at the Top: Every site prominently features a search bar. This specific feature end up being one of the next case studies for the team.
2. Filters & Sorting Options: All sites provide filtering and sorting tools, though placement varies.
3. Applied Filters Visibility: Most platforms (like Adidas, Amazon, and Walmart) show applied filters above product listings for clarity.
4. Promotions & Discounts: Common in Nike, Adidas, and Target, where banners highlight deals.
5. Sticky Navigation or Floating Buttons:Some competitors, like eBay and Amazon, have fixed elements such as filters or a cart button.

Evaluating Necessary UI Elements

After completing the competitive analysis, I shifted focus to understanding which top-of-grid elements in our existing design were truly necessary. This involved a content audit and usability evaluation to ensure that every component served a purpose and contributed to a streamlined shopping experience. With the help of PM we could determine which elements should be retained, repositioned, or removed to create a more efficient browsing experience. These were the evaluated elements:

1. Sliver: Required a careful balance to avoid overwhelming the user, but design changes were limited since Marketing controlled this space.
2. Promotional Banners: Show the message only when the grid is the entry page (test planned, no code changes needed), shorten it to a single line (pending feasibility check), and implement the redesigned version (dependent on the Homepage Aesthetics team).
3. H1 Title: Replacing it with a breadcrumb would enhance navigation.
4. Filters & Sorting: Essential for usability but needed optimization, particularly by refining the Filter & Sort CTA styling to improve engagement.
5. Pills:Has proven to get a good conversion, so need to keep but with visual improvements.
6. Applied Filters: A critical feature, but excessive whitespace between it, pills, and the exposed filters needed to be reduced for better efficiency. Also, could try scrollable instead of wrapped behavior.
7. Item Count: Relevant for user and we decided to keep it but trying different designs.
8. Pagination: Present at the top and bottom of the grid and search results pages, but the industry standard is to keep it at the bottom for a cleaner layout. The top has a low engagement.

UI Optimization & Pixel-by-Pixel Refinement

With a refined list of necessary elements, I initiated a meticulous UI cleanup to maximize above-the-fold space while maintaining usability. Every pixel was carefully adjusted—padding, margins, and font sizes were refined to optimize space without compromising readability. Additionally, I improved the visual hierarchy by adjusting typography, contrast, and spacing, ensuring key elements stood out effectively.

A major enhancement was the integration of applied filters as a more visible and interactive component, aligning with industry patterns and improving usability. Before these refinements, the interface felt cluttered, with excessive spacing, redundant UI components, and key features hidden below the fold. After the redesign, the layout became significantly more streamlined—at least two products were visible at first glance, and four when the two-column grid was applied (a parallel project). Filters became more intuitive, and the overall experience aligned more cohesively with established Fanatics design patterns.

Handoff

Browse Page

Search Results Page

Desktop

A desktop version was also developed to align with the new mobile design, maintaining a consistent style and feature set across both platforms.