DTC brands face a critical homepage decision: What deserves the prime real estate above the fold?

This test reveals a powerful truth: Content that feels important to brands can create friction for new customers. And the impact differs dramatically between new and returning visitors.

The Challenge: Heuristic analysis revealed that an Instagram-style story grid (featuring circular icons linking to collections like "Carriers," "Shop Baby," "Quiz," etc.) was placed directly under the main menu, above the actual homepage hero banner.

The Behavioral Issue:

• Disrupted Hierarchy: The story grid acted as a "false hero," taking up prime above-the-fold real estate and pushing the main brand message and hero image down.
• Navigation Overload: New visitors were immediately presented with 4-5 collection choices before even understanding what the brand sold.
• Mobile Friction: On smaller screens, this grid consumed significant vertical space, delaying the user's view of the primary value proposition and bestsellers.

The Core Question: Was this trendy navigation grid actually helping users convert, or was it just a visual distraction that delayed product discovery?

‍

🧪 The Hypothesis

"If we remove the Instagram-style story grid from above the fold, we can restore the core e-commerce hierarchy (Hero → Value Prop → Products), reduce initial cognitive load for new visitors, and increase conversion rates."

Psychological Principles:

1. Visual Hierarchy: The most important element (the Hero) should be the first thing users see.
2. Hick's Law: Presenting too many navigation choices immediately increases decision time and friction.
3. Goal-Oriented Behavior: New visitors need to understand the brand's core offering before they can effectively navigate specific collections.

‍

The Experiment

Control:

• Instagram-style story grid placed under the menu, above the hero.
• Circular icons with labels (e.g., "Carriers," "Shop Baby") linking directly to collection pages.
• Main hero banner and bestsellers pushed further down the page.

Variant 1: Remove Story Grid

• Story grid completely removed from above the fold.
• Main hero banner takes the primary position directly under the menu.
• Product content (bestsellers) moves significantly higher on the page.
• Note: The story grid was not moved below the fold; it was removed entirely to test the impact of the hierarchy shift.

‍

The Results

Winner: Variant 1 (Remove Story Grid) — But With Critical Segmentation

Overall Performance (All Users): +0.86% Conversion Rate, -0.30% ️Revenue per Visitor, -69.11% Pageview Collections

‍

The Segment Split Reveals the Real Story:

New Users (The Winners): +7.85% Conversion Rate, +4.72% ️Revenue per Visitor, -70.59% Pageview Collections

Returning Users (The Losers): -2.60% Conversion Rate, -1.84% Revenue per Visitor, -60.63% Pageview Collections

‍

💡 The Critical Insight: Why Did Collection Pageviews Drop 69%?

This is the most fascinating part of the test. Removing the story grid caused a massive -69.11% drop in collection pageviews.

Why? Because the story grid was the primary navigation tool to those collections!

However, despite this massive drop in collection browsing, new user conversions still went up by 7.85%.

What This Tells Us:

1. New users didn't need the story grid to convert. They preferred to see the main hero and bestsellers. The story grid was actually a distraction that delayed their path to purchase.
2. Returning users relied heavily on the story grid. They used it as a quick shortcut to navigate to their favorite collections. When it was removed, their conversion rate dropped (-2.60%).

The Tradeoff: We sacrificed a highly used navigation path (collection pageviews) to improve the primary conversion path (Hero → Bestsellers → Checkout) for new users. Because new users made up ~94% of the traffic, the overall impact was positive.

‍

What This Means for Your Store

1. Don't Let Trendy UI Disrupt Core Hierarchy: Instagram-style grids look great, but if they push your main hero and value proposition below the fold, they are hurting your conversion rate. Core e-commerce hierarchy (Hero → Products) should always come first.

2. Navigation Above the Fold Can Be Friction: Presenting users with 4-5 collection choices before they even understand your brand creates decision fatigue. Let them understand what you sell first, then offer navigation.

3. Returning Users Behave Differently: Returning users use navigation shortcuts (like story grids) heavily. If you remove a primary navigation tool, you must provide an alternative (e.g., a robust main menu, a mega-menu, or a personalized homepage).

4. Pageviews ≠ Conversions: The story grid drove massive collection pageviews, but those pageviews didn't translate to conversions for new users. Don't optimize for clicks; optimize for revenue.

5. Segment Your Data to Find Hidden Wins: Overall RPV was flat (-0.30%), but new user RPV increased by +4.72%. If you only looked at the overall metric, you might have killed a winning test.

‍

🎯 Key Takeaways

Hero first, navigation second — Don't let UI trends push your core message down

‍Story grids can be false heroes — They consume space without always driving primary conversions

‍Pageviews don't equal revenue — The grid drove clicks, but not new user sales

‍Returning users need shortcuts — If you remove a navigation tool, replace it elsewhere

‍Always segment new vs. returning — Their behaviors and needs are fundamentally different

‍

When to Use (or Avoid) Story Grids Above the Fold

Keep Them If:

• Returning users make up >30% of your traffic
• Your main menu is weak and the grid is the primary navigation
• You have a highly visual brand where collections are the main draw (e.g., fashion)
• A/B testing shows they don't push critical content below the fold

Remove Them If:

• New user traffic is >80% (like this test)
• They push your hero banner or bestsellers below the fold
• You have a strong, clear main menu that already links to collections
• Your primary goal is direct product sales, not collection browsing

‍